Overview

is a compact set of cross-browser viewport utilities packed into an opensource JavaScript module. It provides methods to measure viewport dimensions and/or to detect if a DOM element is in the viewport. It is well-tested and researched. It normalizes browser differences to achieve optimal results. It is efficiently written in native JavaScript. It can be used as a standalone module, an ender module, or a jQuery plugin.

Methods

Static

Note: Integrated usage is shown below. For standalone usage replace $ with verge.

@return number

$.viewportW() // Get the viewport width in pixels.
$.viewportH() // Get the viewport height in pixels.

@return boolean

$.inViewport(elem) // true if elem is in the viewport
$.inViewport(elem, 100)  // true if elem is in the viewport or 100px near it
$.inViewport(elem, -100) // true if elem is in the viewport at least 100px
$.inX(elem) // true if elem is in same x-axis as the viewport
$.inY(elem) // true if elem is in same y-axis as the viewport

On pages that never scroll horizontally, $.inX always returns true. On pages that never scroll vertically, $.inY always returns true. Note this relationship:

$.inViewport(elem) === $.inX(elem) && $.inY(elem) // always true

@return object

The $.rectangle(elem [, cushion]) method returns an a plain object containing the properties top/bottom/left/right/width/height with respect to the top-left corner of the current viewport. Its properties match the native rectangle. The cushion parameter is an amount of pixels (+/-) to cushion the element. It adjusts the measurements such that it is possible to detect when an element is near the viewport.

$.rectangle(elem) // Get coordinates relative to the viewport.
$.rectangle(elem, 100)  // Get coordinates, with 100px cushion.
$.rectangle(elem, -100) // Get coordinates, with -100px cushion.

Integration

jQuery

jQuery.extend(verge);

NPM

$ npm install verge