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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
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);