viewability

Browser package to check if the element is on screen without dependencies. Or you can call it visibility.


No dependencies.

``js
var vertical = require("viewability/vertical");
vertical(document.getElementById("blue-box"));
// return {value: 1, state: "EL_IS_WITHIN_VERTICAL_VIEW"}
`

Use 'viewability/horizontal' for corresponding view.

Demo

Both source code are in the gh-pages branch.

Draggable-based example
Timer-based example

Installation

- npm: npm install --save viewability
- Direct download the latest version: https://github.com/kahwee/viewability/releases
- jsDelivr CDN:

Usage

viewability package through CDN:

Loading it directly to the browser with viewability exposed to the window:

`html


`

Using Common JS:

Finding out if the element is 100% on screen and using Common JS:

`js
var v = require("viewability");
var el = document.getElementById("blue-box");
if (v.isElementOnScreen(el, true)) {
console.log("100% on screen.");
} else if (v.isElementOnScreen(el)) {
console.log("Some parts are on screen");
} else {
console.log("not on screen at all");
}
`

Use only vertical:

`
var vertical = require('viewability/vertical');
vertical(document.getElementById('blue-box'));
// return {value: 1, state: "EL_IS_WITHIN_VERTICAL_VIEW"}
`

Use only horizontal:

`
var horizontal = require('viewability/horizontal');
vertical(document.getElementById('blue-box'));
// return {value: 1, state: "EL_IS_WITHIN_HORIZONTAL_VIEW"}
`

Running tests

While viewability has no dependencies, testing uses Karma.

`sh
npm install
npm test
``

License

ISC