jQuery: How to get content not visible with overflow: hidden?

Question

I\'m trying to span content across multiple pages (divs) set at a height of 950px per div, so I can properly output to pdf.

I start off with one div which nests all

Answer 1

You need to compare the position of each element to the height of the document (body):

if ($("#elementOne").position().top > $("body").height()){
    // This element is hidden
}

This example scans each element and builds an array of elements that are hidden (completely):

var h = $("body").height();
var hiddenEls = new Array();

$("#container").find("*").each(function(){
    if ($(this).position().top > h)
        hiddenEls.push($(this));
});

Please note that this is untested.

Try this example:

http://jsfiddle.net/wMPjJ/

A blue container is set to 400px in height, with the overflow hidden. In the div, there are 22 p elements, numbered from 1 - 22. Some will be hidden (they don't fit). The code on the page will tell you how many elements are hidden (for me, I get 5; p tags 17 through 22 don't show up)