Use All Five Squiggle Graphic

Javascript Tool: Detect if a DOM Element is Truly Visible

In Javascript, there's no easy way to detect if a DOM element is truly visible so I've created a library that solves this problem.

So what’s the problem? 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


Jason Farrell is the CTO/Co-founder of Use All Five.
Follow Jason on Twitter

Get new perspectives and the latest information delivered to your inbox: