diff --git a/jquery.visible.js b/jquery.visible.js index 5cd9aeb..9d49907 100644 --- a/jquery.visible.js +++ b/jquery.visible.js @@ -7,25 +7,26 @@ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within - * the user visible viewport of a web browser. - * only accounts for vertical position, not horizontal. + * the user visible viewport of a web browser, + * or within the visible area of a containing element. */ - var $w = $(window); - $.fn.visible = function(partial,hidden,direction){ + var _$w = $(window); + $.fn.visible = function(partial,hidden,direction,container){ if (this.length < 1) return; - var $t = this.length > 1 ? this.eq(0) : this, - t = $t.get(0), - vpWidth = $w.width(), - vpHeight = $w.height(), - direction = (direction) ? direction : 'both', + var $w = container ? $(container) : _$w, + $t = this.length > 1 ? this.eq(0) : this, + t = $t.get(0), + vpWidth = $w.width(), + vpHeight = $w.height(), + direction = direction ? direction : 'both', clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true; - if (typeof t.getBoundingClientRect === 'function'){ + if (!container && typeof t.getBoundingClientRect === 'function'){ - // Use this native browser method, if available. + // Use this native browser method if available, if window is our container. var rec = t.getBoundingClientRect(), tViz = rec.top >= 0 && rec.top < vpHeight, bViz = rec.bottom > 0 && rec.bottom <= vpHeight, @@ -40,11 +41,13 @@ return clientSize && vVisible; else if(direction === 'horizontal') return clientSize && hVisible; + } else { - var viewTop = $w.scrollTop(), + var wOffset = container ? $w.offset() : null, + viewTop = container ? wOffset.top : $w.scrollTop(), viewBottom = viewTop + vpHeight, - viewLeft = $w.scrollLeft(), + viewLeft = container ? wOffset.left : $w.scrollLeft(), viewRight = viewLeft + vpWidth, offset = $t.offset(), _top = offset.top, @@ -65,4 +68,4 @@ } }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/jquery.visible.min.js b/jquery.visible.min.js index e3a2014..2ba6c03 100644 --- a/jquery.visible.min.js +++ b/jquery.visible.min.js @@ -1 +1 @@ -(function(e){e.fn.visible=function(t,n,r){var i=e(this).eq(0),s=i.get(0),o=e(window),u=o.scrollTop(),a=u+o.height(),f=o.scrollLeft(),l=f+o.width(),c=i.offset().top,h=c+i.height(),p=i.offset().left,d=p+i.width(),v=t===true?h:c,m=t===true?c:h,g=t===true?d:p,y=t===true?p:d,b=n===true?s.offsetWidth*s.offsetHeight:true,r=r?r:"both";if(r==="both")return!!b&&m<=a&&v>=u&&y<=l&&g>=f;else if(r==="vertical")return!!b&&m<=a&&v>=u;else if(r==="horizontal")return!!b&&y<=l&&g>=f}})(jQuery) \ No newline at end of file +(function(e){var t=e(window);e.fn.visible=function(n,r,i,s){if(this.length<1)return;var o=s?e(s):t,u=this.length>1?this.eq(0):this,a=u.get(0),f=o.width(),l=o.height(),i=i?i:"both",c=r===true?a.offsetWidth*a.offsetHeight:true;if(!s&&typeof a.getBoundingClientRect==="function"){var h=a.getBoundingClientRect(),p=h.top>=0&&h.top0&&h.bottom<=l,v=h.left>=0&&h.left0&&h.right<=f,g=n?p||d:p&&d,y=n?v||v:v&&m;if(i==="both")return c&&g&&y;else if(i==="vertical")return c&&g;else if(i==="horizontal")return c&&y}else{var b=s?o.offset():null,w=s?b.top:o.scrollTop(),E=w+l,S=s?b.left:o.scrollLeft(),x=S+f,T=u.offset(),N=T.top,C=N+u.height(),k=T.left,L=k+u.width(),A=n===true?C:N,O=n===true?N:C,M=n===true?L:k,_=n===true?k:L;if(i==="both")return!!c&&O<=E&&A>=w&&_<=x&&M>=S;else if(i==="vertical")return!!c&&O<=E&&A>=w;else if(i==="horizontal")return!!c&&_<=x&&M>=S}}})(jQuery)