OK, I am stumped. I have an HTML table that is within a fixed height, scrollable div and I need to select (using jQuery) all table rows that are visible. That is all rows that are visible on screen. This will depend on where the user is currently scrolled to within the div. So, here is the HTML:
<div style="height:300px;overflow:auto">
<table id="mytable">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<!-- 500 or so more rows here -->
</table>
</div>
Using a simple jQuery selector like below don’t work because this selects all rows in the table because they are technically visible according to jQuery. They are just not actually visible because you have to scroll to see them.
$('#mytable').find('tr').filter(':visible');
Instead, I need to see if anyone knows how to only select the rows that are visible within the scrollable div. That is only the rows that the user can actually see at any given point in time. If they scroll down and the selector is run again, it should return a different set of rows, those that are actually visible.
Hope I explained my question correctly. Let me know if I need to elaborate.
There is an extension to jquery with viewport selectors that appear to do what you are asking for. The URL to the lib is:
http://www.appelsiini.net/projects/viewport