Skip to content

Add json support #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add json support #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8fa0e3d
Facilitate contribution by convert tabs to spaces and fixing indent
jcfr Jan 22, 2013
e0ea569
Extend options structure with 'dataType' and 'onSuccess'
jcfr Jan 22, 2013
04d7403
"contentData" can optionally be a function to allow customization of …
jcfr Jan 22, 2013
e0c8bb5
Change "scrollPagination" from attribute to property
jcfr Jan 22, 2013
8c9d170
Add "startScrollPagination" function
jcfr Jan 22, 2013
6b234d3
Add "force" parameter to "loadContent" method
jcfr Jan 23, 2013
b1a17ac
Prevent additional request from being sent.
jcfr Jan 23, 2013
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
10 changes: 5 additions & 5 deletions democontent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus. </p></li>
 <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Aenean interdum dui vitae purus molestie nec placerat nibh semper. Maecenas ultrices elementum dapibus. Aenean feugiat, metus in mattis mattis, justo nisi dignissim libero, ac volutpat dui nibh quis metus.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
Expand All @@ -14,4 +14,4 @@
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
177 changes: 89 additions & 88 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,104 +1,105 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ScrollPagination</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/scrollpagination.js"></script>
<link href="scrollpagination_demo.css" rel="stylesheet" media="screen" />
<meta name="author" content="Anderson Ferminiano" />
<meta name="keywords" content="jquery, plugin, anderson ferminiano, scroll, pagination, scroll pagination, html5" />
<script type="text/javascript">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ScrollPagination</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/scrollpagination.js"></script>
<link href="scrollpagination_demo.css" rel="stylesheet" media="screen" />
<meta name="author" content="Anderson Ferminiano" />
<meta name="keywords" content="jquery, plugin, anderson ferminiano, scroll, pagination, scroll pagination, html5" />
<script type="text/javascript">
$(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;
});
};
$('#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;
});
};

});
</script>
</head>
<body>
<div id="scrollpaginationdemo">
<div class="about">
</script>
</head>
<body>
<div id="scrollpaginationdemo">
<div class="about">
<h1>jQuery ScrollPagination - <a href="http://www.twitter.com/andferminiano" target="_blank">@andferminiano</a></h1>
<p>Official post in my <a href="http://www.andersonferminiano.com/blog/2012/07/jquery-scroll-pagination/" target="_blank">blog</a></p>
<p>jQuery ScrollPagination plugin has been developed by <a href="http://www.andersonferminiano.com" target="_blank">Anderson Ferminiano</a> for studying purposes, you may use it for free in any project you want, please maintain the credits.</p>

</div>
<div class="about">
<h1>Sources</h1>
</div>
<div class="about">
<h1>Sources</h1>
<p><a href="https://github.com/andferminiano/jquery-scroll-pagination" target="_blank">Github me!</a></p>
<p>Click <a href="jqueryscrollpagination.zip" target="_blank">here</a> to download the full source with demo (.zip format).</p>
</div>
<div class="about">
<h1>Example</h1>
</div>
<div class="about">
<h1>Example</h1>
<textarea readonly="readonly">
$(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();
}
}
});
$(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;
});
};

// 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;
});
};

});
</textarea>
</div>
<ul id="content">
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
<li><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
<li><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
<li><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus. </p></li>
</div>
<ul id="content">
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
<li><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
<li><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
<li><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus. </p></li>
<li><p>Aenean interdum dui vitae purus molestie nec placerat nibh semper. Maecenas ultrices elementum dapibus. Aenean feugiat, metus in mattis mattis, justo nisi dignissim libero, ac volutpat dui nibh quis metus.</p></li>
<li><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
</ul>
<div class="loading" id="loading">Wait a moment... it's loading!</div>
<div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
</div>
</body>
</ul>
<div class="loading" id="loading">Wait a moment... it's loading!</div>
<div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
</div>
</body>
</html>
177 changes: 96 additions & 81 deletions scripts/scrollpagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,102 @@
/*
** Anderson Ferminiano
** [email protected] -- feel free to contact me for bugs or new implementations.
** jQuery ScrollPagination
** 28th/March/2011
** http://andersonferminiano.com/jqueryscrollpagination/
** You may use this script for free, but keep my credits.
** Thank you.
*/
** Anderson Ferminiano
** [email protected] -- feel free to contact me for bugs or new implementations.
** jQuery ScrollPagination
** 28th/March/2011
** http://andersonferminiano.com/jqueryscrollpagination/
** You may use this script for free, but keep my credits.
** Thank you.
*/ (function ($) {

(function( $ ){


$.fn.scrollPagination = function(options) {

var opts = $.extend($.fn.scrollPagination.defaults, options);
var target = opts.scrollTarget;
if (target == null){
target = obj;
}
opts.scrollTarget = target;

return this.each(function() {
$.fn.scrollPagination.init($(this), opts);
});

$.fn.scrollPagination = function (options) {

var opts = $.extend($.fn.scrollPagination.defaults, options);
var target = opts.scrollTarget;
if (target == null) {
target = obj;
}
opts.scrollTarget = target;

return this.each(function () {
$.fn.scrollPagination.init($(this), opts);
});

};

$.fn.startScrollPagination = function () {
return this.each(function () {
$(this).prop('scrollPagination', true).prop('scrollPagination.inprogress', false)
.trigger('scrollPaginationLoadContent');
});
};

$.fn.stopScrollPagination = function(){
return this.each(function() {
$(this).attr('scrollPagination', 'disabled');
});


$.fn.stopScrollPagination = function () {
return this.each(function () {
$(this).prop('scrollPagination', false);
});
};

$.fn.scrollPagination.loadContent = function(obj, opts){
var target = opts.scrollTarget;
var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
if (mayLoadContent){
if (opts.beforeLoad != null){
opts.beforeLoad();
}
$(obj).children().attr('rel', 'loaded');
$.ajax({
type: 'POST',
url: opts.contentPage,
data: opts.contentData,
success: function(data){
$(obj).append(data);
var objectsRendered = $(obj).children('[rel!=loaded]');

if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
},
dataType: 'html'
});
}


$.fn.scrollPagination.loadContent = function (obj, opts, force) {
force = typeof force !== 'undefined' ? force : false;
var target = opts.scrollTarget;
var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
if ((mayLoadContent || force) && !$(obj).prop('scrollPagination.inprogress')) {
$(obj).prop('scrollPagination.inprogress', true);
if (opts.beforeLoad != null) {
opts.beforeLoad();
}
$(obj).children().attr('rel', 'loaded');
contentData = opts.contentData;
if ($.isFunction(contentData)) {
contentData = opts.contentData();
}
$.ajax({
type: 'POST',
url: opts.contentPage,
data: contentData,
success: function (data) {
opts.onSuccess(obj, data);
var objectsRendered = $(obj).children('[rel!=loaded]');
if (opts.afterLoad != null) {
opts.afterLoad(objectsRendered);
}
$(obj).prop('scrollPagination.inprogress', false);
},
dataType: opts.dataType
});
}

};

$.fn.scrollPagination.init = function (obj, opts) {
var target = opts.scrollTarget;

$(obj).bind('scrollPaginationLoadContent', function(force) {
$.fn.scrollPagination.loadContent($(this), opts, force);
});

$(target).scroll(function (event) {
if ($(obj).prop('scrollPagination')) {
$.fn.scrollPagination.loadContent(obj, opts);
} else {
event.stopPropagation();
}
});

$(obj).startScrollPagination();
};

$.fn.scrollPagination.defaults = {
'contentPage': null,
'contentData': {},
'beforeLoad': null,
'afterLoad': null,
'scrollTarget': null,
'heightOffset': 0,
'dataType': 'html',
'onSuccess': function (obj, data) {
$(obj).append(data);
}
};

$.fn.scrollPagination.init = function(obj, opts){
var target = opts.scrollTarget;
$(obj).attr('scrollPagination', 'enabled');

$(target).scroll(function(event){
if ($(obj).attr('scrollPagination') == 'enabled'){
$.fn.scrollPagination.loadContent(obj, opts);
}
else {
event.stopPropagation();
}
});

$.fn.scrollPagination.loadContent(obj, opts);

};

$.fn.scrollPagination.defaults = {
'contentPage' : null,
'contentData' : {},
'beforeLoad': null,
'afterLoad': null ,
'scrollTarget': null,
'heightOffset': 0
};
})( jQuery );
})(jQuery);
Loading