Getting height and width of body or window of web page

Question

Hi

Depending on which mode of IE8 i'm in (quirks or standard) i get different values for the height and width. I've tried standard javascript and jquery but both return different results.

In Quirks
$('body').width = 1239
$('body').height = 184
document.body.clientWidth = 1231
document.body.clientHeight = 176

In standards
$('body').width = 1260
$('body').height = 182
document.body.clientWidth = 1254
document.body.clientHeight = 176

Any ideas how to get a value unchanged by the mode of IE8.

Thanks in adv.

Answer 1

Give window.innerHeight & window.innerWidth a shot.

Answer 2

Just a quickshot. Try to give your body #page:

function get_Page_Height() {
    pageHeight = document.getElementById('page').offsetHeight;
    pageWidth = document.getElementById('page').offsetWidth;

    alert(pageHeight);
    alert(pageWidth);
}

Answer 3

Perhaps the issue is due to the scrollbars being included in the width and height regardless of whether or not they are there. I don't have IE (on a mac) so can't verify.

However, I can tell you what does work as in my project jQuery Lightbox I have no such issue. We use the following code in it:

// Make the overlay the size of the body
var $body = $(this.ie6 ? document.body : document); // using document in ie6 causes a crash
$('#lightbox-overlay').css({
 width:  $body.width(),
 height:  $body.height()
});

// ... some code ...

// Get the window dimensions
var $window = $(window);
var wWidth  = $window.width();
var wHeight = $window.height();

And the overlay displays correctly. I would trust jQuery's result of the width and height compared to that of the native result, as jQuery should naturally be taking into account any quirks with the browser.

It is important to note that the lightbox script above tends to prefer $(document) over $(document.body) for some reason - I can't remember sorry :O - so perhaps this solves the issue as well?