Use All Five, Inc.

In Javascript, there’s no easy way to detect if a DOM element is truly visible. For example, if we have a typical slideshow, the images are usually off to the side and exist on the page. If you use jQuery’s (‘:visible’) method on an image out of bounds, it would return true, even though it isn’t visible to the user—it’s actually hidden outside of the bounds of an overflow:hidden container.

I created a tool that looks at an object and checks each of its parents to see if it’s still visible to the user.

It even works in Internet Explorer and doesn’t require jQuery.

I also only touched the surface on this—there are other instances where it will still return true, such as when an absolute or fixed element sits on top of what we’re detecting. I created a git repo for this if anyone wishes to expand on it: https://github.com/UseAllFive/ua5-js-utils

Usage:

Library: