Javascript jQuery resize() 使用浏览器最大化按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10180782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery resize() using browser maximise button
提问by Matt Styles
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:
这是 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");
}
}
}
I think the problem is that when the browser maximise button is clicked it fires the function which reads gets the .display_container width beforethe resize and then resizes the window to maximum which means that my display_board is incorrectly sized.
我认为问题在于，当单击浏览器最大化按钮时，它会触发读取在调整大小之前获取 .display_container 宽度的函数，然后将窗口大小调整为最大，这意味着我的 display_board 大小不正确。
If I'm right how can I get the size of the .display_container element afterthe window has resized to maximum?
如果我是对的，如何在窗口调整到最大后获得 .display_container 元素的大小？
Should note I've tested this in Chrome and Firefox
应该注意我已经在 Chrome 和 Firefox 中测试过了
Thanks
谢谢
采纳答案by Code Maverick
EDIT for proposed fix:
编辑建议的修复：
Here is the working jsFiddleand here is the results only demo.
这是正在运行的 jsFiddle，这是仅演示结果。
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.
如您所见，我完全重构了您的原始 jQuery 代码。我从 Global 中删除了所有内容并删除了这些功能。 .resize()已经需要一个函数，所以我只是在那个函数中做所有的事情，然后.resize()在初始页面加载时立即调用它。
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 循环，从您允许的最大可能宽度大小 (5) 开始，逐步降低到您允许的最小可能宽度大小 (2)。
Also, inside of your for loop, I created jand kvariables to make it easier to read those conditions.
此外，在您的 for 循环内部，我创建了j和k变量，以便更轻松地阅读这些条件。
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 kand 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.
主要的变化是 if 语句。如果我们在 max_column 迭代上并且容器的宽度更宽k，我们希望将板的宽度设置为k并跳出 for 循环，否则我们评估您拥有的原始 if 语句，否则如果我们在 min_column 迭代上并且容器的宽度小于j，我们希望将板的宽度设置为j。
I tested this in Chrome and it works beautifully. I hope this helps you.
我在 Chrome 中对此进行了测试，效果很好。我希望这可以帮助你。
$(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();
});?
回答by Nicola Mihaita
This hapened to me also and didnt knew why, till i read your post. Seems like you were right the function is fired before i pressed maximize, so to fix this i used a litle delay.
这也发生在我身上，不知道为什么，直到我读了你的帖子。看起来你是对的，在我按下最大化之前函数被触发，所以为了解决这个问题，我使用了一点延迟。
$(window).resize(function()
{
setTimeout(function() {
setDisplayBoardSize();
}, 100);
});回答by elainevdw
I was having a similar issue on a responsive site where every asset would resize and shift appropriately except for the image slideshow. This only happened in IE, and it only happened when you would start at the tablet breakpoint, then hit the maximize button and enter the desktop breakpoint.
我在响应式网站上遇到了类似的问题，除了图像幻灯片之外，每个资产都会适当地调整大小和移动。这仅发生在 IE 中，并且仅在您从平板电脑断点处开始，然后点击最大化按钮并进入桌面断点时才会发生。
What ended up fixing the problem was throttling the resize trigger using this handy code from Paul Irish:
最终解决问题的是使用 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...
});
You can see his full post about it (from 2009) here: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
你可以在这里看到他关于它的完整帖子（从 2009 年开始）：http: //www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
Hope that helps somebody out there.
希望能帮助到那里的人。
回答by undefined
some browsers like ie and opera trigger this event with some limitations, this plugin can solve the issue:
一些浏览器如 ie 和 opera 触发此事件有一些限制，这个插件可以解决这个问题：
回答by Dima Kovalenko
var window_width_check_big = false, // flag true if window bigger than my_width
window_width_check_small = false, // flag true if window smaller than my_width
my_width = 1221; // Change to your width
function get_window_size() {
if(window.innerWidth > my_width) {
window_width_check_big = true;
}
if(window.innerWidth < my_width) {
window_width_check_small = true;
}
}
get_window_size();
$(window).resize(function() {
if(window.innerWidth > my_width) {
window_width_check_big = true;
}
if(window.innerWidth < my_width) {
window_width_check_small = true;
}
if( window_width_check_small && window_width_check_big ) {
window_width_check_big = false;
window_width_check_small = false;
get_window_size();
// Start function that you need
}
});
回答by judian
The following code works well for me in both Chrome and IE11: (javascript and jQuery).
以下代码在 Chrome 和 IE11 中都适用于我：（javascript 和 jQuery）。
var mResizeTimer;
function setWindowResizeEndEvent() {
$(window).on('resize', setTimerForResizeEnd);
}
function setTimerForResizeEnd() {
clearTimeout(mResizeTimer);
mResizeTimer = setTimeout(onResizeEnd, 100);
}
function onResizeEnd() {
$(window).off('resize', setTimerForResizeEnd);
$(window).resize();
setWindowResizeEndEvent();
}
Explanation: I'm firing the native window.resize event, After a resizing ended. This re-firing the resize event after maximizing the window ended.
说明：在调整大小结束后，我正在触发本机 window.resize 事件。在最大化窗口结束后重新触发调整大小事件。
回答by judian
The following code works well for me in both Chrome and IE11: (javascript and jQuery).
以下代码在 Chrome 和 IE11 中都适用于我：（javascript 和 jQuery）。
function setWindowResizeEndEvent() {
$(window).on('resize', setTimerForResizeEnd);
}
var mResizeTimer;
function setTimerForResizeEnd() {
clearTimeout(mResizeTimer);
mResizeTimer = setTimeout(onResizeEnd, 100);
}
function onResizeEnd() {
$(window).off('resize', setTimerForResizeEnd);
$(window).resize();
setWindowResizeEndEvent();
}
Explanation: I'm firing the native window.resize event, After a resizing ended. This re-firing the resize event after maximizing the window ended.
说明：在调整大小结束后，我正在触发本机 window.resize 事件。在最大化窗口结束后重新触发调整大小事件。
