Javascript Tool: Detect if a DOM Element is Truly Visible

Let’s say we have a typical slideshow — the upcoming 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