Tuesday, May 08, 2007

Cross browser inner width and height of html documents

I wanted to create this Javascript fly that would... well... fly on the screen. So the first thing I did is create an empty html, put a script tag in it, add some init function to the body and then write the code.
First problem: how to get maximum height and width of the page in both IE and Mozilla. I found a way, then I added a more complex html code, like a DOCTYPE. Well, amazingly (duh!) it didn't work. Finally, after trying several options, I found this code to be working in both browsers and in both doctypes (or lack of). Please report any issues with it, so I can fix it. Thank you.

function maxHeight() {
var h=0;
if (window.document.innerHeight>h)
h=window.document.innerHeight;
if (window.document.documentElement.clientHeight>h)
h=window.document.documentElement.clientHeight;
if (window.document.body.clientHeight>h)
h=window.document.body.clientHeight;
return h;
}
function maxWidth() {
var w=0;
if (window.document.innerWidth>w)
w=window.document.innerWidth;
if (window.document.documentElement.clientWidth>w)
w=window.document.documentElement.clientWidth;
if (window.document.body.clientWidth>w)
w=window.document.body.clientWidth;
return w;
}

1 comments:

Anonymous said...

thanks dude