Home > Developer > JavaScript
This is a method that makes people very depressed every time they change the page window. Especially in IE browser, a slight move to the window border will trigger many events. What's even worse is that when the resize event contains some page content for processing or computing, and the resize event is triggered again, IE will be randomly suspended.
I have been searching for a long time on the Internet, all of which are subject to the same rule. A reposted method is everywhere. Here is a solution found on the Internet:
Copy codeThe Code is as follows:
Var resizeTimer = null;
$ (Window). resize (function (){
If (resizeTimer) clearTimeout (resizeTimer );
ResizeTimer = setTimeout ("changeHeight ()", 500 );
}); // The execution delay of the resize event is 500 milliseconds
Although this method can solve the issue of multiple execution events, it is not perfect. Finally, I found a solution in the form of jquery plug-in;
Copy codeThe Code is as follows:
/*
========================================================== ========================================================
WResize is the jQuery plugin for fixing the IE window resize bug
........................................ .......................................
Copyright 2007/Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: http://www.opensource.org/licenses/mit-license.php
WEBSITE: http://noteslog.com/
========================================================== ========================================================
*/
(Function ($)
{
$. Fn. wresize = function (f)
{
Version = '1. 1 ';
Wresize = {fired: false, width: 0 };
Function resizeOnce ()
{
If ($. browser. msie)
{
If (! Wresize. fired)
{
Wresize. fired = true;
}
Else
{
Var version = parseInt ($. browser. version, 10 );
Wresize. fired = false;
If (version <7)
{
Return false;
}
Else if (version = 7)
{
// A vertical resize is fired once, an horizontal resize twice
Var width = $ (window). width ();
If (width! = Wresize. width)
{
Wresize. width = width;
Return false;
}
}
}
}
Return true;
}
Function handleWResize (e)
{
If (resizeOnce ())
{
Return f. apply (this, [e]);
}
}
This. each (function ()
{
If (this = window)
{
$ (This). resize (handleWResize );
}
Else
{
$ (This). resize (f );
}
});
Return this;
};
}) (JQuery );
You can save the above Code as jquery. wresize. js to import the webpage, copy the following code to notepad, save it as a webpage, and then test it. Example:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" style = "overflow: hidden;">
<Head>
<Title> test window resize </title>
<Script type = "text/javascript" src = "http://jquery.com/src/jquery-latest.pack.js"> </script>
<Script type = "text/javascript" src = "jquery. wresize. js"> </script>
<Script type = "text/javascript">
JQuery (function ($)
{
Function content_resize ()
{
Var w = $ (window );
Var H = w. height ();
Var W = w. width ();
$ ('# Content' detail .css ({width: W-20, height: H-20 });
}
$ (Window). wresize (content_resize );
Content_resize ();
});
</Script>
</Head>
<Body>
<Div id = "content" style = "border: 1px dashed silver; position: absolute; overflow: auto;">
Test testtest test test test
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
