Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

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

Install

npm i viewability

DownloadsWeekly Downloads

257

Version

1.3.4

License

ISC

Unpacked Size

283 kB

Total Files

19

Last publish

Collaborators

  • avatar