Detecting visibility with overflow:hidden

Question

I have a bunch of elements hidden due to having overflow:hidden on the parent element. I made a jQuery function that adds to the margin to make a new set of elements visible when a user clicks. However, I need a way to detect when the last element is visible so I can stop this feature from working once the end is reached.

The function I was using is this:

$(this).children('.Product').last().is(':visible')

I also tried:

$(this).children('.Product:last-child').is(':visible')

Both return false even when the last .Product element is visible on the screen.

Should this be working? Is there a better way that I could be doing this?

can you create a jsFiddle that shows a moc-up of the situation? — klewis, Mar 19 '13 at 14:44
The best way to do what you're trying is to just check when the margin size is at the size that it shows the last element. — gaynorvader, Mar 19 '13 at 14:52

score 0 · Answer 1 · answered Mar 19 '13 at 14:45

0

Have you tried:

$(this).children('.Product:last').is(':visible');

If this doesn't work, try pasting the html code or creating a fiddle so we can help you better.

answered Mar 19 '13 at 14:45

Vinny Fonseca

450
3
10

score 0 · Accepted Answer · answered Mar 19 '13 at 14:50

:visible specifications says 'Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.' http://api.jquery.com/visible-selector/ I suppose it doesn't check if an element is into the view or not.

score 0 · Answer 3 · answered Mar 19 '13 at 14:54

As mentioned, :visible will return true if they elements has visibility, ie they aren't display: none or they are still effecting the dom's flow of elements.

What you're after is if they are in the current users viewport:

See this Plugin: Viewport Selectors for jQuery

Good Luck!

Detecting visibility with overflow:hidden

3 Answers3