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 of the content using overflow: hidden. Ideally I'd like to use jquery to find content which is out of the viewing scope (hidden), but I can't see any functionality to do this. $...(':visible') just applies to display: none or visibility: hidden...

The content on these pages is basic html markup (p, br, ol, ul, li, h1, h2). I've tried the route of looping these children elements and finding their offset from the top. The problem with this, is it gets extremely messy and complicated when you're trying to measure the distant of the element being looped to the top of the page when the subsequent pages have variable content height (there is a header block within each page which goes above the content).

Ideas?

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)