JS Viewport Utils v3
Includes:
- A standalone, plain JavaScript object,
viewportUtils
- AMD and Node/CommonJS support
Installation
AMD, Node.js, CommonJS
NPM
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>
In Angular projects / Typescript / ES6
import {inViewport, inViewportBottom} from "js-viewport-utils";
Usage
Basic, with optional settings
var foo = document.getElementById("foo");
viewportUtils.inViewport(foo, {sides: "left"});
If working with jQuery
var $foo = jQuery("#foo");
viewportUtils.inViewport($foo[0], {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.querySelector("#bar"); // Alternative for `getElementById`
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