views:

168

answers:

3

I need cross-browser compatible Javascript code that will return me the height and width of the current document area in all three browsers (IE, Firefox, Webkit [Chrome/Safari]). I don't need the entire window size (as it is on the desktop) but the height and width of the document as it pertains to CSS layout.

Thanks

+1  A: 

How about this:

// Calc visible screen bounds (this code is common)
var w = 0, h = 0;
if (typeof(window.innerWidth) === 'number') {// не msie
 w = window.innerWidth;
 h = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
 w = document.documentElement.clientWidth;
 h = document.documentElement.clientHeight;
}
var sx = 0, sy = 0;
if (typeof window.pageYOffset === 'number') {
 sx = window.pageXOffset;
 sy = window.pageYOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
 sx = document.body.scrollLeft;
 sy = document.body.scrollTop;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
 sx = document.documentElement.scrollLeft;
 sy = document.documentElement.scrollTop;
}
var winHeight = h + sy;
var winWidth = w + sx;
Anatoliy
A: 

off the top of my head, would getting the height of the body work? with jQuery something like

$("body").css("height")

UPDATE: Assuming you are using jQuery ( why wouldn't you ;-) ) then this post answers the question by adding this to your css when using the above solution.

head { height: 100%; }
body { min-height: 100%; }

This should also work

$(window).height()

It will include the margins though, in case you're getting more height than you think you should be.

gargantaun
A: 

Actually what I needed was much easier...

function getDocumentWidth() {   
    return document.documentElement.offsetWidth;
}

function getDocumentHeight() {
    return document.documentElement.offsetHeight;
}
dotnetengineer