Obtaining browser dimensions through JavaScript

[woodsytime]

Hi there,

I'm using a piece of JS to obtain the browser width and height. I then apply these dimensions to a Flash object which resizes the background of the flash object appropriately.

However, I'm not sure I'm getting the correct dimensions as the background of the flash object doesn't seem to be resizing correctly to the browser window. Here's the website (http://www.delightfulweb.com). What should happen is that the red border is evenly displayed around the edges of the browser window...however, only the top and left hand side borders are always visible? This makes me think that the dimensions I'm getting through the JS function aren't correct.

Here's a snippet of code I'm using to obtain the dimensions...please see the website for full source code:


// send X dimension of browser to Flash
function sendX(myWidth)
{
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return (myWidth);
}

[coiner]

It's real screwy to do this with your method. I've never been able to get this to work because the way each browser treats these variables is different.

A trick to get around this confusion is to have a main div that has 100% width and height, then you base your dimensions on the size of that. Its offsetLeft will be 0, its offsetWidth will be the width of the screen, same idea for the height.

This method obviously has holes in it for more complicated tasks but for what you're doing in your example, this would work.