Window dimensions [Archive] - WebDeveloper.com

Kiser

01-30-2003, 07:26 AM

I need to know the dimensions of the navigator window. I use the classic technique :

if (window.innerWidth && typeof(window.innerWidth) == 'number') screenwidth = window.innerWidth;
else if (window.document.body && typeof(window.document.body.clientWidth) == 'number') screenwidth = window.document.body.clientWidth;

if (window.innerHeight && typeof(window.innerHeight) == 'number') screenheight = window.innerHeight;
else if (window.document.body && typeof(window.document.body.clientHeight) == 'number') screenheight = window.document.body.clientHeight;

But, screenHeight and screenWidth are both 0 in IE6. UNLESS, I repeat the code a second time and then I have the result I want.

Does window.document.body need to be initialized before use?? Why does it work the second time around?

NS6+ permits window.document.body.clientHeight and window.document.body.clientWidth too and I get the some results -- that is, I need to test a second time.

What's up? What am I doing wrong?

All the best, kiser

Kiser

02-06-2003, 06:26 PM

Thanks Dave, that was the ticket. In MS, the window dimensions are available right off, whereas IE doesn't know the window dims until after </body> is sent.

So, I get my window dims from a function called by the onLoad="" claus of the <body . .> tag.

In setting this up, I have found that (with NS7.01 at least) JS variables declared in <head></head> or <body></body> are not availablewithin the onload function.

For example . . .

<html><head>
<script language='JavaScript'>
foo = "bar";

function page_onload() {
screenwidth = . . .
screenheight = . . .

window.location.replace( "page.php?brz=" + screenwidth + ":" + screenheight + ":" + foo );
}
</script>

</head>
<body onload="ghklib_onload()">
</body>
</html>

I get a JS error stating that foo is undefined. Is this normal or a quirck to NS?

As a by and by, I overcame the problem by passing foo as an argument to the function. ie:

<html><head>
<script language='JavaScript'>
foo = "bar";

function page_onload(f) {
screenwidth = . . .
screenheight = . . .

window.location.replace( "page.php?brz=" + screenwidth + ":" + screenheight + ":" + f );
}

document.write("</head><body onload=\"page_onload('"+foo+"')\"></body></html>");
</script>

This 'problem' is not handicapping with the above fix, yet I am curious if others have observed the same thing.

All the best, ghk