jQuery resize()使用浏览器最大化按钮

Question

这是我调整窗口大小时触发的代码:

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

当我调整窗口大小并按预期运行我的功能时,会很好.

如果我点击最大化按钮虽然它无法正常工作.

这是setDisplayBoardSize()函数:

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是尺寸不正确.

如果我是对的,如何在窗口调整为最大值后获得.display_container元素的大小？

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

谢谢

Answer 1

这也是对我的迫切,并不知道为什么,直到我读你的帖子.似乎你是对的,在我按下最大值之前函数被触发,所以为了解决这个问题,我使用了litle延迟.

$(window).resize(function()
{   
setTimeout(function() {
    setDisplayBoardSize();
}, 100);
});

Answer 2

我在响应式网站上遇到了类似的问题,除了图像幻灯片外,每个资产都会调整大小并适当移动.这只发生在IE中,它只发生在您从平板电脑断点开始,然后点击最大化按钮并输入桌面断点时.

最后解决问题的方法是使用Paul Irish的这个方便代码限制调整大小的触发器:

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

你可以在这里看到他关于它的完整帖子(从2009年开始):http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

希望能帮到那里的人.

Answer 3

编辑建议的修复：

\n\n

这是工作中的 jsFiddle \n，这里是仅结果演示。

\n\n

正如你所看到的，我完全重构了你原来的 jQuery 代码。我从 Global 中删除了所有内容以及功能。 .resize()已经需要一个函数，所以我只需在该函数内执行所有操作，然后立即调用.resize()以在初始页面加载时调用它。

\n\n

我所做的另一个更改是向后增加 for 循环，从您允许的最宽可能宽度尺寸 (5) 开始，一直到您允许的最小可能宽度尺寸 (2)。

\n\n

另外，在 for 循环内部，我创建了j和k变量，以便更轻松地读取这些条件。

\n\n

主要的变化是 if 语句。如果我们在 max_column 迭代中并且容器的宽度更宽k，我们希望将板的宽度设置为k并跳出 for 循环，否则我们评估您原来的 if 语句，否则如果我们在min_column 迭代且容器的宽度小于j，我们希望将板的宽度设置为j。

\n\n

我在 Chrome 中对此进行了测试，效果非常好。我希望这可以帮助你。

\n\n

$(document).ready(function()\n{    \n    $(window).resize(function() \n    {\n        var item_width = 200, \n            item_height = 300, \n            gap = 20,\n            min_columns = 2, \n            max_columns = 5,\n            min_width = min_columns * (item_width + gap), \n            max_width = max_columns * (item_width + gap),\n            container_width = $(".display_container").width(),\n            $display_board = $("#display_board"),\n            $display_board_ol_li = $display_board.find("ol > li");\n\n        //console.log("container width: " + container_width);\n\n        for (var i = max_columns; i >= min_columns; i--)\n        {\n            var j = i * (item_width + gap),\n                k = (i+1) * (item_width + gap);\n\n            //console.log("j: " + j);\n            //console.log("k: " + k);\n            //console.log("display_board width (before): " + $display_board.css("width"));\n\n            if (i === max_columns && container_width > k) \n            {\n                $display_board.css("width", max_width + "px");\n                //console.log("display_board width (after): " + $display_board.css("width"));\n                break;                \n            } \n            else if (container_width > j && container_width < k)\n            {\n                $display_board.css("width", j + "px");\n                //console.log("display_board width (after): " + $display_board.css("width"));\n                break;\n            }\n            else if (i === min_columns && container_width < j) \n            {\n                $display_board.css("width", min_width + "px");\n                //console.log("display_board width (after): " + $display_board.css("width"));\n            }\n        }\n\n        $display_board_ol_li.css({\n\n            "width" : item_width + "px",\n            "height": item_height + "px",\n            "margin": gap/2 + "px"\n\n        });\n\n    }).resize();\n\n});\xe2\x80\x8b\n

\n