Jump to content

How Do I Get Window Width In Ie8


georgedw
 Share

Recommended Posts

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

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...