CODEWITHSUNDEEP
javascriptjquerydom
Edu Felipe
Edu Felipe

Reputation: 10387

How can I know if an DOM element is currently on screen using jQuery

Is there a function, or plugin, that tells me if more than 50% of a <div> block is currently being displayed?

I know there are things like $.offset() but I didn't want to do it by hand every time the user resizes it's window or scroll to a region.

Something on the lines of :visible, but that is currently visible.

Thanks!

Upvotes: 1

Views: 1826

Answers (2)

Spudley
Spudley

Reputation: 168685

Somewhat late to this party, but there is indeed a JQuery plug-in for this:

The Is On Screen plug-in can be downloaded from here: http://plugins.jquery.com/node/16506/release and there is also a demo page

Hope that helps.

Upvotes: 2

Yuval Adam
Yuval Adam

Reputation: 165232

If your definition of "visible" is "more than 50% of the div on the screen", you're going to need to create a function of your own to calculate this.

You will need to define exactly what portion of the <div> you are calculating - i.e. margins, borders, elements hidden in scrollTop/scrollLeft, etc...

Upvotes: 3

Related Questions