Entry
How do I get the height /width of the client area of the browser window?
How do I find the outer width/height of a window?
Feb 13th, 2006 23:53
Nick Fisher, Gustav Graf, Mike Hall, Martin Honnen, Nathan Wallace, Michael Kelly, Martin Honnen
For the client area/inner dimensions:
On IE4+ use:
document.body.clientHeight
document.body.clientWidth
for Netscape:
window.innerHeight
window.innerWidth
Note that the IE properties are properties of the
document.body
object which needs to exists for the properties to be accessible meaning
<HTML>
<HEAD>
<SCRIPT>
alert(document.body.clientWidth)
</SCRIPT>
</HEAD>
will throw an error as the BODY element is not parsed at this stage. So
use the properties either in a BODY's SCRIPT section e.g.
<HTML>
<BODY>
<SCRIPT>
alert(document.body.clientWidth)
</SCRIPT>
...
</BODY>
or in or after BODY ONLOAD e.g.
<BODY ONLOAD="alert(document.body.clientWidth);"
to ensure they are accessible.
Note that document.body.clientWidth gives you the height of the <BODY>
tag, which might not necessarily be the height of the window. Set some
CSS on the body tag to fix this:
<BODY style="height: 100%">
NN4+ also allows access to the outer dimensions of a window:
window.outerWidth
window.outerHeight
I don't know of comparable IE properties.
Here's one method to calculate the outer dimensions of the browser
window in IE. The basic steps are:
1. Save the current inner dimensions.
2. Resize the window using fixed values.
3. Subtract the new inner dimensions from those fixed values. This
difference is the amount of "chrome" horizontally and vertically.
Save these values in global variables.
4. Restore the window to its original size by adding the "chrome"
values to the saved inner dimensions.
You can then add the global "chrome" values to the current inner
dimensions at any time to find the current the outer dimensions, even
when the browser is resized by the user.
<html>
<head>
<title></title>
<script language="JavaScript">
var ieDiffWidth;
var ieDiffHeight;
function init() {
var w, h, offW, offH, diffW, diffH;
var fixedW = 800;
var fixedH = 600;
if (document.all) {
offW = document.body.offsetWidth;
offH = document.body.offsetHeight;
window.resizeTo(fixedW, fixedH);
diffW = document.body.offsetWidth - offW;
diffH = document.body.offsetHeight - offH;
w = fixedW - diffW;
h = fixedH - diffH;
ieDiffWidth = w - offW;
ieDiffHeight = h - offH;
window.resizeTo(w, h);
}
}
function outerWd() {
if (document.all)
return document.body.offsetWidth + ieDiffWidth;
else
return window.outerWidth;
}
function outerHt() {
if (document.all)
return document.body.offsetHeight + ieDiffHeight;
else
return window.outerHeight;
}
</script>
</head>
<body onload="init()">
<a href="#" onclick="alert(outerWd() + 'x' + outerHt()); return
false;">Show Outer Dimensions</a>
</body>
</html>
As noted above, you have to wait until the page has loaded to run the
init() function. Otherwise IE will generate an error.
Better use clientWidth instead of offsetWidth to get IE outer
dimensions:
offW = document.body.clientWidth;
offH = document.body.clientHeight;
window.resizeTo (fixedW, fixedH);
diffW = document.body.clientWidth - offW;
diffH = document.body.clientHeight - offH;
