Package Exports

viewability

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (viewability) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

viewability

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

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.

See demo: https://kahwee.github.io/viewability/

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

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

<script src="bower_components/viewability/dist/viewability.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>

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.horizontal(el).value === 0 && v.vertical(el).value === 0) {
  console.log('100% on screen.')
} else if (v.horizontal(el).value > 0 || v.value(el).value > 0) {
  console.log('Part of element in on screen.')
}

Running tests

While viewability has no dependencies, testing uses Karma and jQuery.

npm install
npm test

License

ISC