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’).scrollHeight;
$(‘.container-height’).html( ‘The containers height is ‘ + $(‘.test-container’).outerHeight( true ) + ‘px’ );
$(‘.content-height’).html( ‘The content\’s height is ‘ + $(‘.test-content’).scrollHeight + ‘px’);
#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?