Getting height and width of body or window of web page - javascript

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.


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?


Just a quickshot. Try to give your body #page:
function getPageHeight() {
var pageHeight = document.getElementById('page').offsetHeight;
var pageWidth = document.getElementById('page').offsetWidth;
alert(pageHeight);
alert(pageWidth);
}


Try this:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
var width = viewport.width;
var height = viewport.height;

Related

crazy values for window.outerWidth

window.outerHeight / window.outerWidth
are this values not in pixels ?
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_inner_outer
(screen is 2560)
firefox outerWidth: 2576
edge outerWidth: 3435
chrome outerWidth: 2560
IE outerWidth: 2862
what are this values ?
how can i get the screen size in pixels ?

//if you need the screen width and height
//Screen height
var height = screen.height
//Screen Width
var width = screen.width
//if you want to know what the code you use do:
Get the window's height and width: (including toolbars/scrollbars):
var w = window.outerWidth;
var h = window.outerHeight;
source:http://www.w3schools.com/jsref/prop_win_outerheight.asp
Get the window's height and width: (NOT including toolbars/scrollbars):
var w = window.innerWidth;
var h = window.innerHeight;
source: http://www.w3schools.com/jsref/prop_win_innerheight.asp

Did you set your doctype at the top of your HTML, I remember this was giving me an issue awhile back. Try putting
<!DOCTYPE html>
before your opening tag

Grrrmppf
i not realy use IE or edge and chrome behaves different eg ZOOM is on a domain level in opposite to ie and edge where it is on a global level
problem was i had pagee zoom on

In YUI, what is the difference between clientHeight, winHeight, and docHeight?

In a code snippet, I saw lines like this:
var headerHeight = Y.one('#header').get('clientHeight');
var $body = Y.one('body');
this.viewportH = $body.get('winHeight');
this.docHeight = $body.get('docHeight');
As I understand, clientHeight is the same as winHeight, while scrollHeight is the same as docHeight. Is it true? If so, why does YUI gives them different names?
Does anyone have ideas about this? Thanks!

winHeight Returns the inner height of the viewport - exludes scrollbar. it's your browser size (if you resize the browser there will be different values)
docHeight Returns the current height of the document, it's not what appears on screen, but all the page size.
Take a look here and click where is requiring:
http://www.wfimc.org/public/js/yui/3.0.0/examples/node/node-screen_clean.html
clientHeight Return the size of your frame exclude scroolbar:
Take a look on this event: document.getElementById("client").onclick = function(){whatis('client');}
at:
http://jsfiddle.net/shibualexis/yVhgM/3/

Javascript bug with .height() in chrome

I have the following code (coffeescript) that is setting the height of one of my divs dynamically for the content. It works perfectly for Firefox and Safari. I am having problems with chrome. Ive been doing a lot of reading and they say chrome has a bug in the sense that it measures heights from the .height() function differently then other browsers. Is there anyway to fix this or any work arounds anyone has found?
resize = ->
window_height = $(window).height()
$('.full-height').each ->
elm = $(this)
wrapper_height = elm.height()
difference_height = window_height - wrapper_height
new_height = wrapper_height + difference_height
content_height = $('#wrapper').height()
offset = elm.data('offset-height') || 0
if(window_height >= content_height)
elm.css
height: new_height

Javascript not working on IE8

In my web page I've the following javascript function that is called onLoad in the body:
function changeDivWidth()
{
d = document.getElementById('background');
document.getElementById("backgroundImg").style.height = window.innerHeight+"px";
imgWidth = document.getElementById("backgroundImg").width;
marginLeft = ($(window).width() - imgWidth)/2;
d.style.width = imgWidth+"px";
d.style.left = marginLeft+"px";
document.getElementById("backgroundImg").style.visibility="visible";
document.getElementById("menu").style.visibility="visible";
}
This script basically takes the height of the browser page and set it as height of an Element.
This is working pretty fine in all browser except in IE7 and IE8, where the script is not loaded.
Can you suggest me a solution?
Thanks

window.innerHeight doesn't work in IE8 and below. Try out document.body.clientHeight
Edit: Wait a minute... are you using jQuery on line 6?:
marginLeft = ($(window).width() - imgWidth)/2;
If you are, then use $(window).height() to get the height instead.

How to get document height and width without using jquery

How to get document height and width in pure javascript i.e without using jquery.
I know about $(document).height() and $(document).width(), but I want to do this in javascript.
I meant page's height and width.

var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check: this article for better explanation.

Even the last example given on http://www.howtocreate.co.uk/tutorials/javascript/browserwindow is not working on Quirks mode. Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):
Math.max(
document.documentElement["clientWidth"],
document.body["scrollWidth"],
document.documentElement["scrollWidth"],
document.body["offsetWidth"],
document.documentElement["offsetWidth"]
);
just replace Width for "Height" to get Height.

This is a cross-browser solution:
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

You should use getBoundingClientRect as it usually works cross browser and gives you sub-pixel precision on the bounds rectangle.
elem.getBoundingClientRect()

Get document size without jQuery
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size
screen.width
screen.height

You can try also:
document.body.offsetHeight
document.body.offsetWidth

This should work for all browsers/devices:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}

If you want to get the full width of the page, including overflow, use document.body.scrollWidth.

window is the whole browser's application window. document is the webpage shown that is actually loaded.
window.innerWidth and window.innerHeight will take scrollbars into account which may not be what you want.
document.documentElement is the full webpage without the top scrollbar. document.documentElement.clientWidth returns document width size without y scrollbar.
document.documentElement.clientHeight returns document height size without x scrollbar.

How to find out the document width and height very easily?
in HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>
in javascript
var c=document.querySelector('#hidden_placer');
var r=c.getBoundingClientRect();
r.right=document width
r.bottom=document height`
You may update this on every window resize event, if needed.

Categories

Resources