/* * jQuery appear plugin * * Copyright (c) 2012 Andrey Sidorov * licensed under MIT license. * * https://github.com/morr/jquery.appear/ * * Version: 0.3.3 */ (function($) { var selectors = []; var check_binded = false; var check_lock = false; var defaults = { interval: 250, force_process: false } var $window = $(window); var $prior_appeared; function process() { check_lock = false; for (var index = 0; index < selectors.length; index++) { var $appeared = $(selectors[index]).filter(function() { return $(this).is(':appeared'); }); $appeared.trigger('appear', [$appeared]); if ($prior_appeared) { var $disappeared = $prior_appeared.not($appeared); $disappeared.trigger('disappear', [$disappeared]); } $prior_appeared = $appeared; } } // "appeared" custom filter $.expr[':']['appeared'] = function(element) { var $element = $(element); if (!$element.is(':visible')) { return false; } var window_left = $window.scrollLeft(); var window_top = $window.scrollTop(); var offset = $element.offset(); var left = offset.left; var top = offset.top; if (top + $element.height() >= window_top && top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() && left + $element.width() >= window_left && left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) { return true; } else { return false; } } $.fn.extend({ // watching for element's appearance in browser viewport appear: function(options) { var opts = $.extend({}, defaults, options || {}); var selector = this.selector || this; if (!check_binded) { var on_check = function() { if (check_lock) { return; } check_lock = true; setTimeout(process, opts.interval); }; $(window).scroll(on_check).resize(on_check); check_binded = true; } if (opts.force_process) { setTimeout(process, opts.interval); } selectors.push(selector); return $(selector); } }); $.extend({ // force elements's appearance check force_appear: function() { if (check_binded) { process(); return true; }; return false; } }); })(jQuery); (function($) { $.fn.appear1 = function(fn, options) { var settings = $.extend({ //arbitrary data to pass to fn data: undefined, //call fn only on the first appear? one: true, // X & Y accuracy accX: 0, accY: 0 }, options); return this.each(function() { var t = $(this); //whether the element is currently visible t.appeared = false; if (!fn) { //trigger the custom event t.trigger('appear1', settings.data); return; } var w = $(window); //fires the appear event when appropriate var check = function() { //is the element hidden? if (!t.is(':visible')) { //it became hidden t.appeared = false; return; } //is the element inside the visible window? var a = w.scrollLeft(); var b = w.scrollTop(); var o = t.offset(); var x = o.left; var y = o.top; var ax = settings.accX; var ay = settings.accY; var th = t.height(); var wh = w.height(); var tw = t.width(); var ww = w.width(); if (y + th + ay >= b && y <= b + wh + ay && x + tw + ax >= a && x <= a + ww + ax) { //trigger the custom event if (!t.appeared) t.trigger('appear1', settings.data); } else { //it scrolled out of view t.appeared = false; } }; //create a modified fn with some additional logic var modifiedFn = function() { //mark the element as visible t.appeared = true; //is this supposed to happen only once? if (settings.one) { //remove the check w.unbind('scroll', check); var i = $.inArray(check, $.fn.appear.checks); if (i >= 0) $.fn.appear.checks.splice(i, 1); } //trigger the original fn fn.apply(this, arguments); }; //bind the modified fn to the element if (settings.one) t.one('appear1', settings.data, modifiedFn); else t.bind('appear1', settings.data, modifiedFn); //check whenever the window scrolls w.scroll(check); //check whenever the dom changes $.fn.appear1.checks.push(check); //check now (check)(); }); }; //keep a queue of appearance checks $.extend($.fn.appear1, { checks: [], timeout: null, //process the queue checkAll: function() { var length = $.fn.appear1.checks.length; if (length > 0) while (length--) ($.fn.appear1.checks[length])(); }, //check the queue asynchronously run: function() { if ($.fn.appear1.timeout) clearTimeout($.fn.appear1.timeout); $.fn.appear1.timeout = setTimeout($.fn.appear1.checkAll, 20); } }); })(jQuery);