Window.resize event coverage in Internet Explorer

Question

As you know, in Internet Explorer, the window.resize event fires when any element on the page changes. It doesn't matter if the page element is changed by assigning / changing its height or style, just adding a child element or something else, even if changing the size of the element does not affect the size of the viewport itself.

In my application, this causes unpleasant recursion, because in my window.resize handler I resize <li> elements, which in turn burn out window.resize, etc. Again, this is only a problem in IE.

Is there a way to prevent window.resize window.resize in IE in response to elements on a page that resizes?

I should also mention that I'm using jQuery.

Answer 1

I just discovered another problem that might help you.

I am using jQuery, and I have a window.resize event to call a function that will rearrange the div added to the body.

Now when I set the css LEFT property of this added div, the window.resize event gets a trigger for NO GOOD REASON.

This results in an endless loop starting window.resize again and again.

Code without correction:

$(window).resize(function(){ var onResize = function(){ //The method which alter some css properties triggers //window.resize again and it ends in an infinite loop someMethod(); } window.clearTimeout(resizeTimeout); resizeTimeout = window.setTimeout(onResize, 10); }); 

Decision:

 var winWidth = $(window).width(), winHeight = $(window).height(); $(window).resize(function(){ var onResize = function(){ //The method which alter some css properties triggers //window.resize again and it ends in an infinite loop someMethod(); } //New height and width var winNewWidth = $(window).width(), winNewHeight = $(window).height(); // compare the new height and width with old one if(winWidth!=winNewWidth || winHeight!=winNewHeight){ window.clearTimeout(resizeTimeout); resizeTimeout = window.setTimeout(onResize, 10); } //Update the width and height winWidth = winNewWidth; winHeight = winNewHeight; }); 

This way, basically it will check if the height or width changes (which will happen ONLY when you actually resize using the window).

Answer 2

this made sense to me and seems to work in IE7 and above:

  //variables to confirm window height and width var lastWindowHeight = $(window).height(); var lastWindowWidth = $(window).width(); $(window).resize(function() { //confirm window was actually resized if($(window).height()!=lastWindowHeight || $(window).width()!=lastWindowWidth){ //set this windows size lastWindowHeight = $(window).height(); lastWindowWidth = $(window).width(); //call my function myfunction(); } }); 

Answer 3

Associate the resize listener with .one() so that it disconnects after firing. Then you can do whatever you want, until at the end you reinstall the resize listener. I found the easiest way to do this by placing the resize listener in an anonymous function as follows:

 var resizeListener = function(){ $(window).one("resize",function(){ //unbinds itself every time it fires //resize things setTimeout(resizeListener,100); //rebinds itself after 100ms }); } resizeListener(); 

You do not need the setTimeout technical support wrapped around resizeListener() , but I threw it there just in case for some additional throttling.

Answer 4

I solved it by canceling the resize function, rebuilt the page and again bound the resize function:

 function rebuild() { $(window).unbind('resize'); /* do stuff here */ $(window).bind('resize',rebuild); } $(window).bind('resize',rebuild); 

EDIT

Binding and unbinding are not suitable for IE8. Although Microsoft has even abandoned IE8, you can try this (untested!):

 function rebuild(){ if(!window.resizing) return false; window.resizing=true; /* do stuff here */ window.resizing=false; } window.resizing=false; document.body.onresize=rebuild; 

Answer 5

@ Reply AamirAfridi.com solved my problem.

It is a good idea to write a general function to solve such problems:

 function onWindowResize(callback) { var width = $(window).width(), height = $(window).height(); $(window).resize(function() { var newWidth = $(window).width(), newHeight = $(window).height(); if (newWidth !== width || newHeight !== height) { width = newWidth; height = newHeight; callback(); } }); } 

Use it like this and you no longer need to worry about other behavior in IE:

 onWindowResize(function() { // do something }); 

Answer 6

Today I ran into this problem and decided to include the following in my global javascript file:

 var savedHeight = 0; var savedWidth = 0; Event.observe(window, 'resize', function (e) { if (window.innerHeight == savedHeight && window.innerWidth == savedWidth) { e.stop(); } savedHeight = window.innerHeight; savedWidth = window.innerWidth; }); 

This requires a prototype.

Answer 7

Combination of unbind / bind method with call delay. It works in Internet Explorer 8 and below, preventing an evil loop and freezes on versions 6 and 7.

 function resizeViewport() { // Unbind and rebind only for IE < 9 var isOldIE = document.all && !document.getElementsByClassName; if( isOldIE ) $(window).unbind( 'resize', resizeViewport ); // ... if( isOldIE ) { setTimeout(function(){ $(window).resize( resizeViewport ); }, 100); } } $(window).resize( resizeViewport ); 

Answer 8

You can try the following:

Constructor:

 this.clientWidth = null; this.clientHeight = null; 

Some function:

 var clientWidth = window.innerWidth || document.documentElement.clientWidth; var clientHeight = window.innerHeight || document.documentElement.clientHeight; if (clientWidth != this.clientWidth || clientHeight != this.clientHeight ) { this.clientWidth = clientWidth; this.clientHeight = clientHeight; ... YOUR CODE ... } 

For Internet Explorer, Chrome, Firefox, Opera, and Safari:

 window.innerHeight - the inner height of the browser window window.innerWidth - the inner width of the browser window 

For Internet Explorer 8, 7, 6, 5:

 document.documentElement.clientHeight document.documentElement.clientWidth or document.body.clientHeight document.body.clientWidth 

Answer 9

 (function ($){ //if ie8 -> return; var lastHeight = 0; var lastWidth = 0; $(window).resize(function(event){ if (window.innerHeight == lastHeight && window.innerWidth == lastWidth) { event.stopImmediatePropagation(); } lastHeight = window.innerHeight; lastHeight = window.innerWidth; }); })(); 

does the trick for me ...

Answer 10

 <pre> var cont = 0; var tmRsize = 100; var lastWindowWidth = $(window).width(); var lastWindowHeight = $(window).height(); /*****redimensionamiento**********/ $(window).resize(function() { if($(window).width() != lastWindowWidth || $(window).height() != lastWindowHeight) { clearTimeout(this.id); this.tiempo = tmRsize; this.id = setTimeout(doResize, this.tiempo); } }); function doResize() { lastWindowWidth = $(window).width(); lastWindowHeight = $(window).height(); $('#destino_1').html(cont++); } 

Answer 11

This is how I understand that the resize event was fired by an element or really resized a window:

If the target.nodeType event does not exist, this is most likely a window, since any other element on the page will be of type nodeType.

So here's the pseudo code (using jQuery) with added validation:

 $(window).resize(function(event){ if ( $(event.target.nodeType).length == 0 ){ // Anything here is run when the window was resized // not executed when an element triggered the resize } }); 

Answer 12

I could not fire the resize event when the item was resized (only in IE8).

However, what is target in the event object when you encounter this problem, could you do:

 $(window).resize(function(e) { if( e.target != window ) return; // your stuff here }); 

Answer 13

My patch:

 <!--[if lte IE 7]> <script type="text/javascript"> window.onresize = null; // patch to prevent infinite loop in IE6 and IE7 </script> <![endif]--> 

Answer 14

It depends on how the content is in the resize event.

I realized that the solution above is only solved when the page consists of static content, not dynamically displayed. In the dynamic case, when existing content will be repeatedly displayed by some trigger event, for example, by the function of reloading the content, we need to use $ (document) .width () or $ (document) .height () instead.

This is due to the scroll bar of the window. If the page has a scroll bar and the main content is redrawn by clicking the Refresh button, the scroll bar disappears on the event. In this case, $ (window) .width () or $ (window) .height () is changed by rendering the content, not the actual size of the window.

http://www.tech-step.net/?p=466

Answer 15

 $(window).resize(function(event) { if (typeof event.target.tagName == 'undefined') { // ... } });