Home > Developer > JavaScript
In IE, a resize event is executed multiple times. This is a widely recognized problem between IE6 and IE7. This problem varies with the two versions of browsers. Generally, IE6 is worse than IE7.
Now we have a better solution. Let jquery. wresize. js, The jquery plug-in, help you:
Js Code
Copy codeThe Code is as follows:
/*
========================================================== ========================================================
WResize is the jQuery plugin for fixing the IE window resize bug
........................................ .......................................
Copyright 2007/Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: php "> 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 );
For more information, see test page.:
Js Code
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://www.hake.cc/kf/201109/ "http://jquery.com/src/jquery-latest.pack.js"> </script>
<Script type = "text/javascript" src = http://www.hake.cc/kf/201109/ "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 test test test test test test test test test 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
