Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 94 additions & 77 deletions jquery.appear.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/*jslint browser:true, devel:true, sloppy:true */
/*global jQuery */

/*
* jQuery appear plugin
*
Expand All @@ -8,94 +11,108 @@
*
* Version: 0.3.3
*/
(function($) {
var selectors = [];
(function ($) {
var selectors = [],
check_binded = false,
check_lock = false,
defaults = {
"interval": 250,
"force_process": false
},
$window = $(window),
$prior_appeared;

var check_binded = false;
var check_lock = false;
var defaults = {
interval: 250,
force_process: false
}
var $window = $(window);
function process() {
var index,
length = selectors.length,
$appeared,
$disappeared;

var $prior_appeared;
check_lock = false;

function isAppeared() {
return $(this).is(':appeared');
}

function process() {
check_lock = false;
for (var index = 0; index < selectors.length; index++) {
var $appeared = $(selectors[index]).filter(function() {
return $(this).is(':appeared');
});
for (index = 0; index < length; index += 1) {
$appeared = $(selectors[index]).filter(isAppeared);

$appeared.trigger('appear', [$appeared]);
$appeared.trigger('appear', [$appeared]);

if ($prior_appeared) {
var $disappeared = $prior_appeared.not($appeared);
$disappeared.trigger('disappear', [$disappeared]);
}
$prior_appeared = $appeared;
if ($prior_appeared) {
$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;
}
// "appeared" custom filter
$.expr[':'].appeared = function (element) {
var $element = $(element),
window_left,
window_top,
offset,
left,
top;

var window_left = $window.scrollLeft();
var window_top = $window.scrollTop();
var offset = $element.offset();
var left = offset.left;
var top = offset.top;
if (!$element.is(':visible')) {
return false;
}
window_left = $window.scrollLeft();
window_top = $window.scrollTop();
offset = $element.offset();
left = offset.left;
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;
}
}
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;
$.fn.extend({
// watching for element's appearance in browser viewport
"appear": function (options) {
var opts,
selector,
on_check;
opts = $.extend({}, defaults, options || {});
selector = this.selector || this;
if (!check_binded) {
on_check = function () {
if (check_lock) {
return;
}
check_lock = true;

setTimeout(process, opts.interval);
};
setTimeout(process, opts.interval);
};

$(window).scroll(on_check).resize(on_check);
check_binded = true;
}
$(window).scroll(on_check).resize(on_check);
check_binded = true;
}

if (opts.force_process) {
setTimeout(process, opts.interval);
}
selectors.push(selector);
return $(selector);
}
});
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);
$.extend({
// force elements's appearance check
"force_appear": function () {
if (check_binded) {
process();
return true;
}
return false;
}
});
}(jQuery));