Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting height and width of body or window of web page

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.

like image 291
Ash Burlaczenko Avatar asked Jul 20 '10 08:07

Ash Burlaczenko


People also ask

How do you find the width and height of a web page?

Open the page with your feed in Chrome. Right-click the image whose size you want to know and select Inspect. View your image's width and height displayed in the Chrome DevTools. (Note, the first number is always the width).

How do you find the width and height of an HTML page?

Use window. innerWidth and window. innerHeight to get the current screen size of a page.

How do you find the height of a web page?

Find the content area and click to focus on it. Back in the bottom window, click Box Model on the right. The width and height will be shown.

What is the width and height of a web page?

Which Is The Standard Webpage Size? The standard webpage size uses a maximum width of 1440 pixels for Desktops. This is because most desktop resolutions use a wider resolution nowadays (1920x1080). However, most websites are fully responsive nowadays, which means they won't use fixed dimensions.


1 Answers

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?

like image 119
balupton Avatar answered Sep 20 '22 13:09

balupton