georgedw Posted April 27, 2009 Share Posted April 27, 2009 I have a main div that I want to keep a fixed width 1000px. If the available window width is larger then that I would like to display a div on each side of the main that will fill the space. I've been using the following code which works adequately with Opera, Firefox, Safari, and IE7 and then came IE8 now the code fires every time any portion of the screen is resized and just ends up in a loop. I realize that I can force IE8 into IE7 mode, but would really prefer to find out how to do this so that it works with IE8.Thanksfunction getWidth() { var screenWidth =0; var divWidth = 0; var divWidthTxt = "0"; var myMainWidth = 1000; if (window.innerWidth) { screenWidth=window.innerWidth; } else if (document.documentElement && document.documentElement.clientWidth) { screenWidth=document.documentElement.clientWidth; } else if (document.body) { screenWidth=document.body.clientWidth; } document.getElementById('main').style.width = (screenWidth) + "px"; //main contains all divs if ((screenWidth-myMainWidth) > 0) { divWidth = Math.floor((screenWidth-myMainWidth)/2); //determines the width of the two sper divs divWidthTxt = (divWidth + "px"); document.getElementById('spacer').style.width = (divWidthTxt); document.getElementById('content').style.left = ((screenWidth-myMainWidth)/2) + "px"; //determines the offset for the content div document.getElementById('spacerr').style.left = (divWidth + myMainWidth ) + "px"; //determines the offset for the right spacer div document.getElementById('spacerr').style.width = (divWidthTxt); document.getElementById('main').style.width = (screenWidth) + "px"; } }// end getWidth Link to comment Share on other sites More sharing options...
Ingolme Posted April 28, 2009 Share Posted April 28, 2009 I cannot recreate the problem you describe. Do any of the elements of your page have an "onresize" event? Link to comment Share on other sites More sharing options...
georgedw Posted April 28, 2009 Author Share Posted April 28, 2009 I cannot recreate the problem you describe. Do any of the elements of your page have an "onresize" event?It's good to recognize a problem, it's better to know where it is. I'm using this onresize code.window.onresize = function() { window.location.href = window.location.href; }What would be best would be to know how to fix it.Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted April 28, 2009 Share Posted April 28, 2009 Simple logic:You're reloading the page each time you resize the window -> The function runs each time the page loads. -> As a consequence, the function runs each time you resize the window.I would remove that whole function from the page. Why are you reloading the page when it is resized? Link to comment Share on other sites More sharing options...
georgedw Posted April 28, 2009 Author Share Posted April 28, 2009 Simple logic:You're reloading the page each time you resize the window -> The function runs each time the page loads. -> As a consequence, the function runs each time you resize the window.I would remove that whole function from the page. Why are you reloading the page when it is resized?If the browser is not opened Maximized, the width will change when it is maximized and the divs will not align properly. I've changed my onresize code to.window.onresize = function() { getWidth(); }and this seems to work. If you see any problems with this please let me know.Thanks for the help. Link to comment Share on other sites More sharing options...
Ingolme Posted April 28, 2009 Share Posted April 28, 2009 There's a more efficient way to do that: window.onresize = getWidth; Don't put any parenthesis at the end. Link to comment Share on other sites More sharing options...
georgedw Posted April 28, 2009 Author Share Posted April 28, 2009 There's a more efficient way to do that:window.onresize = getWidth; Don't put any parenthesis at the end. OK now a new problem. What I wanted to achieve was to have the code run if the browser was not opened full size and was then maximized it would recheck width. That works, BUT in IE7 and 8 after the window is maximized and the reduced to a "Restore Down" the resize event either does not fire, or the width it is getting is the pre-resize width.Below is the test page I'm using<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Untitled 1</title><script type="text/ecmascript" language="javascript"> window.onresize = getWidth;var screenWidth = 0;function getWidth() { var screenWidth =0; var divWidth = 0; var divWidthTxt = "0"; var myMainWidth = 1000; if (window.innerWidth) { screenWidth=window.innerWidth; } else if (document.documentElement && document.documentElement.clientWidth) { screenWidth=document.documentElement.clientWidth; } else if (document.body) { screenWidth=document.body.clientWidth; } if ((screenWidth-myMainWidth) > 0) { divWidth = Math.floor((screenWidth-myMainWidth)/2); divWidthTxt = (divWidth + "px"); document.getElementById('spacer').style.width = (divWidthTxt); document.getElementById('content').style.left = ((screenWidth-myMainWidth)/2) + "px"; document.getElementById('spacerr').style.left = (divWidth + myMainWidth ) + "px"; document.getElementById('spacerr').style.width = (divWidthTxt); } }// end getWidth</script> </head><body onload="getWidth()" style="background-color:maroon"> <div id="spacer" style="position:absolute;top:0px;height:1000px;width:0px;background-color:gray"> </div> <div id="content" style="position:absolute;top:0px;height:100px;width:1000px;background-color:navy"> </div> <div id="spacerr" style="position:absolute;top:0px;height:100px;width:0px;background-color:black"> </div></body></html> Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted April 28, 2009 Share Posted April 28, 2009 Hmm, you could make it wait a few milliseconds and then call the function. window.onresize = function() { setTimeout(getWidth,50); } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.