If element is longer than viewport returns false.

[dsovino]

As described, if element being checked is longer than the window browser, it returns false when top and bottom of element are not visible.

[jayharland]

Got the same problem over here. If the top or bottom of the element isn't in the window, even if there is a ton of content from the element in the window, it returns false.

Any ideas?

[dubaaron]

Isn't that what the first optional parameter is for? If you pass it 'true', it will return true if any part of the given element is visible. From the readme, and website:

This basic check will return true if the entire element is visible to the user (within the visual viewport).

$('#element').visible();

If you'd like to check for ANY PART of the element, you can use the following:

$('#element').visible( true );

Is that not working?

I just tested, it seems to work for me.

[sitoagency]

I've updated to 1.2.0 today and after a bit of testing, I can confirm the issue: if the top border of the target div (may it be the div itself, or just its padding) touches to top border of the viewport, then .visible() evaluates to false even if .visible(true) is specified! Using margin is fine, instead. However, in my situation I can't switch.

Moreover, as soon as the bottom border of the div falls within the viewport, then .visible(true) evaluates again as True.

Another strange behaviour is that .visible(true,false,'horizontal') always evaluates to True. (I made some testing as I'm building a WordPress theme using jquery-visible to check for visibility)

Edit: it's a well known old issue... is it possible to check if the code works when applied to 1.2.0, as I'm loading it via CDNJS?
#16

[jayharland]

@dubaaron

Using the optional first parameter still acts as though the element isn't visible even when it is taking up the entire screen and just its top and bottom edges aren't visible.

If you'd like to check for ANY PART of the element, you can use the following:

$('#element').visible( true );

It does not see the middle as "ANY PART", it only checks the corners, so if they aren't visible it returns false. When the content is long enough that it needs scrolling, it does not work as desired.

Since time was a factor, I scrapped this plugin and used something different (https://github.com/moagrius/isOnScreen).

Thank you though to the developers of this plugin because it's still pretty nice.

[sitoagency]

I've just tried the code posted on #16 but it doesn't solve the issue

@jayharland
Thanks for suggesting isOnScreen, works just as expected 👍

This has been idle for a long while but in case anyone cares, you can resolve this issue with adding the following line of code...

vVisible = (rec.top < 0 && rec.bottom > vpHeight) ? true : vVisible;

right after line 35. This statement just checks to see if the element top border is above the window top AND the bottom border is below the fold.

[mimani-s]

@smcmillen Thanks, this works like charm, should be added in the repo itself.

[samatcd]

Resolved in latest commit.