JS Viewport Utils
Includes:
- A standalone, plain JavaScript object,
viewportUtils
- AMD and Node/CommonJS support
- Optional jQuery plugin with handy selectors and shorthand methods
Installation
AMD, Node.js, CommonJS
npm install js-viewport-utils
And then:
var viewportUtils = require('js-viewport-utils');
Bower:
bower install js-viewport-utils
Traditional include
<script src="path-to/js-viewport-utils.js"></script>
jQuery plugin:
<script src="path-to/js-viewport-utils.js"></script>
<script src="jquery.js"></script>
In Angular projects
import * as viewportUtils from "js-viewport-utils";
Usage
Basic, with optional settings
var foo = document.getElementById("foo");
viewportUtils.inViewport(foo, {sides: "left"});
Sides can be passed as unique string with spaces
var options = {sides: "top right left bottom"}
###Use another element as viewport
var bar = document.getElementById("bar");
viewportUtils.inViewport(elem, {container: bar});
###Custom thresholds
viewportUtils.inViewport(elem, {top: 12, right: 12});
For more options, see Settings section below.
Shorthand notation
viewportUtils.inViewportLeft(elem);
viewportUtils.inViewportTop(elem);
These will check for the matching side, with default settings
Browser Support
- IE 8+
- All the others except Opera Mini
- Tested in the latest stable Chrome, Firefox, Safari, and IE
- No "new" JavaScript or quirky techniques are employed so it should work in all other modern browsers not specifically mentioned above
License
MIT © Tony Samperi
This library is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.
Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded files already
contain embedded comments with sufficient
attribution, so you shouldn't need to do anything additional when using these
files normally.
Author
Tony Samperi, tonysamperi.github.io