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
  1. <div id="wrapper" class="wrapper">
  2. <div id="topHeader" class="top-header">Header</div>
  3. <div id="leftSide" class="side-bar align-left">Side Bar</div>
  4. <div id="rightSide" class="side-bar align-right">Side Bar</div>
  5. <div id="content" class="content">Content</div>
  6. <div id="bottomFooter" class="bottom-footer">Footer</div>
  7. </div>
Example
  1. var elements = {"wrapper": null, "topHeader": null, "bottomFooter": null, "leftSide": null, "rightSide": null, "content": null};
  2. var properties = ["clientWidth", "clientHeight", "offsetWidth", "offsetHeight"];
  3. var resizeTimeout = null;
  4.  
  5. var onloadHandler = function() {
  6. for (var name in elements)
  7. elements[name] = document.getElementById(name);
  8. onresizeHandler();
  9. };
  10.  
  11. var onresizeHandler = function() {
  12. if (resizeTimeout) clearTimeout(resizeTimeout);
  13. resizeTimeout = setTimeout(function(){
  14. var height = GEOMETRY.getViewportHeight() - elements.topHeader.offsetHeight - elements.bottomFooter.offsetHeight;
  15. 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);
  16. CSS.set(elements.leftSide, {"height": height});
  17. CSS.set(elements.rightSide, {"height": height});
  18. CSS.set(elements.content, {"height": height});
  19. }, 400);
  20. };
  21.  
  22. GENERIC.addEvent(window, "load", onloadHandler);
  23. GENERIC.addEvent(window, "resize", onresizeHandler);

View Demo

Solution Two: setInterval();

Example
  1. <div id="wrapper" class="wrapper">
  2. <div id="topHeader" class="top-header">Header</div>
  3. <div id="leftSide" class="side-bar align-left">Side Bar</div>
  4. <div id="rightSide" class="side-bar align-right">Side Bar</div>
  5. <div id="content" class="content">Content</div>
  6. <div id="bottomFooter" class="bottom-footer">Footer</div>
  7. </div>
Example
  1. var elements = {"wrapper": null, "topHeader": null, "bottomFooter": null, "leftSide": null, "rightSide": null, "content": null};
  2. var properties = ["clientWidth", "clientHeight", "offsetWidth", "offsetHeight"];
  3. var initHeight = 0;
  4. var resizeInterval = null;
  5.  
  6. var onloadHandler = function() {
  7. for (var name in elements)
  8. elements[name] = document.getElementById(name);
  9. if (resizeInterval) clearInterval(resizeInterval);
  10. resizeInterval = setInterval(function(){
  11. onresizeHandler();
  12. }, 100);
  13. };
  14.  
  15. var onresizeHandler = function() {
  16. var height = GEOMETRY.getViewportHeight() - elements.topHeader.offsetHeight - elements.bottomFooter.offsetHeight;
  17. 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);
  18. if (initHeight != height)
  19. CSS.set(elements.leftSide, {"height": height});
  20. CSS.set(elements.rightSide, {"height": height});
  21. CSS.set(elements.content, {"height": height});
  22. initHeight = height;
  23. }
  24. };
  25.  
  26. GENERIC.addEvent(window, "load", onloadHandler);

View Demo

Related Posts


回應 (Leave a comment)