Steve
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.
@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.
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.
@RStankov: while theoretically that sounds like a great idea, Object.watch only works in Mozilla/Firefox.
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.
@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).
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...
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.
@steve - Maybe it fires three events because of width, height, and zoom...
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
... ... ...
}
};
I was on a project a while back where this cropped up, I never found the solution. I'll know for next time, thanks!