viewability

1.3.4 • Public • Published

viewability

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

Build Status Coverage Status npm version Greenkeeper badge devDependency Status js-standard-style

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

Usage

viewability package through CDN:

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

<script src="https://cdn.jsdelivr.net/npm/viewability@latest/dist/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

Package Sidebar

Install

npm i viewability

Weekly Downloads

112

Version

1.3.4

License

ISC

Unpacked Size

283 kB

Total Files

19

Last publish

Collaborators

  • kahwee