https://github.com/kahwee/viewability

Check if element is on screen
https://github.com/kahwee/viewability

Last synced: about 2 months ago
JSON representation

Check if element is on screen

• Host: GitHub
• URL: https://github.com/kahwee/viewability
• Owner: kahwee
• License: isc
• Created: 2015-05-30T06:41:57.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2021-08-03T19:34:00.000Z (over 3 years ago)
• Last Synced: 2024-11-08T02:19:38.478Z (2 months ago)
• Language: JavaScript
• Homepage: https://kahwee.github.io/viewability/
• Size: 3.9 MB
• Stars: 34
• Watchers: 5
• Forks: 16
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# viewability

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

[![Build Status](https://travis-ci.org/kahwee/viewability.svg?branch=master)](https://travis-ci.org/kahwee/viewability)

[![Coverage Status](https://coveralls.io/repos/github/kahwee/viewability/badge.svg?branch=master)](https://coveralls.io/github/kahwee/viewability?branch=master)

[![npm version](https://badge.fury.io/js/viewability.svg)](https://www.npmjs.com/package/viewability)

[![Greenkeeper badge](https://badges.greenkeeper.io/kahwee/viewability.svg)](https://greenkeeper.io/)

[![devDependency Status](https://david-dm.org/kahwee/viewability/dev-status.svg)](https://david-dm.org/kahwee/viewability#info=devDependencies)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)

No dependencies.

```js

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](https://kahwee.github.io/viewability/)

[Timer-based example](https://kahwee.github.io/viewability/timer.html)

# Installation

- [npm](https://www.npmjs.org/): `npm install --save viewability`

- Direct download the latest version: https://github.com/kahwee/viewability/releases

- [jsDelivr CDN](http://www.jsdelivr.com/#!viewability): ``

# Usage

## `viewability` package through CDN:

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

```html

  var v = viewability.vertical(document.getElementById('red-box'));

  console.log(v);

  // return {value: 0.83, state: "EL_IS_WITHIN_VERTICAL_VIEW"}

```

## Using Common JS:

Finding out if the element is 100% on screen and using Common JS:

```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.

```sh

npm install

npm test

```

# License

ISC