Geek Answers Handbook

How to determine which element (s) are visible in a crowded <div>

Basically, I'm trying to implement a system that behaves similarly to the reading pane built into the Google Reader interface.

If you have not seen this, Google Reader presents each article in a separate window, and as you scroll through it, it selects the current field (and marks the article as read). In addition to this, you can move forward or backward in the list of articles by clicking the previous and next buttons in the user interface.

I basically figured out how to perform most of the functions. However, I'm not sure how I can determine which of my divs is currently visible in the scroll pane.

I have a div that is configured to overflow: auto. Inside this div there are other divs, each of which contains a piece of content. I used the following jquery plugin so that everything scrolls based on the click of the “next” or “previous” button, and it works like a charm:

http://demos.flesler.com/jquery/serialScroll/

But I can’t say which div has “focus” in the scroll bar. I would like to be able to do this for two reasons.

  • I want to highlight the element that the user is currently reading (similar to Google Reader). I need to do this regardless of whether they used the plugin to access or used the browser scrollbar.

  • I need to tell the plugin that the element has focus, so my call to go to the "next" panel actually uses the panel being viewed (and not just the previous panel with which the plugin was scrolled),

I tried to do some sort of searches, but I cannot figure out how to do this. I have found many ways to scroll to a specific element, but I cannot find a way to determine which element is displayed in a crowded div. If I can determine which objects are visible, I can (possibly) figure out the rest.

I use jquery if this helps. Thanks!

+6
javascript jquery html html-parsing
source share
3 answers

You can determine the offset of each div from the top of the scrollable area, and then compare this with the amount of scrollable scrollable area.

$('#scrollableDiv').scroll(function() { var areaHeight = $(this).height(); $('.innerDiv').each(function() { var top = $(this).position().top; var height = $(this).height(); if (top + height < 0) console.log('this div is obfuscated above the viewable area'); else if (top > areaHeight) console.log('this div is obfuscated below the viewable area') else console.log('this div is at least partially in view'); }); });

If there is more than one div in the view, I would choose the value with the smallest value of the offset variable, since this will be the first (or the highest).

+13
source share

Since you are using jquery, look at the position () function of http://api.jquery.com/position/

You can use it to check the position of the selected item relative to the surrounding container.

Example

 <!DOCTYPE html> <html> <head> <style> div { height: 3px; overflow: auto; padding: 10px;} p { margin-left:10px; } </style> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> </head> <body> <div id="container"> <p>Hello</p> </div> <p></p> <script> $(document).ready(function(){ $("#container").scroll(function(ev){ var p = $("p:first"); var position = p.position(); $("p:last").text( "left: " + position.left + ", top: " + position.top ); }); }); </script> </body> </html>

If the code looks familiar, then I stole it most of it from the .position :) page.

You can see it in action here http://jsfiddle.net/ehudokai/HBhRL/5/ , try scrolling over the word "Hello".

You can use the fact that the upper value changes when an element moves through the parent element to see if it is next to the visible part.

Hope this helps!

+2
source share

I am using jquery plugin for this .. it works like magic .. :)

 $(document).ready(function() { $('#wallbottom').appear(function() { alert("div appeared"); }); });

code.google.com/p/jquery-appear/

0
source share

More articles:


All Articles