Question

UPDATE1: Updated the JS fiddle link sorry set interval was not working as I wanted it to

I have a array which is dynamically growing (number getting added every 1 sec). I have to split this list and display it in columns, I am actually have problem displaying the list inside the ul and li(yes only ul and li no tables). The user can specify the max number of columns(Stop adding columns once there are this many) and the minimum column height(No added column may contain fewer than this many items). Also, the number of items in any added column must be either the same as, or 1 fewer than for the previous column. The output for max column =3 and min column height =3

What I was able to do so far is:

1. use set interval to add number every 1 sec

2. put the incoming numbers in an array like [1] , [1,2] ... [1,2,3,4] after 4 sec. This array is called range

3. split the main array (range) into sub array (new_range) for eg if the main array

   (range) = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

   new_range (after 1st loop) = [1, 2, 3, 4]

   new_range (after 2nd loop) = [5, 6, 7]

   new_range (after 3rd loop) = [8, 9, 10]

4. so now I need to display each new range vertically using ul and li so i tried doing something like $('ul').append('<li>' + new_range[j] + '</li>'); were j is the new_range array index

I have problem displaying the li items next to each other like the sample output using CSS, It would be great if someone could tell me how to display the li items after each iteration next to each other

JS fiddle link

Answer 1

I found your fiddle too confusing, so I’ve started from scratch.

The following function takes an array of values, data, the maximum number of columns, cols, and the maximum size of each column, size. If data has more than cols * size values the leftovers are not shown. It creates columns as individual ul elements, each of which are appended to a container that is presumed to exist with the id “container” (the first thing the function does is empty that container).

function createList(data, cols, size){
    var $ul,
        $container = $("#container").empty();

    $.each(data, function(i,v){
        if (i >= cols * size)
            return false;
        if (i%size === 0)
            $ul = $("<ul/>").appendTo($container);

        $ul.append($("<li/>").html(v));
    });
}   

The ul elements can be shown side by side (i.e., as columns) with this CSS:

ul { float : left; }

Working demo that adds values to the array using setInterval(): http://jsfiddle.net/VXAHy/1/

I don’t show any of the setInterval() or array-populating code here in my answer because that is all irrelevant: the above function always redraws all of the columns based on the array passed in. (I do show the interval stuff in my demo fiddle.)