We Keep Coding

Document scrollheight minus height

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

Difference of $(window).width() on normal state and responsive state on inspect element

I'm wondering why there is a difference when using $(window).width() in the browser standard and device emulation mode.
When I used $(window).width() on the browser with the width of 1024px i got the value of 1007 in standard mode, but when used it on device emulation mode i got the exact 1024.
So whats the difference between the two and is there anyway to check the specific width that is exact on the normal window mode and device emulation mode?
What i'm using now is $(window).width() for the checking of the window size so is there anyway to check the actual size beside this one?

the difference is in the scrollbar of your browser. In latest version of all browsers (http://www.textfixer.com/tutorials/browser-scrollbar-width.php) the scrollbar width is 17px and if you add it to 1007 you get exactly 1024px.
The measure is correct as it refers to the area of the browser that is "available" for rendering content - returning the browser full width would be incorrect.

Try to check position like,
function checkPosition() {
if (window.matchMedia('(min-width: 1024px)').matches) {
//...
} else {
//...
}
}
Alternatively, you can use modernizr mq method like,
if (Modernizr.mq('(min-width: 1024px)')) {
//...
} else {
//...
}

jQuery/JS, iOS 4 and $(document).height() problems

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.

Anyone know how to calculate the DOCUMENT dimensions, NOT the VIEWPORT in Javascript?

Just to make sure everyone understands what I am asking for, I will run through what I believe are the basic distinctions between document, window, and viewport....
WINDOW is the entire browser window, including all nav bars, etc....
VIEWPORT is the portion of the window used to view the current XHTML/HTML/Flash document...
DOCUMENT is the actual content area, akin to the body but includes ALL of the page's content. Only a portion of it is visible at any one time in the VIEWPORT (unless the page is the same size or smaller than the viewport).
Now, there are many great answers for how to get the VIEWPORT dimensions. I am already well versed in that... cross-browser and all.
What I really need to know is a simple, cross-browser solution that will give me the dimensions of the actual DOCUMENT in all browsers (no versions older than 3 years).
I thought I found a great solution here once... long ago... but now I cannot find it.
Anyone? Thanks for the read and hopefully someone can help.
P.S. Did I mention I DO NOT want solutions for calculating the VIEWPORT? OR THE WINDOW?
UPDATE: this solution MUST work in Opera 10.x, FireFox 3.6.x, IE 7/8/x, Flock 2.x, Safari 4.x... None of the answers below work in all browsers....
So, if you have not tested it in all, please do not respond to the question.

document.body.scrollHeight and document.body.scrollWidth.
Should give it to you.

I stole this from jQuery's source and made a wrapper around it:
EDIT: Refactored the function so it returns both width and height in an array.
function getDocumentDimensions() {
var d = document;
return [
Math.max(
d.documentElement['clientHeight'],
d.body['scrollHeight'],
d.body['offsetHeight']
),
Math.max(
d.documentElement['clientWidth'],
d.body['scrollWidth'],
d.body['offsetWidth']
)
]
};
getDocumentDimensions() // [1284, 1265]
the jQuery for this would be $(document).height() and width.

I think if you wrap your entire contents into a DIV element with zero borders, padding and margins, then when the browser is finished rendering you can use jQuery's .height() method to interrogate the wrapping DIV for its actual height.
I have done this before, and I found I had specific problems with various browsers. You may not run into those problems that I had, but I ended up settling on this solution.

Sorry, but none of these answers were what I was looking for. In the end, I decided to just stick with document.body.getWidth() and document.body.getHeight() in Prototype.

We have a similar need and use this code. It's not tested in opera/flock, but we cover all the other browsers. Note that it's not always quite perfect, but does the job in 99%+ of the cases.
function getContentWidthHeight() {
var pageWidth = 0;
var pageHeight = 0;
if (window.innerHeight && window.scrollMaxY) {
pageWidth = window.innerWidth + window.scrollMaxX;
pageHeight = window.innerHeight + window.scrollMaxY;
}
if (document.body.scrollHeight) {
pageWidth = Math.max(pageWidth, document.body.scrollWidth);
pageHeight = Math.max(pageHeight, document.body.scrollHeight);
}
if (document.body.offsetHeight) {
pageWidth = Math.max(pageWidth, document.body.offsetWidth);
pageHeight = Math.max(pageHeight, document.body.offsetHeight);
}
if (document.documentElement.offsetHeight) {
pageWidth = Math.max(pageWidth, document.documentElement.offsetWidth);
pageHeight = Math.max(pageHeight, document.documentElement.offsetHeight);
}
if (document.documentElement.scrollHeight) {
pageWidth = Math.max(pageWidth, document.documentElement.scrollWidth);
pageHeight = Math.max(pageHeight, document.documentElement.scrollHeight);
}
return [ pageWidth, pageHeight ];
};

javascript document height complications

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)
);
}