Jul 16
There is a bug in IE (version 6 and 7) in which the clarity between window.onresize and body.onresize is muddied. This can cause quite a problem for developers and even render the client’s browser unresponsive (throttling the CPU to near 100%) if you’re not very careful. IE fires the onresize multiple times while Firefox only fires it once after the browser has completed resizing.
Prevent IE from Firing onResize Multiple Times
- Solution One: setTimeout()
var elements = {"wrapper": null, "topHeader": null, "bottomFooter": null, "leftSide": null, "rightSide": null, "content": null};
var properties = ["clientWidth", "clientHeight", "offsetWidth", "offsetHeight"];
var resizeTimeout = null;
var onloadHandler = function() {
for (var name in elements)
elements[name] = document.getElementById(name);
onresizeHandler();
};
var onresizeHandler = function() {
if (resizeTimeout) clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(){
var height = GEOMETRY.getViewportHeight() - elements.topHeader.offsetHeight - elements.bottomFooter.offsetHeight;
height -= parseInt(CSS.get(elements.topHeader, "margin-top"), 10) - parseInt(CSS.get(elements.topHeader, "margin-bottom"), 10) - parseInt(CSS.get(elements.bottomFooter, "margin-top"), 10) - parseInt(CSS.get(elements.bottomFooter, "margin-bottom"), 10);
CSS.set(elements.leftSide, {"height": height});
CSS.set(elements.rightSide, {"height": height});
CSS.set(elements.content, {"height": height});
}, 400);
};
GENERIC.addEvent(window, "load", onloadHandler);
GENERIC.addEvent(window, "resize", onresizeHandler);
<div id="wrapper" class="wrapper">
<div id="topHeader" class="top-header">Header</div>
<div id="leftSide" class="side-bar align-left">Side Bar</div>
<div id="rightSide" class="side-bar align-right">Side Bar</div>
<div id="content" class="content">Content</div>
<div id="bottomFooter" class="bottom-footer">Footer</div>
</div>
var elements = {"wrapper": null, "topHeader": null, "bottomFooter": null, "leftSide": null, "rightSide": null, "content": null};
var properties = ["clientWidth", "clientHeight", "offsetWidth", "offsetHeight"];
var initHeight = 0;
var resizeInterval = null;
var onloadHandler = function() {
for (var name in elements)
elements[name] = document.getElementById(name);
if (resizeInterval) clearInterval(resizeInterval);
resizeInterval = setInterval(function(){
onresizeHandler();
}, 100);
};
var onresizeHandler = function() {
var height = GEOMETRY.getViewportHeight() - elements.topHeader.offsetHeight - elements.bottomFooter.offsetHeight;
height -= parseInt(CSS.get(elements.topHeader, "margin-top"), 10) - parseInt(CSS.get(elements.topHeader, "margin-bottom"), 10) - parseInt(CSS.get(elements.bottomFooter, "margin-top"), 10) - parseInt(CSS.get(elements.bottomFooter, "margin-bottom"), 10);
if (initHeight != height)
CSS.set(elements.leftSide, {"height": height});
CSS.set(elements.rightSide, {"height": height});
CSS.set(elements.content, {"height": height});
initHeight = height;
}
};
GENERIC.addEvent(window, "load", onloadHandler);
<div id="wrapper" class="wrapper">
<div id="topHeader" class="top-header">Header</div>
<div id="leftSide" class="side-bar align-left">Side Bar</div>
<div id="rightSide" class="side-bar align-right">Side Bar</div>
<div id="content" class="content">Content</div>
<div id="bottomFooter" class="bottom-footer">Footer</div>
</div>
Related Posts
Leave a Reply
You must be logged in to post a comment.
