Check for an element in a div

Question

I have a div with lots of li inside.

<div> <li></li> <li></li> <li></li> <li></li> <li></li> ... </div> 

Usually, when the user scrolls inside the window, some <li> will overflow and will be hidden. I know that I can check if an element is in the screen view using this jQuery plugin: http://www.appelsiini.net/projects/viewport I just need this functionality, but not for the whole screen, but for only one div . So I could update the text when the elements are not visible.

Need help, thanks in advance!

Answer 1

This is a very good answer, but here is a modified version of the Viewport plugin that you mentioned.

 (function($) { $.belowthefold = function(lookIn, elements, settings) { var fold = $(lookIn).height() + $(lookIn).scrollTop(); return $(elements).filter(function(){ return fold <= $(this).offset().top - settings.threshold; }); }; $.abovethetop = function(lookIn, elements, settings) { var top = $(lookIn).scrollTop(); return $(elements).filter(function(){ return top >= $(this).offset().top + $(this).height() - settings.threshold; }); }; $.rightofscreen = function(lookIn, elements, settings) { var fold = $(lookIn).width() + $(lookIn).scrollLeft(); return $(elements).filter(function(){ return fold <= $(this).offset().left - settings.threshold; }); }; $.leftofscreen = function(lookIn, elements, settings) { var left = $(lookIn).scrollLeft(); return $(elements).filter(function(){ return left >= $(this).offset().left + $(this).width() - settings.threshold; }); }; })(jQuery); 

With HTML as follows:

 <div id="lookInMe"> <div class="peek"></div> <div class="peek"></div> [ ... ] </div> 

Name it as follows:

 $.belowthefold("#lookInMe", ".peek", {threshold : 0}).text("Below"); $.abovethetop("#lookInMe", ".peek", {threshold : 0}).text("Above"); $.leftofscreen("#lookInMe", ".peek", {threshold : 0}).text("Left"); $.rightofscreen("#lookInMe", ".peek", {threshold : 0}).text("Right"); 

http://jsfiddle.net/daCrosby/vhF7x/1/