Window.resize event in IE
There are some cases when we will have to do something when the user will resize the window. This is very easy to do with the event window.resize() (except in IE). In IE if we will simply bind the window.resize() in JS, then most of the time there is possibility that the browser will hang while resizing. Other browsers like FF Chrome etc handle this event very carefully and call the window.resize only once but this is not the case with IE. IE will fire the event for almost infinite number of times and even IE fires the event whenever we will re-size the content of the window also, which causes a big problem as a result at that time browser stop responding and the user will not be able to do anything, there may be the chances that finally user has to close the window and open it again .
But if there is a problem there is a solution :). We will bind the resize event with the window, but we will handle this event in such a manner that the resize event will be fired only once.
function resize_viewport() {
$.event.remove( this, "resize", resize_viewport);
// do what you need to do
$.event.add( this, "resize", resize_viewport);
}
// and in the document ready event
//Initial resizing
resize_viewport();
// Bind resize event to the window
$(window).resize(resize_viewport())
here we are binding the resize event in document.ready() and will call the function resize_Viewport() under which, first we will remove the event and we will write what we want to do. Now the event will fire only once and we can easily do what ever we want to do on resize of window with IE also :).
There is one more solution. A samll plugin(jquery.wresize.js), to solve a big problem, is available which will call the function once and also stop calling the function on content resize in IE means it will call the resize function only when the user will resize the window.
jquery.wresize.js
(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);
So , now we can easily bind window.resize() without having any problem with IE.