Skip to content

Latest commit

 

History

History
113 lines (83 loc) · 3.24 KB

README.md

File metadata and controls

113 lines (83 loc) · 3.24 KB
Raw

Viewport

Viewport is a component to ease viewport management. You can get the dimensions of the viewport and beyond, which can be quite helpful to perform some checks with JavaScript.

Installation

$ npm install viewport-js

Standalone

Also, you can use it without components.

<script src="../standalone/viewport.js"></script>

Usage

First, add the following meta viewport:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Then, initialize the Viewport:

var viewport = require('viewport');

Now, starts to use it!

viewport.height // Returns the current height of the viewport. (Read below the API)

Browser Support

  • Chrome (OS X, Windows)
  • Firefox (OS X, Windows)
  • Opera (OS X, Windows)
  • Safari (OS X, Windows)
  • IE10+

API

Viewport#width

Returns the current width of viewport (in pixels).

Viewport#height

Returns the current height of viewport (in pixels).

Viewport#calculateDimensions()

Calculates/updates the dimensions (width and height) of viewport (in pixels).

Viewport#top

Returns offset top of viewport.

Viewport#right

Returns offset right of viewport.

Viewport#bottom

Returns offset bottom of viewport.

Viewport#left

Returns offset left of viewport.

Viewport#calculateOffset()

Calculates/updates the viewport position.

Viewport#scrollY

Returns vertical scroll position of viewport.

Viewport#scrollX

Returns horizontal scroll position of viewport.

Viewport#calculateScroll()

Calculates/updates the scroll positions (scrollY and scrollX) of viewport.

Viewport#orientation

Returns the device orientation: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary.

### Viewport#calculateOrientation() Calculates/updates the device orientation.

### Viewport#device Device size is static and doesn't change when the page is resized. Returns an object with size of device (width and height).

### Viewport#inViewport() Calculate if an element is completely located in the viewport. Returns boolean.

### Viewport#isVisible() Calculates if an element is visible in the viewport. Returns boolean.

### Viewport#refresh() Updates the viewport dimension, viewport positions and orientation.

### Events

  • scroll: emitted when the viewport are scrolled.
  • resize: emitted when the dimensions of the viewport changes.
  • bottom: emitted when the viewport position is the bottom.
  • top: emitted when the viewport position is the top.

With ❤️ by

License

MIT license. Copyright © 2016.