Finding the full height of a partially-hidden element

Recently I created a widget that contained a potential LARGE amount of content within it, but wanted to create a solution to have all that data accessible without being unreasonably long. My solution was to create a widget that had up/down controls, and scrolled the content inside of the widget.

The issue I ran into along the way was for a way to find the height of the entire content, not just the visible content. I ended up finding the answer after many many pages of search results:

var visible_height = $('#item').outerHeight( true );
var total_height = $('#item')[0].scrollHeight;

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed est in nisi suscipit aliquet. Quisque leo erat, ultricies in suscipit non, iaculis eget est. Praesent in auctor ipsum. Pellentesque faucibus velit sed nulla pretium iaculis eleifend ante rutrum. Vivamus sapien tellus, mattis eu luctus ac, rutrum a nunc. Quisque luctus, urna id dictum ullamcorper, eros ipsum iaculis lorem, ut pellentesque nunc erat dignissim nunc. Suspendisse venenatis est id nulla pellentesque fringilla.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer convallis dictum venenatis. Morbi varius, diam sed egestas tempor, tortor tortor varius massa, quis faucibus leo quam quis nibh. In hac habitasse platea dictumst. Nulla id pharetra diam. Mauris luctus dapibus varius. Mauris tincidunt libero at elit auctor laoreet. Nullam tempus nulla nisi. Sed venenatis, arcu id tempus placerat, nunc mauris pretium lacus, ut porta risus magna non orci. Nullam sagittis enim arcu. Nullam id ipsum id magna laoreet viverra.

Sed et porttitor libero. Morbi diam leo, congue in porttitor cursus, elementum eu nisl. Integer eget tellus velit. Phasellus molestie, sapien et tristique eleifend, massa justo accumsan turpis, vel pretium quam risus at nisl. Vivamus sit amet neque et ante pretium tempor ut nec risus. Quisque volutpat laoreet dui. Etiam aliquet suscipit posuere. Integer sed ultrices sapien.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer convallis dictum venenatis. Morbi varius, diam sed egestas tempor, tortor tortor varius massa, quis faucibus leo quam quis nibh. In hac habitasse platea dictumst. Nulla id pharetra diam. Mauris luctus dapibus varius. Mauris tincidunt libero at elit auctor laoreet. Nullam tempus nulla nisi. Sed venenatis, arcu id tempus placerat, nunc mauris pretium lacus, ut porta risus magna non orci. Nullam sagittis enim arcu. Nullam id ipsum id magna laoreet viverra.

Sed et porttitor libero. Morbi diam leo, congue in porttitor cursus, elementum eu nisl. Integer eget tellus velit. Phasellus molestie, sapien et tristique eleifend, massa justo accumsan turpis, vel pretium quam risus at nisl. Vivamus sit amet neque et ante pretium tempor ut nec risus. Quisque volutpat laoreet dui. Etiam aliquet suscipit posuere. Integer sed ultrices sapien.

The Code

$('.container-height').html( 'The containers height is ' + $('.test-container').outerHeight( true ) + 'px' );
$('.content-height').html( 'The content\'s height is ' + $('.test-content')[0].scrollHeight + 'px');

Because .scrollHeight is a JavaScript function, and not a jQuery function, you need to specify the index [0] even if their is only one #item. The reason is that the $() selector can contain multiple objects within it (such as $('li') would affect all list items on the page), so you must index them. Strange eh?

Leave a Reply

Your email address will not be published. Required fields are marked *