Fill empty spaces in a list element

Question

I have a fluid grid (in height and width). The LIs are always rectangular and adapt them self's to the screen size.

Now i need to fill the lists, so they all have the same height. This would be easy if the all the columns had a with of one LI element. But there are double sized columns and some of them can contain big sized LI's. In some cases there is even empty spaces in the middle of the column, because there is a big Li a small one and just after it a big one again.

On some content pages all li's are in a single column.

In every case the li's are floated left. I have made some images to explain the problem:

First i wanted to count the child's and compare them. But it got complicated when all LI's are in a single column or when a LI's is missing in the middle of the column.

This is what i have tried:

var longest = 0

$("ul.grid-col").each(function(){
    var liCount, $that = $(this);
    liCount = $that.find("> li").length;

    if ($that.is(".double")){
       if( $that.find("li.big").length ){
          var bigCount = $that.find("li.big").length
          liCount = (liCount - bigCount) + (bigCount * 4) //because one big has the size of 4 small one 
       }
     liCount = liCount / 2

    }

    if ( longest < liCount ){
       longest = liCount
    }
})

Now i know how many LI's i need to fill the empty spaces, its pretty easy to fill them up. But how do i find out if there is a empty space in the middle of the li's? And how would you handle the special case of the single column?

Answer 1

Have you tried using a CSS framework like 960.gs? Its much easier and the code will be more semantic. Also, using javascript for layout is a really bad idea. When will the JS code be executed? If its added to the end, then the page looks distorted till it loads and if you load it at the beginning, then it won't work as the elements are not loaded yet.

Answer 2

I'm pretty sure you can't. That is the problem with floats. You are taking the elements out of the flow of the document, technically. The only thing you could do is work out how many li's you've got of each size before they are drawn, work out where they are going to be drawn, and then add the empty ones where there are likely to be gaps.

However, for this to work you're going to have to work out a pattern where the gaps appear, and be rest assured, it won't be the same in all browsers!

One way round it would be to group all the li's in blocks of four, so that if there were four li's you could create a new ul, then append the four to it. If it were a large li, keep is as such. For example:

<ul>
  <li class="large">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li class="large"></li>
  <li class="large">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

If you get what I mean!

Answer 3

I got this to work in FF. Hopefully I understood you question correctly. I tried to emulate your situation by building an html shell to work with. I'm not sure it matches your code, but I based in upon your image.

The gist of my approach is as follows:

The single column ul's were pretty easy. Iterate over all of the ul's to see what the max height is. Divide the maxHeight by the li height and add li's to fill out as needed.

The double-wide ul's were a bit trickier. I created a simple array to represent the single spaces that would make up the double wide columns. Then, I step through each li and update the status of the spaces index as filled where appropriate. If a double occurs where a single is needed, then I add a new li. After coming to the end of the li array for the double ul, i check the spaces array once more to make sure there aren't any empties at the end of the ul.

Hopefully the code is a bit clearer than my explanation. :)

    <style type="text/css">*               {margin:0; padding:0; list-style:none; border:none; outline:none;}

    body            {}

    ul              {float:left; display:inline; background:#efefef; position:relative;}
    ul.single       {width:50px;}
    ul.double       {width:100px;}
    li              {float:left; display:inline; background:#dddddd; -moz-border-radius:10px;}
    li.single       {height:50px; width:50px;}
    li.double       {height:100px; width:100px; background:#999999;}

    .added          {background:#990000 !important;}
</style>

<script type="text/javascript">
    $(document).ready(function(){
        var maxHeight = 0;
        var maxWidth = 0;

        // Update the ul to manually set height and widths.
        $('ul').each(function(){
            var height = $(this).outerHeight();
            var width = $(this).outerWidth();

            $(this).css({
                'height': height,
                'width': width
            });

            if(height > maxHeight) {maxHeight = height;}
            if(width > maxWidth){maxWidth = width;}
        });

        var single = 50;
        var double = 100;

        // go over the li's and see if any spaces are empty.
        $('ul').each(function(){
            if($(this).hasClass('single')){
                var totalSpaces = maxHeight / single;
                var liCount = $(this).find('li').length;

                for(var i = liCount; i<totalSpaces; i++){
                    $(this).append('<li class="single added">&nbsp;</li>');
                }
            } else {
                // Abstract a two column grid.
                var totalSpaces = maxHeight / single * 2;

                // Set up an array representation of the spaces.
                var spaces = [];

                // Preset all spaces as empty.
                for(var i=0; i<totalSpaces; i++){
                    spaces.push(false);
                }

               var currentSpace = 0;

                // Iterate over the li's and update spaces array.
                $(this).find('li').each(function(index, ele){
                    if($(ele).hasClass('single')){
                        spaces[currentSpace] = true;
                        currentSpace++;
                    } else {
                        // Is this the right column?  (is the currentSpace odd?)
                        if(currentSpace % 2 != 0){
                            // Insert a single li.
                            $(ele).before('<li class="single added">&nbsp;</li>');
                            spaces[currentSpace] = true;
                            currentSpace++;
                        }
                        for(var i=currentSpace; i<(currentSpace + 4); i++){
                            spaces[i] = true;
                        }
                        currentSpace+=4;
                    }
                });

                // finally, go back over the spaces array and fill in any missing li's from the end.
                var me = $(this);
                $(spaces).each(function(index, ele){
                    if(!ele){
                        // insert a single li at the end.
                        $(me).append('<li class="single added">&nbsp;</li>');
                        spaces[index] = true;
                    }
                });
            }
        });
    });
</script>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="double">
    <li class="double">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="double">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="double">
    <li class="single">&nbsp;</li>
    <li class="double">&nbsp;</li>
    <li class="double">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="double">
    <li class="single">&nbsp;</li>
</ul>

<ul class="double">
    <li class="double">&nbsp;</li>
</ul>