National Puppy Menace

    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

    205

    Version

    1.3.4

    License

    ISC

    Unpacked Size

    283 kB

    Total Files

    19

    Last publish

    Collaborators

    • kahwee