From 8fa0e3d4c5218543abd0de9e3b0581080f82f584 Mon Sep 17 00:00:00 2001 From: Jean-Christophe Fillion-Robin Date: Tue, 22 Jan 2013 09:22:36 -0500 Subject: [PATCH 1/7] Facilitate contribution by convert tabs to spaces and fixing indent --- democontent.html | 10 +- index.html | 177 ++++++++++++++++++------------------ scripts/scrollpagination.js | 159 ++++++++++++++++---------------- scrollpagination_demo.css | 103 +++++++++++---------- 4 files changed, 223 insertions(+), 226 deletions(-) diff --git a/democontent.html b/democontent.html index 3cc8cc3..01108e0 100644 --- a/democontent.html +++ b/democontent.html @@ -1,7 +1,7 @@ -

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas.

    • -

  • Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod.

    • -

  • 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.

    • -

  • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.

    • +

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas.

    • +

  • Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod.

    • +

  • 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.

    • +

  • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.

  • 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.

  • Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.

  • Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.

    • @@ -14,4 +14,4 @@

  • Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.

  • Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.

  • Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.

    • -

  • Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.

    • \ No newline at end of file +

  • Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.

    • diff --git a/index.html b/index.html index 0fda19c..f756764 100644 --- a/index.html +++ b/index.html @@ -1,104 +1,105 @@  - - -jQuery ScrollPagination - - - - - - + + + + + - - -
    -
    + + + +
    +

    jQuery ScrollPagination - @andferminiano

    Official post in my blog

    jQuery ScrollPagination plugin has been developed by Anderson Ferminiano for studying purposes, you may use it for free in any project you want, please maintain the credits.

    - -
    -
    -

    Sources

    +
    +
    +

    Sources

    Github me!

    Click here to download the full source with demo (.zip format).

    -
    -
    -

    Example

    +
    +
    +

    Example

    -
    -
      -

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas.

      • -

    • Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod.

      • -

    • 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.

      • -

    • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.

      • +
    +
      +

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas.

      • +

    • Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod.

      • +

    • 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.

      • +

    • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.

    • 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.

    • Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.

      • -
    -
    Wait a moment... it's loading!
    -
    Sorry, no more results for your pagination demo.
    -
    - + +
    Wait a moment... it's loading!
    +
    Sorry, no more results for your pagination demo.
    +
    + diff --git a/scripts/scrollpagination.js b/scripts/scrollpagination.js index 0385759..3bfa606 100644 --- a/scripts/scrollpagination.js +++ b/scripts/scrollpagination.js @@ -1,87 +1,84 @@ /* -** Anderson Ferminiano -** contato@andersonferminiano.com -- 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 + ** contato@andersonferminiano.com -- 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.stopScrollPagination = function(){ - return this.each(function() { - $(this).attr('scrollPagination', 'disabled'); - }); - + + $.fn.stopScrollPagination = function () { + return this.each(function () { + $(this).attr('scrollPagination', 'disabled'); + }); + }; - - $.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) { + 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.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 }; - - $.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 ); \ No newline at end of file +})(jQuery); diff --git a/scrollpagination_demo.css b/scrollpagination_demo.css index 493ae90..d3f784d 100644 --- a/scrollpagination_demo.css +++ b/scrollpagination_demo.css @@ -1,77 +1,76 @@ body { - margin:20px 0px 20px 0px; - padding:0px; - background:#493333; - color:#e4e4e4; - font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; - + margin:20px 0px 20px 0px; + padding:0px; + background:#493333; + color:#e4e4e4; + font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } .about { - background:#d6d6c7; - color:#303030; - font-size:14px; - width:600px; - margin:10px auto; - border-radius:15px; - padding:5px 10px; + background:#d6d6c7; + color:#303030; + font-size:14px; + width:600px; + margin:10px auto; + border-radius:15px; + padding:5px 10px; } .about h1 { - font-size:29px; - margin:5px; - padding:0px; - color:#352828; + font-size:29px; + margin:5px; + padding:0px; + color:#352828; } .about a { - color:#352828; + color:#352828; } .about textarea { - width:500px; - border:0px; - border-left:40px solid #493333; - background:#c6c6aa; - padding:10px 10px 10px 20px; - margin:0px auto; - display:block; - color:#000 !important; - font-family:Arial, Helvetica, sans-serif; - font-size:14px; - height:600px; - overflow:hidden; + width:500px; + border:0px; + border-left:40px solid #493333; + background:#c6c6aa; + padding:10px 10px 10px 20px; + margin:0px auto; + display:block; + color:#000 !important; + font-family:Arial, Helvetica, sans-serif; + font-size:14px; + height:600px; + overflow:hidden; } #scrollpaginationdemo { - width:600px; - margin:0px auto; + width:600px; + margin:0px auto; } #scrollpaginationdemo ul { - list-style:none; - width:100%; - margin:0px auto; - padding:0px; + list-style:none; + width:100%; + margin:0px auto; + padding:0px; } #scrollpaginationdemo ul li { - margin:10px 0px; - width:100%; - background:#352828; - padding:5px 10px; - border-radius: 15px; - text-shadow: 2px 1px -1px #000000; + margin:10px 0px; + width:100%; + background:#352828; + padding:5px 10px; + border-radius: 15px; + text-shadow: 2px 1px -1px #000000; } .loading { - background:#c1c39a; - color:#303030; - font-size:20px; - padding:5px 10px; - text-align:center; - width:450px; - margin:0px auto; - display:none; - border-radius: 5px; -} \ No newline at end of file + background:#c1c39a; + color:#303030; + font-size:20px; + padding:5px 10px; + text-align:center; + width:450px; + margin:0px auto; + display:none; + border-radius: 5px; +} From e0ea569afaa61320de6af73d75bd5616f57391ae Mon Sep 17 00:00:00 2001 From: Jean-Christophe Fillion-Robin Date: Tue, 22 Jan 2013 09:28:18 -0500 Subject: [PATCH 2/7] Extend options structure with 'dataType' and 'onSuccess' --- scripts/scrollpagination.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/scripts/scrollpagination.js b/scripts/scrollpagination.js index 3bfa606..f8e2955 100644 --- a/scripts/scrollpagination.js +++ b/scripts/scrollpagination.js @@ -44,14 +44,14 @@ url: opts.contentPage, data: opts.contentData, success: function (data) { - $(obj).append(data); + opts.onSuccess(obj, data); var objectsRendered = $(obj).children('[rel!=loaded]'); if (opts.afterLoad != null) { opts.afterLoad(objectsRendered); } }, - dataType: 'html' + dataType: opts.dataType }); } @@ -79,6 +79,10 @@ 'beforeLoad': null, 'afterLoad': null, 'scrollTarget': null, - 'heightOffset': 0 + 'heightOffset': 0, + 'dataType': 'html', + 'onSuccess': function (obj, data) { + $(obj).append(data); + } }; })(jQuery); From 04d74035a8e19e5179b7c78ce318d338db9fd24d Mon Sep 17 00:00:00 2001 From: Jean-Christophe Fillion-Robin Date: Tue, 22 Jan 2013 09:30:08 -0500 Subject: [PATCH 3/7] "contentData" can optionally be a function to allow customization of request params --- scripts/scrollpagination.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scripts/scrollpagination.js b/scripts/scrollpagination.js index f8e2955..382e8f7 100644 --- a/scripts/scrollpagination.js +++ b/scripts/scrollpagination.js @@ -39,10 +39,14 @@ opts.beforeLoad(); } $(obj).children().attr('rel', 'loaded'); + contentData = opts.contentData; + if ($.isFunction(contentData)) { + contentData = opts.contentData(); + } $.ajax({ type: 'POST', url: opts.contentPage, - data: opts.contentData, + data: contentData, success: function (data) { opts.onSuccess(obj, data); var objectsRendered = $(obj).children('[rel!=loaded]'); From e0c8bb52c8c63ed98c546fbbdd2a8c72273bb75f Mon Sep 17 00:00:00 2001 From: Jean-Christophe Fillion-Robin Date: Tue, 22 Jan 2013 09:36:23 -0500 Subject: [PATCH 4/7] Change "scrollPagination" from attribute to property Using property allows to simplify the code by considering the associated value as a boolean instead of string. See http://api.jquery.com/prop/ --- scripts/scrollpagination.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/scripts/scrollpagination.js b/scripts/scrollpagination.js index 382e8f7..f6bb093 100644 --- a/scripts/scrollpagination.js +++ b/scripts/scrollpagination.js @@ -26,9 +26,8 @@ $.fn.stopScrollPagination = function () { return this.each(function () { - $(this).attr('scrollPagination', 'disabled'); + $(this).prop('scrollPagination', false); }); - }; $.fn.scrollPagination.loadContent = function (obj, opts) { @@ -50,7 +49,6 @@ success: function (data) { opts.onSuccess(obj, data); var objectsRendered = $(obj).children('[rel!=loaded]'); - if (opts.afterLoad != null) { opts.afterLoad(objectsRendered); } @@ -63,10 +61,10 @@ $.fn.scrollPagination.init = function (obj, opts) { var target = opts.scrollTarget; - $(obj).attr('scrollPagination', 'enabled'); + $(this).prop('scrollPagination', true); $(target).scroll(function (event) { - if ($(obj).attr('scrollPagination') == 'enabled') { + if ($(obj).prop('scrollPagination')) { $.fn.scrollPagination.loadContent(obj, opts); } else { event.stopPropagation(); From 8c9d170195095fb4ba0ba183128091731a68856c Mon Sep 17 00:00:00 2001 From: Jean-Christophe Fillion-Robin Date: Tue, 22 Jan 2013 09:37:58 -0500 Subject: [PATCH 5/7] Add "startScrollPagination" function This is particularly useful when developing ajax based application --- scripts/scrollpagination.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/scripts/scrollpagination.js b/scripts/scrollpagination.js index f6bb093..9e7f10d 100644 --- a/scripts/scrollpagination.js +++ b/scripts/scrollpagination.js @@ -24,6 +24,12 @@ }; + $.fn.startScrollPagination = function () { + return this.each(function () { + $(this).prop('scrollPagination', true).trigger('scrollPaginationLoadContent'); + }); + }; + $.fn.stopScrollPagination = function () { return this.each(function () { $(this).prop('scrollPagination', false); @@ -61,7 +67,10 @@ $.fn.scrollPagination.init = function (obj, opts) { var target = opts.scrollTarget; - $(this).prop('scrollPagination', true); + + $(obj).bind('scrollPaginationLoadContent', function () { + $.fn.scrollPagination.loadContent($(this), opts); + }); $(target).scroll(function (event) { if ($(obj).prop('scrollPagination')) { @@ -71,8 +80,7 @@ } }); - $.fn.scrollPagination.loadContent(obj, opts); - + $(obj).startScrollPagination(); }; $.fn.scrollPagination.defaults = { From 6b234d39d1ce45d027e8f0055759979c897ff656 Mon Sep 17 00:00:00 2001 From: Jean-Christophe Fillion-Robin Date: Tue, 22 Jan 2013 21:36:36 -0500 Subject: [PATCH 6/7] Add "force" parameter to "loadContent" method This allow to load some element independently of the scrollbar. --- scripts/scrollpagination.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/scripts/scrollpagination.js b/scripts/scrollpagination.js index 9e7f10d..5bd0f51 100644 --- a/scripts/scrollpagination.js +++ b/scripts/scrollpagination.js @@ -36,10 +36,11 @@ }); }; - $.fn.scrollPagination.loadContent = function (obj, opts) { + $.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) { + if (mayLoadContent || force) { if (opts.beforeLoad != null) { opts.beforeLoad(); } @@ -68,8 +69,8 @@ $.fn.scrollPagination.init = function (obj, opts) { var target = opts.scrollTarget; - $(obj).bind('scrollPaginationLoadContent', function () { - $.fn.scrollPagination.loadContent($(this), opts); + $(obj).bind('scrollPaginationLoadContent', function(force) { + $.fn.scrollPagination.loadContent($(this), opts, force); }); $(target).scroll(function (event) { From b1a17ace3133642f0827f592a7e878b217334d85 Mon Sep 17 00:00:00 2001 From: Jean-Christophe Fillion-Robin Date: Tue, 22 Jan 2013 23:55:05 -0500 Subject: [PATCH 7/7] Prevent additional request from being sent. See issue #2 --- scripts/scrollpagination.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/scripts/scrollpagination.js b/scripts/scrollpagination.js index 5bd0f51..41bfbd8 100644 --- a/scripts/scrollpagination.js +++ b/scripts/scrollpagination.js @@ -26,7 +26,8 @@ $.fn.startScrollPagination = function () { return this.each(function () { - $(this).prop('scrollPagination', true).trigger('scrollPaginationLoadContent'); + $(this).prop('scrollPagination', true).prop('scrollPagination.inprogress', false) + .trigger('scrollPaginationLoadContent'); }); }; @@ -40,7 +41,8 @@ force = typeof force !== 'undefined' ? force : false; var target = opts.scrollTarget; var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height(); - if (mayLoadContent || force) { + if ((mayLoadContent || force) && !$(obj).prop('scrollPagination.inprogress')) { + $(obj).prop('scrollPagination.inprogress', true); if (opts.beforeLoad != null) { opts.beforeLoad(); } @@ -59,6 +61,7 @@ if (opts.afterLoad != null) { opts.afterLoad(objectsRendered); } + $(obj).prop('scrollPagination.inprogress', false); }, dataType: opts.dataType });