Visible Element
For browsers only. Has two methods that allow you to detect if an element is visible to the user.
NOTE: a DOM library (like jQuery) is required for one of the methods
Install
npm install visible-element
Usage
var $ = visible = $ visible // → truevisible // → false // requires a DOM library// the parent arg is optional, it'll default to $el.parent()// this method is useful for parents that have `overflow: scroll`visible // → truevisible // → true
Methods
Initialization
The library must first be initialized before use.
var visibleElement = visible = visible
Or, you can initialize with a DOM library (like jQuery).
var visibleElement = $ = visible = visible// you can then also usevisible
inViewport(<DOMNode || jqueryEl> el)
Checks if the element is visible in the entire viewport. Returns a boolean. Accepts a jQuery-style wrapped DOM element or a raw element.
Does not require a DOM library.
inContainer(<jqueryEl> el[, <jqueryEl> parent])
Checks if an element is visible in a container. This is especially useful if the parent has overflow: hidden
or overflow: scroll
on it.
Returns a boolean. Accepts an element as the first argument. An optional second argument defines the parent container. If not passed, it will default to the immediate parent of the element.
Requires initialization with a DOM library.
Tests
Tests are prova, based on tape. They can be run with npm test
.
Developing
To publish, run gulp publish --bump=patch
Changelog
1.0.0
Initial Release