Viewport Selectors for jQuery

Blog Projects
JavaScript jQuery

Viewport ads couple of extra selectors to jQuery. With these selectors you can check whether element is inside or outside of viewport. To see how it works check the demo.

How to use?

Viewport selectors depend on jQuery and dimensions (dimensions is now in jQuery core). Include them in your header:

 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.dimensions.js" type="text/javascript"></script>
 <script src="jquery.viewport.js" type="text/javascript"></script>

Now you can use the following new selectors

 $(":in-viewport")
 $(":below-the-fold")
 $(":above-the-top")
 $(":left-of-screen")
 $(":right-of-screen")

Following diagram illustrates what will be selected. White part is visible part of your browser window. Darker green indicates area where two selectors overlap.


Download

Latest source or minified.

When asking a question please include an URL to example page where the problem occurs. If you have longer code examples please use pastie.org

Fork me on GitHub



When asking a question include an URL to example page where the problem occurs. Even better is to make a Fiddle which demonstrates the problem. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.