Basic Visibility Detection

Sam Sehnert 1.0.0 © Digital Fusion 2012, MIT

Back to GitHub or Back to Blog Article

Basic element visibility checking. This example will print 'Onscreen' or 'Offscreen' depending on the location of the element at the time the detection was run.

// Is this element visible onscreen? var visible = $(this).visible( detectPartial ); // Set the visible status into the span. $(this).find('span').text( visible ? 'Onscreen' : 'Offscreen' ).toggleClass('visible',visible);
One
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Two
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Three
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Four
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Five
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Six
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Seven
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Eight
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nine
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ten
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Eleven
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Twelve
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Thirteen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fourteen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fifteen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sixteen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Seventeen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Eighteen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nineteen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Twenty
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Visibility detection

'Whole Element' will check if the entire element is visible on the screen.

'Par Element' will check if any part of the element is visible on the screen.