https://github.com/confusedmatrix/visibility-stats
A simple library to determine if DOM elements are visible in the viewport and statistics about how long elements have been visible / when they were last visible
https://github.com/confusedmatrix/visibility-stats
dom usability visibility
Last synced: 7 months ago
JSON representation
A simple library to determine if DOM elements are visible in the viewport and statistics about how long elements have been visible / when they were last visible
- Host: GitHub
- URL: https://github.com/confusedmatrix/visibility-stats
- Owner: confusedmatrix
- License: mit
- Created: 2017-11-28T14:53:28.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-28T15:01:03.000Z (almost 8 years ago)
- Last Synced: 2025-01-13T20:29:26.668Z (9 months ago)
- Topics: dom, usability, visibility
- Language: JavaScript
- Size: 37.1 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VisibilityStats
A simple library to determine if DOM elements are visible in the
viewport and statistics about how long elements have been visible
/ when they were last visible.
This library could be useful for determining which content is most
looked at on a page and therefore could be a measure of how good/useful
a particular content section is.
## Intallation
In the browser:
```
```
Via npm
```shell
npm i --save visibility-stats
```
## Usage
Sample HTML
```html
<div id="watch-me"></div>
<div id="watch-me-too"></div>
```
```html
<script>
// Initialise the library with a DOM query selector to
// begin tracking the visibily of certain elements
var vs = new VisibilityStats("#watch-me, #watch-me-too")
// return all currently visible elements
vs.getVisibleElements()
// get up to date stats on which elements are visible and how
// long they have been visible for / when they were last visible
vs.getStats()
```
For more examples, see the `/examples` directory
## Build devlopment bundle
`yarn build:dev`
or to additional watch for changes and rebuild bundle
`yarn build:dev:watch`
## Compile production library to dist
`yarn build:prod`
## Run tests (TBD)
`yarn test`