jQuery Onscreen Visibility Plugin

# 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.