Skip to content
Custom jQuery selector to detect elements currently on-screen
HTML CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
assets
LICENCE
README.md
index.html
jquery.onscreen.js
jquery.onscreen.min.js

README.md

onScreen

onScreen is a jQuery plugin to detect whether an element is currently visible on-screen. It adds the :onScreen selector which is used to select only those elements that are currently within the bounds of the screen: $("span:onScreen"). It can also be combined with other selectors so, for example, to return only visible, on-screen elements use $("span:visible:onScreen").

$(function() {
  setInterval(function() {
    $("h2")                             // get all <h2>s
      .css("background-color", "")      // reset their background colours
      .filter(":onScreen")              // get only <h2>s on screen
        .css("background-color", "red") // give them a red background
  }, 1000)                              // repeat every second
})

Copyright

Copyright 2011-2013 Ben Pickles. See LICENCE for details.

Something went wrong with that request. Please try again.