in jQuery, select element that is within window of smaller div

Question

I have an unordered list that is a child in a smaller parent div and is scrolled within the first div. How would I select the <li> that is currently visible within the first div's window?

What I have tried is using the jQuery offset coordinates of the parent container and elementFromPoint which I got from here

xcoo = $('#menuholder1').offset().left;
ycoo = $('#menuholder1').offset().top;
clickedID = document.elementFromPoint(xcoo, ycoo).id;

However, this is returning the element one item higher. So I tried just adding to ycoo but then it returns nothing.

Does anyone have another solution to this? The page in question is http://do.right.by

your approach (asking the browser to find the element at a certain position) seems a little awkward to me. you know the height of each LI element, as well the scrollTop position of it's container, so you can calculate for yourself which element is at a certain position (in view), no? — schellmax, Jun 23 '12 at 18:40
agree with @schellmax , code will be easier to read also. ALso look at `position()` method — charlietfl, Jun 23 '12 at 18:43

matt3141 · Accepted Answer · 2012-06-23T20:28:21.080

0

I've used this plugin to select visible elements: http://archive.plugins.jquery.com/project/viewport

It adds the pseudo-selector :in-viewport, so you can select like this:

$("li:in-viewport")

To make it apply to a parent element rather than the window, get the modified source code here: https://gist.github.com/2979829

For the IIFE that looks like this

(function($, window) {
    //bunch of code...
})(jQuery, "#menuholder1");

#menuholder1 is the query that selects your parent element.

edited Jun 23 '12 at 20:28

answered Jun 23 '12 at 19:03

matt3141

4,303
1
19
24

I found that plugin but would :in-viewport apply if the element is within the browser window but just not in the visible part of the parent div? – Taylor Baybutt Jun 23 '12 at 19:33
for me, it's returning all the li elements in the parent container. You can check the console log on the site. – Taylor Baybutt Jun 23 '12 at 19:57
sorry, modifying the source code very slightly fixes it. I posted an explanation. – matt3141 Jun 23 '12 at 20:06
hmm, promising but I am now getting undefined...does it have to be the immediate parent? – Taylor Baybutt Jun 23 '12 at 20:16
finally fixed! I forgot to use offset rather than scroll when switching from `window` to parent. – matt3141 Jun 23 '12 at 20:28
AMAZING!!! thank you so much, please see the desired effect on the site...clicking loads the submenu of the li into the menuholder2 div with ajax – Taylor Baybutt Jun 23 '12 at 20:37

in jQuery, select element that is within window of smaller div

1 Answers1