Mozilla & IE developers seem to have simultaneously changed the implementation of their height elements to represent the Opera implementation... which I previously did not have to worry about.
var height = (document.height !== undefined) ? document.height : document.body.offsetHeight;
When performed on a blank document now returns 0 as the height of the document. My implementation requires knowing the true client viewport to dynamically build on. Chrome and Safari are still acting as they used to.
scrollHeight, and clientHeight are acting exactly the same.
To complicate matters document.height and document.body.offsetHeight are now also taking the full height of the document into account instead of only the viewable area as they used to... I tried an old table spacing method and used a 2000px x 1px transparent andthe document height is set to 2000 now.... naturally Chrome and Safari still work as expected and only give the viewable size.
I am very desperate to fix this issue.
The viewport height is not a property of the document, but of the window viewing it. You get the viewport height from window.innerHeight.
The stuff with document is only needed as a fallback for IE, which doesn't provide the window.inner dimensions. IE (technically incorrectly) makes the document.documentElement represent the viewport, so you can get the height from its clientHeight, unless you're in Quirks Mode which (more incorrectly) makes document.body represent the viewport instead. (document.height is totally non-standard; avoid it.)
So in summary, and assuming you need to support Quirks Mode (let's hope you don't):
var height= (
'innerHeight' in window? window.innerHeight :
document.compatMode!=='BackCompat'? document.documentElement.clientHeight :
document.body.clientHeight
);
I use this, that I got from James Paldosey's site:
function getDocHeight() {
//utility function to find dimensions of page
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
Related
How do I get the coordinates of the top left pixel of document body in Chrome? In firefox it's possible to get with window.mozInnerScreenY + window.window.mozInnerScreenX, but not so much in Chrome?
window.screenY is the standard property. It works everywhere.
https://developer.mozilla.org/en-US/docs/Web/API/Window/screenY
If your code runs inside an iFrame it will still return the top screenY position and not the iFrame/viewport one.
Now, to measure what you are describing below (sorry, I misunderstood you) all that needs to be done is subtract the innerHeight from the outerHeight (that's give you the size of the chrome/toolbars and so, and add the screenY (which gives you the top pixel of the Chrome app, as you said).
Wrapping up, this does the trick:
window.screenY + window.outerHeight - window.innerHeight
body top
I'd like to animate scroll to the end of the page, so I need to know the position scrollheight minus height in HTML document.
I tried to document.body.scrollHeight - screen.height, but document.body.scrollTop to that value leaves a little space at the end.
How to make it exact and cross-browser? No need to support old IE.
I played with documentElement, body and window objects and their offsetHeights, availHeights etc, but still can't get correct value. I expected it to be simple, but I just can't figure it out.
In the final formula I'd like the explanation how does it work in browsers, so please do not respond like
$(something).yourHeight() works for me.
Use window.innerHeight.
screen.height gives the height of available pixels/screen. But we need the height of viewport. So this should work:
document.body.scrollTop = document.body.scrollHeight - window.innerHeight
I want to get exact height of the body of webbrowser window. I tried innerHeight, clientHeight all other solutions which I get while googling. but none of them give exact height. I had to adjust the height by subtracting some value from the height provided by these functions?? How can get out of this problem. I think I'm missing some thing. please help.
Thanks
Some browsers report the window height incorrectly differently - particularly mobile browsers, which have a different viewport concept. I sometimes use a function to check several different values, returning whichever is the greatest. For example
function documentHeight() {
return Math.max(
window.innerHeight,
document.body.offsetHeight,
document.documentElement.clientHeight
);
}
Edit: I just looked at how jQuery does it and it does indeed use Math.max and a series of properties - however the list it checks is slightly different to those in my example above, and since I usually trust the jQuery team to be better at this stuff than I am; here is the non-jQuery jQuery solution (if that makes any sense):
function documentHeight() {
return Math.max(
document.documentElement.clientHeight,
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight
);
}
You can use Jquery to achieve this...
$(document).ready(function(){
browserWindowheight = $(window).height();
alert(browserWindowheight);
});
Have you tried using:
window.outerHeight (this is for IE9 and other modern browser's height)
For Internet Explorer with backward-compatibility mode, use
document.body.offsetHeight
And also, Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
document.documentElement.offsetHeight
Have a look at the following for more information:
http://www.javascripter.net/faq/browserw.htm
http://everyday-tech.blogspot.com.au/2009/07/js-calculate-browser-window-height.html
I've run into an odd issue with what appears to be various versions of Webkit browsers. I'm trying to position an element on the center of the screen and to do the calculations, I need to get various dimensions, specifically the height of the body and the height of the screen. In jQuery I've been using:
var bodyHeight = $('body').height();
var screenHeight = $(window).height();
My page is typically much taller than the actual viewport, so when I 'alert' those variables, bodyHeight should end up being large, while screenHeight should remain constant (height of the browser viewport).
This is true in
- Firefox
- Chrome 15 (whoa! When did Chrome get to version 15?)
- Safari on iOS5
This is NOT working in:
- Safari on iOS4
- Safari 5.0.4
On the latter two, $(window).height(); always returns the same value as $('body').height()
Thinking it was perhaps a jQuery issue, I swapped out the window height for window.outerHeight but that, too, does the same thing, making me think this is actually some sort of webkit problem.
Has anyone ran into this and know of a way around this issue?
To complicate things, I can't seem to replicate this in isolation. For instance: http://jsbin.com/omogap/3 works fine.
I've determined it's not a CSS issue, so perhaps there's other JS wreaking havoc on this particular browser I need to find.
I've been fighting with this for a very long time (because of bug of my plugin) and I've found the way how to get proper height of window in Mobile Safari.
It works correctly no matter what zoom level is without subtracting height of screen with predefined height of status bars (which might change in future). And it works with iOS6 fullscreen mode.
Some tests (on iPhone with screen size 320x480, in landscape mode):
// Returns height of the screen including all toolbars
// Requires detection of orientation. (320px for our test)
window.orientation === 0 ? screen.height : screen.width
// Returns height of the visible area
// It decreases if you zoom in
window.innerHeight
// Returns height of screen minus all toolbars
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// In fullscreen mode it always returns 320px.
// Doesn't change when zoom level is changed.
document.documentElement.clientHeight
Here is how height is detected:
var getIOSWindowHeight = function() {
// Get zoom level of mobile Safari
// Note, that such zoom detection might not work correctly in other browsers
// We use width, instead of height, because there are no vertical toolbars :)
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
// window.innerHeight returns height of the visible area.
// We multiply it by zoom and get out real height.
return window.innerHeight * zoomLevel;
};
// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight();
return tH > 1 ? tH : 0;
};
Such technique has only one con: it's not pixel perfect when page is zoomed in (because window.innerHeight always returns rounded value). It also returns incorrect value when you zoom in near top bar.
One year passed since you asked this question, but anyway hope this helps! :)
I had a similar problem. It had to do with 2 thing:
Box-sizing CSS3 property:
In the .height() jQuery documentation I found this:
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "height" ) rather than .height().
This may apply to $('body').height().
Document ready vs Window.load
$(document).ready() is run when the DOM is ready for JS but it's possible that images haven't finished loading yet. Using $(window).load() fixed my problem. Read more.
I hope this helps.
It is 2015, we are at iOS 8 now. iOS 9 is already around the corner. And the issue is still with us. Sigh.
I have implemented a cross-browser solution for the window size in jQuery.documentSize. It stays clear of any kind of browser sniffing and has been heavily unit-tested. Here's how it works:
Call $.windowHeight() for the height of the visual viewport. That is the height of the area you actually see in the viewport at the current zoom level, in CSS pixels.
Call $.windowHeight( { viewport: "layout" } ) for the height of the layout viewport. That is the height which the visible area would have at 1:1 zoom - the "original window height".
Just pick the appropriate viewport for your task, and you are done.
Behind the scenes, the calculation roughly follows the procedure outlined in the answer by #DmitrySemenov. I have written about the steps involved elsewhere on SO. Check it out if you are interested, or have a look at the source code.
Try this :
var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()
A cross browser solution is set that by jQuery
Use this property:
$(window).height()
This return a int value that represents the size of visible screen height of browser in pixels.
For FF and other non-IE browsers, window.opener.outerWidth/Height give me the info I need. For IE, I'm still at a loss, from IE6 to 8. I can't use jquery as the opener's page is beyond my control, so I can't do a window.opener.$(window). This requires the opener to have jquery 'attached' (correct me if I'm wrong).
I googled quite a bit and also searched this site, still can't find a definite neat answer.
To add:
I really need the outer size so that I can do a resizeTo(w, h) for the opened window where w and h are calculated based on a ratio of the opener's size. "resizeTo" ironically sets the outer size for IE and other browsers. I also tried a messy loads of stuff using resizeBy, not good enough.
outerWidth and outerHeight define dimensions of the browser window (including sidebar, window chrome and window [re-]sizing borders/handles). Unfortunately you cannot get these dimensions in IE - only the window viewport dimensions are available (good enough for most applications I've seen). Aka window.innerWidth/window.innerHeight.
jQuery can give you the dimensions of the current window viewport, but not other windows (eg, openers, children, etc). So you'll have to code this yourself. Here is a crude sample:
// get viewport size (without scrolling) of the given window object
function clientSize(win) {
var width, height;
if(win.innerWidth || win.innerHeight) {
width = win.innerWidth;
height = win.innerHeight;
} else {
var doc = win.document;
width = doc.documentElement.clientWidth || doc.body.clientWidth;
height = doc.documentElement.clientHeight || doc.body.clientHeight;
}
return { width:width, height:height }
}
Try it like:
var openerSize = clientSize(window.opener);
// now use openerSize.width, openerSize.height
Also note that you can't read any of these values if the given window has loaded a document from another domain (security measure).