jQuery resize() using browser maximise button

Question

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

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

Fires fine when I re

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();

});​