Search code examples
jquerycountvisible

Count List Items shown on screen and not overflow


How can I count all the list items that are displayed on the screen when overflow is set to hidden?

Using the code below still counts all the items, even the ones that overflow.

   var count = $("#myList ul li:visible").length;

Fiddle:

http://jsfiddle.net/kPAwX/2/


Solution

  • var maxh = $("#myList ul").height();
    $("#myList ul li").filter(function () {
        return $(this).position().top + $(this).height() < maxh;
    });
    

    This will select all of the lis that are completely visible. If an li is partially cut off, it will be filtered.

    If you want even partially visible lis to not be filtered, simply remove the addition of the height (or create your own cut off any way you want).

    http://jsfiddle.net/ExplosionPIlls/z6GXA/