viewability

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

No dependencies.

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

• Bower: bower install --save viewability
• npm: npm install --save viewability
• Direct download the latest version: https://github.com/kahwee/viewability/releases
• jsDelivr CDN: <script src="//cdn.jsdelivr.net/viewability/VERSION/viewability.min.js"></script>

Usage

viewability package through CDN:

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

<script src="//cdn.jsdelivr.net/viewability/latest/viewability.min.js"></script>
<script>
  var v = viewability.vertical(document.getElementById('red-box'));
  console.log(v);
  // return {value: 0.83, state: "EL_IS_WITHIN_VERTICAL_VIEW"}
</script>

Using Common JS:

Finding out if the element is 100% on screen and using Common 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.

npm install
npm test

License

ISC