Get actual content height with Javascript (or jQuery) - javascript

There are many ways of getting the height of a document, but due to different browser implementations most of them (I believe) return the highest of a number of values ... which is fine most of the time.
In my case I have a number of elements on the page that I know to be a smaller height than the window and viewport heights. What I'm trying to get is the actual height of all the rendered elements.
Things that don't work (with testing in Firefox):
$(document).height(); // gives the window height
document.body.scrollHeight; // gives 7, its always 7 I don't know why
document.body.offsetHeight; // also gives 7
document.documentElement.clientHeight; // sometimes gives window height
document.documentElement.scrollHeight; //gives window height
document.documentElement.offsetHeight; generally gives a value in the range of 23
At present I'm thinking that the way around this might be to insert a div with height: 0 at the bottom of my page and grab $(div).offset().top, but I feel that this is highly likely to go wrong at some point in the future.
So before I do that ...
Is there a way of knowing the content height when it's less than the window height?
EDIT:
People have asked for clarification. Heres a jsFiddle example of what I want / the results I'm getting.
https://jsfiddle.net/8Lu2zcw8/1/
Running that results in the same value for Win Height: and Doc Height being written out to the console.
EDIT2:
My issue was due to the body not wrapping the content correctly due to floated and absolutely positioned elements, as pointed out by #tim-vermaelen in the comments to his solution.

I suggest you use $(document.body).height().
In CSS you have to put:
html,
body { height: 100%; }
This will only give correct results in case of body padding, margin and borders of the body element are 0. When direct children are floating or put on position absolute, the height of these elements doesn't count. Hence for floating elements you always clearfix the parent to solve these wrapping issues.
If not you can use $(document.body).outerHeight(includeMargin)

$(document).height() will give you content size, not window's. If it gives you window's size, then you probably messed up your CSS. Also, you can try $('body').height()

Related

scrollHeight is more than clientHeight, even without scrolling content

I have a piece of JS code that determines whether there is a vertical scrollbar and applies a CSS class to an element. Nothing big.
What is confusing me is it appears to be doing the opposite of what I understand it should be doing. This isn't a problem unless it is a bug and is fixed in the future.
The code:
if (document.body.scrollHeight > document.body.clientHeight) {
var d = document.getElementById("footer").className = "footernoscroll";
}
My understanding is that it will apply the class if there is a vertical scroll bar, but it appears to be applying the class if there isn't a scroll bar. Am I interpreting this correctly and the code is acting strangely or is my interpretation wrong?
EDIT: Thought I should add, if I reverse the operator the effects will be reversed and it will use the else part of the statement instead.
Make sure that your body is 100% of the window height. If you don't have this then the clientHeight value will be the combined height of the items within body and not the full window height, whereas scrollHeight will be the full height of the window.
Here's a fiddle that shows it working (open dev tools and view console): http://jsfiddle.net/alexcoady/c53d7q27/1/
html, body {
height: 100%;
padding: 0;
margin: 0;
}
clientHeight documentation
scrollHeight documentation
The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar.
Taken from here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
So it means the values are the same if there is no scrollbar, and scrollHeight is greater when there is one.

get height of document content including scroll bars javascript

Here is the key question: How do you get the accurate offset top of an element (in this case text boxes) when scroll bars are present? Preferably all in javascript.
I have a page which will overflow the height of the browser window, which means there will be scroll bars. I have textboxes throughout the page with onblur events linked. Onblur the it will validate the value of the textobx. If the data is not valid. If not then it will/should move a speech bubble right on top of the textbox with an error message. element.offsettop doesn't seem to take into account any scroll bars which may be present on the page.
thank you! Please let me know if you don't understand what I'm asking.
Edit:
Can someone help me to find the height of the DOCUMENT CONTENT. Not the window height but the document content height so it will also include the height with scroll bars? Thanks!
Document sizes are a browser compatibility nightmare because, although all browsers expose clientHeight and scrollHeight properties, they don't all agree how the values are calculated.
There used to be a complex best-practice formula around for how you tested for correct height/width. This involved using document.documentElement properties if available or falling back on document properties and so on.
The simplest way to get correct height is to get all height values found on document, or documentElement, and use the highest one. This is basically what jQuery does:
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );

Simple, cross-browser way to get the WHOLE page width in JavaScript, not just the viewport width?

I've seen lots of posts that talk about the getting width of the browser viewport, but what I want to find is essentially the width of the browser viewport if it were just wide enough to avoid a horizontal scrollbar.
I'm using the Prototype JS framework and have looked at various options using that and using pure JavaScript. For example:
$(document.body).getWidth() and document.body.clientWidth return the viewport width excluding margins.
document.documentElement.clientWidth and window.innerWidth return the viewport width including margins.
I've tried to be sneaky too: I absolutely-positioned a known-width DIV against the right-hand edge of the page (i.e. CSS right:0) with the intention of getting its left-edge position, but that actually gets aligned with the right-edge of the viewport.
The only thing I've found that works is to use JavaScript to scroll right until it won't scroll anymore (simply using scrollBy(1000000, 0) will usually be enough, but a while loop would obviously be more reliable), then get the horizontal scroll offset and add that to the viewport width. But I don't want to scroll the window: I want to inspect it somehow!
Any suggestions appreciated, even jQuery ones as at least then I can see how jQuery does it.
Here's a simple example showing that document.body.scrollWidth doesn't work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body onload="document.getElementById('sw').innerHTML = document.body.scrollWidth">
<p><code>document.body.scrollWidth</code> = <span id="sw"></span></p>
<div style="position:absolute;left:0;bottom:0;width:1980px;background-color:#ccc;padding:10px;">This DIV is 2000px wide including padding.</div>
</body>
</html>
The output of this should show that the width is 2000px, since that's the width of the widest part of the page. It doesn't.
what about
window.screen.width;
document.body.style.width = (window.screen.width - 15) + 'px';
window.screen.width - 15 is enough to avoid horizontal scroll-bar. 15 is vertical scrollbar width.
for width:
document.body.scrollWidth
for height:
document.body.scrollHeight
EDIT: for IE you'll have to specify position:relative for the body tag
Browsers don't treat html and body like ordinary elements. In particular many browsers are really buggy with respect to how they treat scrollWidth etc. on the body element.
The only real solution is to wrap all your content in one huge div for the entire page and use that. Because the div is an ordinary element it isn't affected by the bugs that cause the weird behaviour for body and html.

document and window height return the same value?

For some reason both document height and window height return the same value, so when subtracting window from document height it returns 0. Anyone know why this might be happening?
console.log($(window).height());
console.log($(document).height());
The above both return the document height
You might have forgotten the doctype <!DOCTYPE html> at the beginning of the page.
That's because your document fills the viewport (the zone accessible for displaying the document).
From the documentation :
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
If you document is long enough to take more than one page, the second value may be greater than the first (at least if the document is inside an iframe, look at this demo). There can be other cases generating differences but I have none in mind now.
I had a similar issues that I was able to fix.
I found that
$(window).height();
Was returning the entire height of the page in FF.
Eventually I realized that I was outputting a debug phrase 'test' before any of the html of the page. IE before the Doc type.
Once this 'test' text was removed the view port height was return as expected.

When I have width: auto and specific left and right, why does setting min-width to the value of calculated width expand the element by 2px?

I have a page made of elements with width and height set to auto and their dimensions defined with left, right, top and bottom properties. When the page is loaded, all widths and heights are set to their calculated values by the browser, as they should be. However, when I set min-width of the elements to their respective calculated widths, each of those elements is expanded by 2px. The same happens if I set their min-height to be equal to the calculated height. I do it with jQuery, like this
element.css('min-width', element.css('width'));
or
element.css('min-width', element.width());
The effect is exactly the same as it should be, but there should not be the extra 2px if I understand what's happening correctly. Using
element.css('min-width', element.width() - 2);
completely solves the problem but I don't like not understanding why there are the extra 2px. According to specifications, neither width nor min-width nor max-width should include padding, borders or margins.
I've tested in Chrome and FF and both behave the same way.
What browser are you testing and can it be that your document is in quirksmode?
element.css('min-width', element.width()); shouldn't be doing anything in standards mode, because element.width() returns an integer without a CSS unit, and min-width requires a unit in standardsmode.
So put your document in standards mode and then try:
element.css('min-width', element.width() + "px");
If that doesn't help you'll need to show a working example.

Categories