jQuery resize()使用浏览器最大化按钮 [英] jQuery resize() using browser maximise button

问题描述

这是我的代码，每当调整窗口大小时都会触发:

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.

这是setDisplayBoardSize()函数:

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");
        }
    }
}

我认为问题在于，当单击浏览器最大化按钮时，它会触发读取的函数，该函数在调整大小前先获得.display_container宽度 ，然后将窗口调整为最大大小，这意味着我的display_board是尺寸不正确.

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.

如果我是对的，那么如何在 之后获得.display_container元素的大小?

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

应该注意，我已经在Chrome和Firefox中对此进行了测试

Should note I've tested this in Chrome and Firefox

谢谢

推荐答案

对建议的修复程序进行

EDIT for proposed fix:

这是工作中的jsFiddle 这是仅结果演示.

如您所见，我完全重构了您的原始jQuery代码.我从全局中删除了所有内容，并删除了功能. .resize() 已经期望有一个函数，所以我只需在该函数中做所有事情，然后立即调用 .resize() 以便在初始页面加载时调用它.

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.

我所做的另一项更改是从允许的最大宽度尺寸(5)开始向后递增for循环，然后逐步减小到允许的最小宽度尺寸(2).

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).

此外，在您的for循环中，我创建了j和k变量，以使其更容易读取这些条件.

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

主要更改是if语句.如果我们在max_column迭代中并且容器的宽度k较宽，则要将板的宽度设置为k并跳出for循环，否则我们将评估原始的if语句，否则执行if我们正在进行min_column迭代，并且容器的宽度小于j，我们想将电路板的宽度设置为j.

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.

我在Chrome浏览器中对此进行了测试，效果很好.希望对您有帮助.

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

});​

这篇关于jQuery resize()使用浏览器最大化按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！