jquery.onscreen.js

/* 
 * onScreen.js
 * Checks if matched elements are inside the viewport.
 *
 * Copyright onScreen Contributors, 2013 Licensed under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * You can find a list of contributors at:
 * https://github.com/silvestreh/onScreen/graphs/contributors
 */

(function($) {

  $.fn.onScreen = function(options) {

    var params = $.extend({
      container: window,
      direction: 'vertical',
      toggleClass: null,
      doIn: null,
      doOut: null,
      tolerance: 0,
      throttle: null,
      lazyAttr: null,
      lazyPlaceholder: 'data:image/gif;base64,R0lGODlhEAAFAIAAAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCQAAACwAAAAAEAAFAAACCIyPqcvtD00BACH5BAkJAAIALAAAAAAQAAUAgfT29Pz6/P///wAAAAIQTGCiywKPmjxUNhjtMlWrAgAh+QQJCQAFACwAAAAAEAAFAIK8urzc2tzEwsS8vrzc3tz///8AAAAAAAADFEiyUf6wCEBHvLPemIHdTzCMDegkACH5BAkJAAYALAAAAAAQAAUAgoSChLS2tIyKjLy+vIyOjMTCxP///wAAAAMUWCQ09jAaAiqQmFosdeXRUAkBCCUAIfkECQkACAAsAAAAABAABQCDvLq83N7c3Nrc9Pb0xMLE/P78vL68/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCEwkCnKGbegvQn4RjGMx8F1HxBi5Il4oEiap2DcVYlpZwQAIfkECQkACAAsAAAAABAABQCDvLq85OLkxMLE9Pb0vL685ObkxMbE/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCDwnCGHEcIMxPn4VAGMQNBx0zQEZHkiYNiap5RaBKG9EQAh+QQJCQAJACwAAAAAEAAFAIOEgoTMysyMjozs6uyUlpSMiozMzsyUkpTs7uz///8AAAAAAAAAAAAAAAAAAAAAAAAEGTBJiYgoBM09DfhAwHEeKI4dGKLTIHzCwEUAIfkECQkACAAsAAAAABAABQCDvLq85OLkxMLE9Pb0vL685ObkxMbE/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCAQSTmMEGaco8+UBSACwWBqHxKOJYd+q1iaXFoRRMbtEQAh+QQJCQAIACwAAAAAEAAFAIO8urzc3tzc2tz09vTEwsT8/vy8vrz8+vz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAEIhBJWc6wJZAtJh3gcRBAaXiIZV2kiRbgNZbA6VXiUAhGL0QAIfkECQkABgAsAAAAABAABQCChIKEtLa0jIqMvL68jI6MxMLE////AAAAAxRoumxFgoxGCbiANos145e3DJcQJAAh+QQJCQAFACwAAAAAEAAFAIK8urzc2tzEwsS8vrzc3tz///8AAAAAAAADFFi6XCQwtCmAHbPVm9kGWKcEQxkkACH5BAkJAAIALAAAAAAQAAUAgfT29Pz6/P///wAAAAIRlI8SAZsPYnuJMUCRnNksWwAAOw==',
      debug: false
    }, options);

    return this.each(function() {

      var isOnScreen = false; // Initialize boolean
      var scrollTop; // Initialize Vertical Scroll Position
      var scrollLeft; // Initialize Horizontal Scroll Position 
      var $el = $(this); // Matched element
      
      // Initialize Viewport dimensions
      var $container;
      var containerHeight;
      var containerWidth;
      var containerBottom;
      var containerRight;
      
      // Initialize element dimensions & position
      var elHeight;
      var elWidth;
      var elTop;
      var elLeft;

      // Checks if params.container is the Window Object
      var containerIsWindow = $.isWindow(params.container);
      
      function verticalIn() {
        if (containerIsWindow) {
          return elTop < containerBottom - params.tolerance &&
                 scrollTop < (elTop + elHeight) - params.tolerance;
        } else {
          return elTop < containerHeight - params.tolerance &&
                 elTop > (-elHeight) + params.tolerance;
        }
      }

      function verticalOut() {
        if (containerIsWindow) {
          return elTop + (elHeight - params.tolerance) < scrollTop ||
                 elTop > containerBottom - params.tolerance;
        } else {
          return elTop > containerHeight - params.tolerance ||
                 -elHeight + params.tolerance > elTop;
        }
      }
      
      function horizontalIn() {
        if (containerIsWindow) {
          return elLeft < containerRight - params.tolerance &&
                 scrollLeft < (elLeft + elWidth) - params.tolerance;
        } else {
          return elLeft < containerWidth - params.tolerance &&
                 elLeft > (-elWidth) + params.tolerance;
        }
      }
      
      function horizontalOut() {
        if (containerIsWindow) {
          return elLeft + (elWidth - params.tolerance) < scrollLeft ||
                 elLeft > containerRight - params.tolerance;
        } else {
          return elLeft > containerWidth - params.tolerance ||
                 -elWidth + params.tolerance > elLeft;
        }
      }
      
      function directionIn() {
        if (isOnScreen) {
          return false;
        }
        
        if (params.direction === 'horizontal') {
          return horizontalIn();
        } else {
          return verticalIn();
        }
      }
      
      function directionOut() {
        if (!isOnScreen) {
          return false;
        }
        
        if (params.direction === 'horizontal') {
          return horizontalOut();
        } else {
          return verticalOut();
        }
      }

      function throttle(fn, timeout, ctx) {
        var timer, args, needInvoke;
        return function() {
          args = arguments;
          needInvoke = true;
          ctx = ctx || this;
          if(!timer) {
            (function() {
              if(needInvoke) {
                fn.apply(ctx, args);
                needInvoke = false;
                timer = setTimeout(arguments.callee, timeout);
              }
              else {
                timer = null;
              }
            })();
          }

        };

      }
      
      var checkPos = function(){
        // Make container relative
        if (!containerIsWindow && $(params.container).css('position') === 'static') {
          $(params.container).css('position', 'relative');
        }
        
        // Update Viewport dimensions
        $container = $(params.container);
        containerHeight = $container.height();
        containerWidth = $container.width();
        containerBottom = $container.scrollTop() + containerHeight;
        containerRight = $container.scrollLeft() + containerWidth;
        
        // Update element dimensions & position
        elHeight = $el.outerHeight(true);
        elWidth = $el.outerWidth(true);

        if (containerIsWindow) {
          var offset = $el.offset();
          elTop = offset.top;
          elLeft = offset.left;
        } else {
          var position = $el.position();
          elTop = position.top;
          elLeft = position.left;
        }
        
        // Update scroll position
        scrollTop = $container.scrollTop();
        scrollLeft = $container.scrollLeft();

        // This will spam A LOT of messages in your console
        if (params.debug) {
          console.log(
            'Container: ' + params.container + '\n' +
            'Width: ' + containerHeight + '\n' +
            'Height: ' + containerWidth + '\n' +
            'Bottom: ' + containerBottom + '\n' +
            'Right: ' + containerRight
          );
          console.log(
            'Matched element: ' + ($el.attr('class') !== undefined ? $el.prop('tagName').toLowerCase() + '.' + $el.attr('class') : $el.prop('tagName').toLowerCase()) + '\n' +
            'Left: ' + elLeft + '\n' +
            'Top: ' + elTop + '\n' +
            'Width: ' + elWidth + '\n' +
            'Height: ' + elHeight
          );
        }
        
        if (directionIn()) {
          if (params.toggleClass) {
            $el.addClass(params.toggleClass);
          }
          if ($.isFunction(params.doIn)) {
            params.doIn.call($el[0]);
          }
          if (params.lazyAttr && $el.prop('tagName') === 'IMG') {
            var lazyImg = $el.attr(params.lazyAttr);
            if (lazyImg !== $el.prop('src')) {
              $el.css({
                background: 'url(' + params.lazyPlaceholder + ') 50% 50% no-repeat',
                minHeight: '5px',
                minWidth: '16px'
              });

              $el.prop('src',lazyImg).load(function() {
                $(this).css({
                  background: 'none'
                });
              });
            }
          }
          isOnScreen = true;
        } 
        else if (directionOut()) {
          if (params.toggleClass) {
            $el.removeClass(params.toggleClass);
          }
          if ($.isFunction(params.doOut)) {
            params.doOut.call($el[0]);
          }
          isOnScreen = false;
        }
        
      };
      
      if (window.location.hash) {
        throttle(checkPos, 50);
      } else {
        checkPos();
      }
      
      if (params.throttle) {
        checkPos = throttle(checkPos, params.throttle);
      }

      // Attach checkPos
      $(params.container).on('scroll resize', checkPos);

      // Since <div>s don't have a resize event, we have
      // to attach checkPos to the window object as well
      if (!containerIsWindow) {
        $(window).on('resize', checkPos);
      }

      // Module support
      if (typeof module === 'object' && module && typeof module.exports === 'object') {
        // Node.js module pattern
        module.exports = jQuery;
      } else {
        // AMD
        if (typeof define === 'function' && define.amd) {
          define('jquery-onscreen', [], function() { return jQuery; });
        }
      }
      
    });
  };

})(jQuery);