├── .gitignore ├── LICENSE ├── README.md ├── jquery.isonscreen.js └── jquery.isonscreen.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Mike Dunn 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #jQuery.isOnScreen 2 | 3 | Simple jQuery plugin to determine if an element is positioned within the viewport. It does not test any other type of "visibility", like css display, opacity, presence in the dom, etc - it only considers position. 4 | 5 | Current version returns true if at least 1 pixel is visible on screen. 6 | 7 | An optional callback argument is accepted, that is passed the number of pixels visible on each edge - the return of that callback is used, if provided. The callback is called from the scope of the current node. 8 | 9 | Some examples: 10 | 11 | Returns true if element has at least 1 pixel within the viewport: 12 | 13 | $('selector').isOnScreen(); 14 | 15 | Returns true if at least the top 10px of the element's vertical area is in the viewport: 16 | 17 | $('selector').isOnScreen(function(deltas){ 18 | return deltas.top >= 10 && deltas.bottom >= 10; 19 | }); 20 | 21 | Returns true if at least the top 10px of the element's vertical area above the bottom of the viewport. 22 | 23 | $('selector').isOnScreen(function(deltas){ 24 | return deltas.top >= 10; 25 | }); 26 | 27 | Returns true if the element is within 100px of the bottom of the viewport (and so technically is still not "visible" - this can be useful for loading content when you expect a user to see it shortly, for example during a fling action or in an infinite scroll application). 28 | 29 | $('selector').isOnScreen(function(deltas){ 30 | return deltas.top >= -100; 31 | }); 32 | 33 | Returns true if the element's vertical space is entirely within the viewport: 34 | 35 | $('selector').isOnScreen(function(deltas){ 36 | return deltas.top >= this.height() && deltas.bottom >= this.height(); 37 | }); 38 | 39 | Return true if the element is entirely within the viewport: 40 | 41 | $('selector').isOnScreen(function(deltas){ 42 | return deltas.top >= this.height() 43 | && deltas.bottom >= this.height() 44 | && deltas.left >= this.width() 45 | && deltas.right >= this.width() 46 | }); 47 | 48 | Returns true if the element is above the bottom of the viewport at all (at least 1 pixel is showing, or the element is above the viewport and not actually visible). 49 | 50 | $('selector').isOnScreen(function(deltas){ 51 | return deltas.top >= 0; 52 | }); 53 | 54 | -------------------------------------------------------------------------------- /jquery.isonscreen.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | /** 4 | * Tests if a node is positioned within the current viewport. 5 | * It does not test any other type of "visibility", like css display, 6 | * opacity, presence in the dom, etc - it only considers position. 7 | * 8 | * By default, it tests if at least 1 pixel is showing, regardless of 9 | * orientation - however an optional argument is accepted, a callback 10 | * that is passed the number of pixels distant between each edge of the 11 | * node and the corresponding viewport. If the callback argument is provided 12 | * the return value (true of false) of that callback is used instead. 13 | */ 14 | $.fn.isOnScreen = function(test){ 15 | 16 | var height = this.outerHeight(); 17 | var width = this.outerWidth(); 18 | 19 | if(!width || !height){ 20 | return false; 21 | } 22 | 23 | var win = $(window); 24 | 25 | var viewport = { 26 | top : win.scrollTop(), 27 | left : win.scrollLeft() 28 | }; 29 | viewport.right = viewport.left + win.width(); 30 | viewport.bottom = viewport.top + win.height(); 31 | 32 | var bounds = this.offset(); 33 | bounds.right = bounds.left + width; 34 | bounds.bottom = bounds.top + height; 35 | 36 | var deltas = { 37 | top : viewport.bottom - bounds.top, 38 | left: viewport.right - bounds.left, 39 | bottom: bounds.bottom - viewport.top, 40 | right: bounds.right - viewport.left 41 | }; 42 | 43 | if(typeof test == 'function') { 44 | return test.call(this, deltas); 45 | } 46 | 47 | return deltas.top > 0 48 | && deltas.left > 0 49 | && deltas.right > 0 50 | && deltas.bottom > 0; 51 | }; 52 | 53 | })(jQuery); -------------------------------------------------------------------------------- /jquery.isonscreen.min.js: -------------------------------------------------------------------------------- 1 | !function(a){a.fn.isOnScreen=function(b){var c=this.outerHeight(),d=this.outerWidth();if(!d||!c)return!1;var e=a(window),f={top:e.scrollTop(),left:e.scrollLeft()};f.right=f.left+e.width(),f.bottom=f.top+e.height();var g=this.offset();g.right=g.left+d,g.bottom=g.top+c;var h={top:f.bottom-g.top,left:f.right-g.left,bottom:g.bottom-f.top,right:g.right-f.left};return"function"==typeof b?b.call(this,h):h.top>0&&h.left>0&&h.right>0&&h.bottom>0}}(jQuery); --------------------------------------------------------------------------------