-
Notifications
You must be signed in to change notification settings - Fork 78
/
README
50 lines (43 loc) · 2.74 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Official post in my blog: http://www.andersonferminiano.com/blog/2012/07/jquery-scroll-pagination/
This jQuery Scroll Pagination Plugin was referred by several developer websites as:
http://www.jqueryrain.com/2012/04/best-ajax-jquery-pagination-plugin-tutorial-with-example-demo/
http://designsuperstars.net/10-cool-infinite-scrolling-effects-that-can-enhance-your-websites-navigation/
http://www.webdeveloperjuice.com/2012/05/26/10-aggressively-used-jquery-infinite-scroll-plugins-for-endless-paging/
http://social.technet.microsoft.com/Forums/el-GR/sharepoint2010programming/thread/c00d8727-5a83-437e-b88b-52372623ac57
http://hi.baidu.com/isina/item/a8eaa72d7b8a519eb7326330
http://freebiesdesign.com/infinite-scroll-jquery-plugin/
http://simplythebest.net/scripts/cat/106/Data-handling.html
http://www.htmldrive.net/items/show/1189/Useful-Scroll-Pagination-with-jQuery
http://archive.cnblogs.com/a/2430967/
http://thewebthought.blogspot.com/2012/01/jquery-loading-content-while-user.html
Plugin URL: http://andersonferminiano.com/jqueryscrollpagination/
Example of usage:
$(function(){
$('#content').scrollPagination({
'contentPage': 'democontent.html', // the url you are fetching the results
'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
Thank you for using it!