2009
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();
Example
- <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>
Example
- 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);
Solution Two: setInterval();
Example
- <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>
Example
- 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);
回應 (Leave a comment)