/** * 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);