Question

I have a DIV container somewhere on the page with min-width and min-height set to some values.

I am loading small panels (DIVs with display:inline-block) into it using callbacks and javascript.

Right now the number of panels is fixed, so that when the user maximizes the browser window, the size of the container increases, and white space appears at the end of last line.

I want to catch the container’s size changes, and load more elements, as many as will fit without clipping into the container’s new space.

I saw this on amazon.com. They have panels that display 4 products, but if the browser window is maximized, same panels will display more products filling all the available space in the container.

Scroll-bars must not appear, and no clipping of elements must be done.

Is there a script I could use, or sample code?

Thank you,
Andrei

Answer 1

Found a very nice solution to the problem.
Here’s the code: (term ‘display’ here is used in the same sense as at the supermarket):

function updateDisplay() {
    $(".s2", this).hide();
    var x = $(".s2", this);

    var prevPos = -1;
    var nrows = 2;
    for (var i = 0; i < x.length; i++) {
        $(x[i]).toggle();
        var curPos = $(x[i]).position().left;
        if (curPos < prevPos) {
            if (--nrows == 0) {
                $(x[i]).toggle();
                break;
            }
        }
        prevPos = curPos;
    }
}

function updateDisplays() {
    $(".dcon").each(updateDisplay);
}

$(window).resize(updateDisplays);
$(document).ready(updateDisplays);

You can see it in action on the following pages:

http://www.megabit-mich.ru

http://www.sportolimpia.ru