|
|
@@ -1,134 +0,0 @@ |
|
|
|
/** |
|
|
|
* author Christopher Blum |
|
|
|
* - based on the idea of Remy Sharp, http://remysharp.com/2009/01/26/element-in-view-event-plugin/ |
|
|
|
* - forked from http://github.com/zuk/jquery.inview/ |
|
|
|
*/ |
|
|
|
(function ($) { |
|
|
|
var inviewObjects = {}, viewportSize, viewportOffset, |
|
|
|
d = document, w = window, documentElement = d.documentElement, expando = $.expando, isFiring = false, $elements = {}; |
|
|
|
|
|
|
|
$.event.special.inview = { |
|
|
|
add: function(data) { |
|
|
|
var inviewObject = { data: data, $element: $(this) } |
|
|
|
inviewObjects[data.guid + "-" + this[expando]] = inviewObject; |
|
|
|
var selector = inviewObject.data.selector, |
|
|
|
$element = inviewObject.$element; |
|
|
|
var hash = parseInt(getHash( data.guid + this[expando])); |
|
|
|
$elements[hash] = selector ? $element.find(selector) : $element; |
|
|
|
}, |
|
|
|
|
|
|
|
remove: function(data) { |
|
|
|
try { delete inviewObjects[data.guid + "-" + this[expando]]; } catch(e) {} |
|
|
|
try { |
|
|
|
var hash = parseInt(getHash(data.guid + this[expando])); |
|
|
|
delete($elements[hash]); |
|
|
|
} catch (e){} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
function getHash(str){ |
|
|
|
str = str+''; |
|
|
|
var hash = 0; |
|
|
|
if (str.length == 0) return hash; |
|
|
|
for (i = 0; i < str.length; i++) { |
|
|
|
char = str.charCodeAt(i); |
|
|
|
hash = ((hash<<5)-hash)+char; |
|
|
|
hash = hash & hash; // Convert to 32bit integer |
|
|
|
} |
|
|
|
return Math.abs(hash); |
|
|
|
} |
|
|
|
|
|
|
|
function getViewportSize() { |
|
|
|
var mode, domObject, size = { height: w.innerHeight, width: w.innerWidth }; |
|
|
|
|
|
|
|
// if this is correct then return it. iPad has compat Mode, so will |
|
|
|
// go into check clientHeight/clientWidth (which has the wrong value). |
|
|
|
if (!size.height) { |
|
|
|
mode = d.compatMode; |
|
|
|
if (mode || !$.support.boxModel) { // IE, Gecko |
|
|
|
domObject = mode === 'CSS1Compat' ? |
|
|
|
documentElement : // Standards |
|
|
|
d.body; // Quirks |
|
|
|
size = { |
|
|
|
height: domObject.clientHeight, |
|
|
|
width: domObject.clientWidth |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return size; |
|
|
|
} |
|
|
|
|
|
|
|
function getViewportOffset() { |
|
|
|
return { |
|
|
|
top: w.pageYOffset || documentElement.scrollTop || (d.body?d.body.scrollTop:0), |
|
|
|
left: w.pageXOffset || documentElement.scrollLeft || (d.body?d.body.scrollLeft:0) |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
function checkInView() { |
|
|
|
if (isFiring){ |
|
|
|
return; |
|
|
|
} |
|
|
|
isFiring = true; |
|
|
|
viewportSize = viewportSize || getViewportSize(); |
|
|
|
viewportOffset = viewportOffset || getViewportOffset(); |
|
|
|
|
|
|
|
for (var i in $elements) { |
|
|
|
if (isNaN(parseInt(i))) { |
|
|
|
continue; |
|
|
|
} |
|
|
|
|
|
|
|
var $element = $($elements[i]), |
|
|
|
elementSize = { height: $element.height(), width: $element.width() }, |
|
|
|
elementOffset = $element.offset(), |
|
|
|
inView = $element.data('inview'), |
|
|
|
visiblePartX, |
|
|
|
visiblePartY, |
|
|
|
visiblePartsMerged; |
|
|
|
|
|
|
|
// Don't ask me why because I haven't figured out yet: |
|
|
|
// viewportOffset and viewportSize are sometimes suddenly null in Firefox 5. |
|
|
|
// Even though it sounds weird: |
|
|
|
// It seems that the execution of this function is interferred by the onresize/onscroll event |
|
|
|
// where viewportOffset and viewportSize are unset |
|
|
|
if (!viewportOffset || !viewportSize) { |
|
|
|
isFiring = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (elementOffset.top + elementSize.height > viewportOffset.top && |
|
|
|
elementOffset.top < viewportOffset.top + viewportSize.height && |
|
|
|
elementOffset.left + elementSize.width > viewportOffset.left && |
|
|
|
elementOffset.left < viewportOffset.left + viewportSize.width) { |
|
|
|
visiblePartX = (viewportOffset.left > elementOffset.left ? |
|
|
|
'right' : (viewportOffset.left + viewportSize.width) < (elementOffset.left + elementSize.width) ? |
|
|
|
'left' : 'both'); |
|
|
|
visiblePartY = (viewportOffset.top > elementOffset.top ? |
|
|
|
'bottom' : (viewportOffset.top + viewportSize.height) < (elementOffset.top + elementSize.height) ? |
|
|
|
'top' : 'both'); |
|
|
|
visiblePartsMerged = visiblePartX + "-" + visiblePartY; |
|
|
|
if (!inView || inView !== visiblePartsMerged) { |
|
|
|
$element.data('inview', visiblePartsMerged).trigger('inview', [true, visiblePartX, visiblePartY]); |
|
|
|
} |
|
|
|
} else if (inView) { |
|
|
|
$element.data('inview', false).trigger('inview', [false]); |
|
|
|
} |
|
|
|
} |
|
|
|
isFiring = false; |
|
|
|
} |
|
|
|
|
|
|
|
$(w).bind("scroll resize", function() { |
|
|
|
viewportSize = viewportOffset = null; |
|
|
|
}); |
|
|
|
|
|
|
|
// Use setInterval in order to also make sure this captures elements within |
|
|
|
// "overflow:scroll" elements or elements that appeared in the dom tree due to |
|
|
|
// dom manipulation and reflow |
|
|
|
// old: $(window).scroll(checkInView); |
|
|
|
// |
|
|
|
// By the way, iOS (iPad, iPhone, ...) seems to not execute, or at least delays |
|
|
|
// intervals while the user scrolls. Therefore the inview event might fire a bit late there |
|
|
|
setInterval(checkInView, 250); |
|
|
|
})(jQuery); |