Skip to content
This repository has been archived by the owner on Nov 10, 2017. It is now read-only.

fades elements in #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fades elements in #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.rdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ This is determined by handing back an empty response from the server. Once this
container:
default: document
This is the container used to measure scrolling, and then trigger a load
fade:
default: 'none'
Speed at which new data will smoothly fade in after appending. eg 'fast', 'slow', 250, 1000 (numbers in milliseconds). Set to 'none' or 0 to have results appear without a fade.

=== Events

Expand Down
114 changes: 62 additions & 52 deletions jquery.infinitescroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,69 @@
// Infinite Scroll
(function($) {
$.fn.infinitescroll = function(options) {
return $(this).each(function() {
var el = $(this);
var settings = $.extend({
url: null,
triggerAt: 300,
page: 2,
appendTo: '.list tbody',
container: $(document)
}, options);
var req = null;
var maxReached = false;
$.fn.infinitescroll = function(options) {
return $(this).each(function() {
var el = $(this);
var settings = $.extend({
url: null,
triggerAt: 300,
page: 2,
appendTo: '.list tbody',
fade: 'none',
container: $(document)
}, options);
var req = null;
var maxReached = false;

var infinityRunner = function() {
if (settings.url !== null) {
if (settings.force || (settings.triggerAt >= (settings.container.height() - el.height() - el.scrollTop()))) {
settings.force = false;
// if the request is in progress, exit and wait for it to finish
if (req && req.readyState < 4 && req.readyState > 0) {
return;
}
$(settings.appendTo).trigger('infinitescroll.beforesend');
req = $.get(settings.url, 'page='+settings.page, function(data) {
if (data !== '') {
if (settings.page > 1) {
$(settings.appendTo).append(data);
} else {
$(settings.appendTo).html(data);
}
settings.page++;
$(settings.appendTo).trigger('infinitescroll.finish');
} else {
maxReached = true;
$(settings.appendTo).trigger('infinitescroll.maxreached');
}
}, 'html');
}
var infinityRunner = function() {
if (settings.url !== null) {
if (settings.force || (settings.triggerAt >= (settings.container.height() - el.height() - el.scrollTop()))) {
settings.force = false;
// if the request is in progress, exit and wait for it to finish
if (req && req.readyState < 4 && req.readyState > 0) {
return;
}
$(settings.appendTo).trigger('infinitescroll.beforesend');
req = $.get(settings.url, 'page='+settings.page, function(data) {
if (data !== '') {

var elements = $(data);
if (settings.page > 1) {
$(settings.appendTo).append(elements);
} else {
$(settings.appendTo).html(elements);
}
};

el.bind('infinitescroll.scrollpage', function(e, page) {
settings.page = page;
settings.force = true;
infinityRunner();
});

el.scroll(function(e) {
if (!maxReached) {
infinityRunner();

// hide, then fade in elements if fade is configured
if (settings.fade !== 'none' || settings.fade !== null) {
elements.css('display', 'none'); // hide() throws an error :/ ?
elements.fadeIn(settings.fade);
}
});

settings.page++;
$(settings.appendTo).trigger('infinitescroll.finish');
} else {
maxReached = true;
$(settings.appendTo).trigger('infinitescroll.maxreached');
}
}, 'html');
}
}
};

el.bind('infinitescroll.scrollpage', function(e, page) {
settings.page = page;
settings.force = true;
infinityRunner();
});

el.scroll(function(e) {
if (!maxReached) {
infinityRunner();
}
});

// Test initial page layout for trigger
infinityRunner();
});
};
// Test initial page layout for trigger
infinityRunner();
});
};
})(jQuery);