Question

This is my code that fires whenever the window is resized:

$(window).resize(function()
{   
    setDisplayBoardSize();
});

Fires fine when I resize the window and runs my function just fine, as expected.

If I hit the maximise button though it doesn’t work correctly.

This is the setDisplayBoardSize() function:

function setDisplayBoardSize()
{
    var width = $(".display_container").width();

    for (i=min_columns; i<=max_columns; i++)
    {
        if ((width > (i*(item_width + gap))) && (width < ((i+1) * (item_width + gap))) )
        {
            $("#display_board").css("width",(i*(item_width + gap))+ "px");
        }
    }
}

I think the problem is that when the browser maximise button is clicked it fires the function which reads gets the .display_container width before the resize and then resizes the window to maximum which means that my display_board is incorrectly sized.

If I’m right how can I get the size of the .display_container element after the window has resized to maximum?

Should note I’ve tested this in Chrome and Firefox

Thanks

Answer 1

EDIT for proposed fix:

Here is the working jsFiddle
and here is the results only demo.

As you can see, I totally re-factored your original jQuery code. I removed everything from Global as well as taking out the functions. .resize() expects a function already, so I just do everything inside that one function and then immediately call .resize() to invoke it on the initial page load.

Another change I made was to increment your for loop backwards, starting with the widest possible width size you allow (5), working my way down to the smallest possible width size you allow (2).

Also, inside of your for loop, I created j and k variables to make it easier to read those conditions.

The main change was the if statement. If we are on the max_column iteration and the width of the container is wider k, we want to set the board’s width to k and jump out of the for loop, otherwise we evaluate the original if statement you had, otherwise if we are on the min_column iteration and the width of the container is less than j, we want to set the board’s width to j.

I tested this in Chrome and it works beautifully. I hope this helps you.

$(document).ready(function()
{    
    $(window).resize(function() 
    {
        var item_width = 200, 
            item_height = 300, 
            gap = 20,
            min_columns = 2, 
            max_columns = 5,
            min_width = min_columns * (item_width + gap), 
            max_width = max_columns * (item_width + gap),
            container_width = $(".display_container").width(),
            $display_board = $("#display_board"),
            $display_board_ol_li = $display_board.find("ol > li");

        //console.log("container width: " + container_width);

        for (var i = max_columns; i >= min_columns; i--)
        {
            var j = i * (item_width + gap),
                k = (i+1) * (item_width + gap);

            //console.log("j: " + j);
            //console.log("k: " + k);
            //console.log("display_board width (before): " + $display_board.css("width"));

            if (i === max_columns && container_width > k) 
            {
                $display_board.css("width", max_width + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
                break;                
            } 
            else if (container_width > j && container_width < k)
            {
                $display_board.css("width", j + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
                break;
            }
            else if (i === min_columns && container_width < j) 
            {
                $display_board.css("width", min_width + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
            }
        }

        $display_board_ol_li.css({

            "width" : item_width + "px",
            "height": item_height + "px",
            "margin": gap/2 + "px"

        });

    }).resize();

});​