IE Fires Onresize When Body Resizes

When a user resizes the browser window, I wanted to resize some elements on the page. So, I attached an onresize event handler to the window. I noticed it rather peculiar when Internet Explorer 6 kept locking up on me.

Turns out, IE6 fires the event even when the document body changes in size. Here's a quick example to demonstrate:

<script type="text/javascript">
var currheight = '';
window.onresize = function(){
		alert('resized');	
}

function expand()
{
	var el = document.getElementById('test');
	var div = document.createElement('div');
	div.innerHTML = "a";
	el.appendChild(div);
}
</script>

<input type="button" onclick="expand()" value="Expand">	
<div id="test"></div>

Every time you hit the expand button, it fires the event. Ick. So, here is my IE6 fix:

var currheight;
window.onresize = function(){
	if(currheight != document.documentElement.clientHeight)
	{
		alert('resized');	
	}
	currheight = document.documentElement.clientHeight;
}

I just perform a check to determine the height of the viewport and if it changes, do the resize.

Update: Looks like I didn't test properly in IE7. It, too, suffers the same problem, firing the resize event when the body changes.

Published June 15, 2007
Categorized as JavaScript
Short URL: http://snook.ca/s/819

Conversation

12 Comments · RSS feed
1
steve said on June 15, 2007

yeah, found this one out myself... in an even more annoying way...

Double click the title bar... this maximizes/restores the window size...

which in IE7, fires 2 events, and in IE6, fires 3 events!!!!!

I can accept 2 events... (1 for horizontal, and 1 for vertical)... even though that would still be goofy, but 3 events?

When I last tested this, the size reported back by IE6, was the same for all 3 events... which caused weird issues... I'll try your code though, to see if I can filter out some of the extra events.

Cheers,
Steve

2
Matt Turner said on June 15, 2007

I was on a project a while back where this cropped up, I never found the solution. I'll know for next time, thanks!

3
Daniel Lemire said on June 15, 2007

If I'm not mistaken, this happens with IE7 also. I've been playing around with mootools animation and I came across the very same problem. I didn't realize it was a syptom of the body size changing, but after reading this it makes perfect sense. I have been fighting with this problem for about a week (only about an hours time, because it's my own site and I can only handle so much frustration on my own behalf).

Your timing is pretty good for me on this. Thanks.

4
Jonathan Snook said on June 15, 2007

@Daniel: so it does. I was pretty sure I tested this in IE7 but I apparently didn't test well enough. Indeed, IE7 suffers the same problem. The solution described above will work in IE7 as well.

5
RStankov said on June 16, 2007

yesterday I read about object.watch ( http://devguru.com/technologies/javascript/10770.asp )

may be you could watch document.documentElement.clientHeight ( or clientWidth). I haven't see any where to use watch, but I don't know the reason.

6
Jonathan Snook said on June 16, 2007

@RStankov: while theoretically that sounds like a great idea, Object.watch only works in Mozilla/Firefox.

7
Charlie said on June 16, 2007

You should read this:
http://ecmascript.stchur.com/2006/08/20/beating-the-ie-resize-bug/#more-23

I was driven insane by this problem when working with a resolution dependent layout. IE was flickering and running really slow everytime I toggled a container that would span over the fold as it fired IE into action due to the body resize.

8
Adam J. McIntyre said on June 18, 2007

@Charlie - Nice find.

I've also found that JavaScript expressions wrapped in a conditional comment can also work. (With the caveat that they're not that extra pretty and they have a little "bounce" after the resize occurs.)

A quick Google search turned up this example, which kind of illustrates the point:
http://blog.richnetapps.com/index.php?p=49&more=1&c=1&tb=1&pb=1

It's much more roundabout than simply pinging an element's width attribute, though. (But it still remains a nice standby for emulating min-width/max-width in IE6 and below).

9
Jim said on October 04, 2007

What happens if you want Firefox to emulate IE? Not often this happens granted, but I was looking to resize an image to 100/100% of the body - using JS to keep the image ratio, so it doesnt start to look odd.

If you do this in Firefox you get a resize event after you have resized rather than during as in IE. resize v resized...Otherwise I'm just going to scale the image to the greatest extent that the browser can be in order to overcome the problem...

10
John McKerrell said on November 01, 2007

Thought I'd mention, I was having a similar problem and made my own test page. On my test page though I wasn't seeing the resize event being called for document body changes. Then I compared my test page and my problem page and it turns out this doesn't happen if you have a strict DTD. If you have a transitional DTD though it doesn't occur. The strict DTD page also had the XML declaration so it might be related to that.

11
Zack Katz said on October 08, 2008

@steve - Maybe it fires three events because of width, height, and zoom...

12
xyz said on January 31, 2011

I had similar problem. I was adjusting the buttons width during onload, but that triggers on resize event in IE. My fix was:

/**
* onload handler
*/
handleOnLoad = function(evt)
{
	var docResizeHandler = null;
	if (myVars.browser.name == "MSIE")
	{
		docResizeHandler = (document.body.onresize) ? document.body.onresize : null;
		document.body.onresize = null;
	}

	// Fix buttons width code
	... ... ...

	if (myVars.browser.name == "MSIE")
	{
		document.body.onresize = docResizeHandler;
	}
}

/**
* onresize handler
*/
handleResize = function(evt)
{
	var ieEvt = window.event;

	if (myVars.browser.name != "MSIE" || ieEvt.type == "resize")
	{
		// Handle resizing
		... ... ...
	}
};
Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.