diff --git a/CHANGELOG b/CHANGELOG index 63167e7..fb8868f 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,5 @@ 0.3.3 IE8 compatibility fix. 0.3.2 Code cleanups. Appear now supports not only jQuery selectors but also raw DOM nodes wrapped in jQuery. 0.3.1 Added "disappear" event. Removed first argument (callback function) from $.fn.appear function. "appear" event is now triggered for each appeared element (before it was triggered only for a first element in selector). +0.3.6 Add ability to set negative offsets +0.3.7 Don't rely anymore on :visible jquery selector \ No newline at end of file diff --git a/README.md b/README.md index 9e98373..e44cf77 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ It implements a custom *appear*/*disappear* events which are fired when an eleme // this element is now outside browser viewport }); -If you want to fire *appear* event for elements which are close to vieport but are not visible yet, you may add data attributes *appear-top-offset* and *appear-left-offset* to DOM nodes. +If you want to fire *appear* event for elements which are close to vieport but are not visible yet, you may add data attributes *appear-top-offset*, *appear-bottom-offset*, *appear-right-offset* and *appear-left-offset* to DOM nodes.
...
# appear will be fired when an element is below browser viewport for 600 or less pixels diff --git a/appear.jquery.json b/appear.jquery.json index 012b4a2..da80ac8 100644 --- a/appear.jquery.json +++ b/appear.jquery.json @@ -7,7 +7,7 @@ "appear", "disappear" ], - "version": "0.3.3", + "version": "0.3.7", "author": { "name": "Andrey Sidorov", "email" : "takandar@gmail.com", diff --git a/jquery.appear.js b/jquery.appear.js index e4558fc..cb016f3 100644 --- a/jquery.appear.js +++ b/jquery.appear.js @@ -6,20 +6,19 @@ * * https://github.com/morr/jquery.appear/ * - * Version: 0.3.3 + * Version: 0.3.7 */ (function($) { - var selectors = []; - - var check_binded = false; - var check_lock = false; - var defaults = { - interval: 250, - force_process: false - } - var $window = $(window); - - var $prior_appeared; + + var selectors = [], + check_binded = false, + check_lock = false, + defaults = { + interval: 250, + force_process: false + }, + $window = $(window), + $prior_appeared; function process() { check_lock = false; @@ -41,20 +40,26 @@ // "appeared" custom filter $.expr[':']['appeared'] = function(element) { var $element = $(element); - if (!$element.is(':visible')) { - return false; + + if ((element.style && element.style.display) || $.css( element, "display" ) === "none") { + return false; } - var window_left = $window.scrollLeft(); - var window_top = $window.scrollTop(); - var offset = $element.offset(); - var left = offset.left; - var top = offset.top; + var window_left = $window.scrollLeft(), + window_top = $window.scrollTop(), + offset = $element.offset(), + left = offset.left, + top = offset.top; + + var bottomOffset = $element.data('appear-bottom-offset') || 0, + topOffset = $element.data('appear-top-offset') || 0, + leftOffset = $element.data('appear-left-offset') || 0, + rightOffset = $element.data('appear-right-offset') || 0; - 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()) { + if (top + $element.height() + bottomOffset >= window_top && + top - topOffset <= window_top + $window.height() && + left + $element.width() + rightOffset >= window_left && + left - leftOffset <= window_left + $window.width()) { return true; } else { return false; diff --git a/package.json b/package.json new file mode 100644 index 0000000..59f245d --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "jquery.appear", + "title": "jQuery Appear", + "description": "It implements a custom 'appear'/'disappear' events which are fired when an element became visible/invisible in the browser view port.", + "keywords": [ + "event", + "appear", + "disappear" + ], + "version": "0.3.7", + "main": "jquery.appear.js", + "licenses": "MIT", + "dependencies": { + "jquery": ">=1.5" + } +} \ No newline at end of file