is it even possible to expand a (horizontal) list's background with ajax?

Question

I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:

http://jqueryui.com/demos/sortable/#display-grid

Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.

Answer 1

Could you provide a sample of your code? Also, why does the list have display:none set?

For instance, should be as simple as this:

HTML:

<ul id="dest"></ul>

JS:

// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function  
function(data, response) {
    var items = json.parse(data);
    $.each(items, function() {
         // Assumes item has a name property
         $('#dest').append($('<li>' + this.name + '</li>'));     
    });
}

Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.

Hope that helps.

Answer 2

This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.

Edit: See quirksmode for another css-only workaround.

Answer 3

You need to explicitly set the width and height for the area.

Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/

Here is the script:

$(function(){
  //Get our elements for faster access and set overlay width
  var div = $('div.sc_menu'),
               ul = $('ul.sc_menu'),
               // unordered list's left margin
               ulPadding = 15;

  //Get menu width
  var divWidth = div.width();

  //Remove scrollbars
  div.css({overflow: 'hidden'});

  //Find last image container
  var lastLi = ul.find('li:last-child');

  //When user move mouse over menu
  div.mousemove(function(e){

    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
  });
});

Basically, you need to update the ulWidth and divWidth when you add the new item.

Then just set the background image to repeat horizontally and you should be set.

ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}

Note: You will need to set the height; otherwise you will not see the background because the li are floated.

Answer 4

For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it. See the links below, it also have demo, so you can understand the concept:

1. http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
2. http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
3. http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/ and http://aloestudios.com/misc/overflow/