https://github.com/tpkn/viewability

Calculate DOM element viewability
https://github.com/tpkn/viewability

Last synced: 6 days ago
JSON representation

Calculate DOM element viewability

• Host: GitHub
• URL: https://github.com/tpkn/viewability
• Owner: tpkn
• License: mit
• Created: 2018-08-06T20:10:58.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-13T21:09:26.000Z (over 6 years ago)
• Last Synced: 2024-11-14T14:32:38.316Z (2 months ago)
• Language: HTML
• Homepage:
• Size: 13.7 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Viewability   

Calculate DOM element viewability

## API

### Viewability(stage, element[, options])

### stage   

**Type**: _Object_  

`document.documentElement` or `window` object.

### element  

**Type**: _Object_  

DOM element

### options.percentage

**Type**: _Number_   

**Default**: : `50`  

Visibility of the block in percentage after which the callback will be triggered.

### options.iab

**Type**: _Boolean_  

**Default**: `false`  

The callback function will be triggered when block has 50% viewability for 1 second. `percentage` option overrides standard (50%) value.

### .check()

**Type**: _Function_  

**Returns**: `Object`  

Returned object contains `{ x, y, square }` params, where `x` and `y` are the vertical and horizontal viewability (just incase only one axis needed), and `square` is the visible square area.

## Usage

```javascript

var va;

var stage = document.documentElement

var element = document.getElementById('block');

var viewability = new Viewability(stage, element, {

   iab: true, 

   percentage: 22,

   on_visible: onVisible

});

window.onscroll = window.onresize = checkViewability;

checkViewability();

function onVisible(){

   console.log('On visible');

}

function checkViewability(){

   va = viewability.check();

   console.log(va.x, va.y, va.square);

}

```