resources/jquery/jquery.appear.js

   1 /*
   2  * jQuery.appear
   3  * http://code.google.com/p/jquery-appear/
   4  *
   5  * Copyright (c) 2009 Michael Hixson
   6  * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
   7 */
   8 (function($) {
   9
  10         $.fn.appear = function(fn, options) {
  11
  12                 var settings = $.extend({
  13
  14                         //arbitrary data to pass to fn
  15                         data: undefined,
  16
  17                         //call fn only on the first appear?
  18                         one: true
  19
  20                 }, options);
  21
  22                 return this.each(function() {
  23
  24                         var t = $(this);
  25
  26                         //whether the element is currently visible
  27                         t.appeared = false;
  28
  29                         if (!fn) {
  30
  31                                 //trigger the custom event
  32                                 t.trigger('appear', settings.data);
  33                                 return;
  34                         }
  35
  36                         var w = $(window);
  37
  38                         //fires the appear event when appropriate
  39                         var check = function() {
  40
  41                                 //is the element hidden?
  42                                 if (!t.is(':visible')) {
  43
  44                                         //it became hidden
  45                                         t.appeared = false;
  46                                         return;
  47                                 }
  48
  49                                 //is the element inside the visible window?
  50                                 var a = w.scrollLeft();
  51                                 var b = w.scrollTop();
  52                                 var o = t.offset();
  53                                 var x = o.left;
  54                                 var y = o.top;
  55
  56                                 if (y + t.height() >= b &&
  57                                                 y <= b + w.height() &&
  58                                                 x + t.width() >= a &&
  59                                                 x <= a + w.width()) {
  60
  61                                         //trigger the custom event
  62                                         if (!t.appeared) t.trigger('appear', settings.data);
  63
  64                                 } else {
  65
  66                                         //it scrolled out of view
  67                                         t.appeared = false;
  68                                 }
  69                         };
  70
  71                         //create a modified fn with some additional logic
  72                         var modifiedFn = function() {
  73
  74                                 //mark the element as visible
  75                                 t.appeared = true;
  76
  77                                 //is this supposed to happen only once?
  78                                 if (settings.one) {
  79
  80                                         //remove the check
  81                                         w.unbind('scroll', check);
  82                                         var i = $.inArray(check, $.fn.appear.checks);
  83                                         if (i >= 0) $.fn.appear.checks.splice(i, 1);
  84                                 }
  85
  86                                 //trigger the original fn
  87                                 fn.apply(this, arguments);
  88                         };
  89
  90                         //bind the modified fn to the element
  91                         if (settings.one) t.one('appear', settings.data, modifiedFn);
  92                         else t.bind('appear', settings.data, modifiedFn);
  93
  94                         //check whenever the window scrolls
  95                         w.scroll(check);
  96
  97                         //check whenever the dom changes
  98                         $.fn.appear.checks.push(check);
  99
 100                         //check now
 101                         (check)();
 102                 });
 103         };
 104
 105         //keep a queue of appearance checks
 106         $.extend($.fn.appear, {
 107
 108                 checks: [],
 109                 timeout: null,
 110
 111                 //process the queue
 112                 checkAll: function() {
 113                         var length = $.fn.appear.checks.length;
 114                         if (length > 0) while (length--) ($.fn.appear.checks[length])();
 115                 },
 116
 117                 //check the queue asynchronously
 118                 run: function() {
 119                         if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
 120                         $.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
 121                 }
 122         });
 123
 124         //run checks when these methods are called
 125         $.each(['append', 'prepend', 'after', 'before', 'attr',
 126                                         'removeAttr', 'addClass', 'removeClass', 'toggleClass',
 127                                         'remove', 'css', 'show', 'hide'], function(i, n) {
 128                 var old = $.fn[n];
 129                 if (old) {
 130                         $.fn[n] = function() {
 131                                 var r = old.apply(this, arguments);
 132                                 $.fn.appear.run();
 133                                 return r;
 134                         }
 135                 }
 136         });
 137
 138 })(jQuery);