From 70feb4b0077c88116e9a6fdbd94811dc0312e4b9 Mon Sep 17 00:00:00 2001 From: Jeroen Fiege Date: Fri, 17 Feb 2012 00:11:02 +0100 Subject: [PATCH] added onLoadItems callback, documentated new callback, added Advanced Usage section to readme --- README.textile | 61 ++++++++++++++++++++++++++++++++++++++++++++++- jquery.ias.js | 22 +++++++++-------- jquery.ias.min.js | 4 ++-- 3 files changed, 74 insertions(+), 13 deletions(-) diff --git a/README.textile b/README.textile index 65a13cb7..fd5ca37e 100644 --- a/README.textile +++ b/README.textile @@ -2,7 +2,7 @@ h1. Infinite Ajax Scroll Turn your paginated pages into infinite scrolling pages with ease. -Version 0.1.2 +Version 0.1.3 Requires jQuery 1.4 or newer. @@ -79,6 +79,65 @@ Example: bc. onPageChange: function(pageNum, pageUrl, scrollOffset) { console.log('Welcome on page ' + pageNum); } +h3. onLoadItems + +*Default:* empty function +Event handler. Is called each time new items are loaded. + +Parameters: + +|*param*|*description*| +|items|array containing the item elements| + +Return value: +When we return false in the callback, we prevent IAS from automatically insert the loaded items. This can be used to manually insert the items. + +Example: + +bc. onLoadItems: function(items) { console.log('We loaded ' + items.length + ' items'); } + +h2. Advanced usage + +h3. Integrating Google Analytics + +You can integrate Google Analytics by using the onPageChange event. Here is an example: + +bc. jQuery.ias({ + container : ".listing", + item: ".post", + pagination: "#content .navigation", + next: ".next-posts a", + loader: "images/loader.gif", + onPageChange: function(pageNum, pageUrl, scrollOffset) { + // This will track a pageview every time the user + // scrolls up or down the screen to a different page. + path = jQuery('').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/'); + _gaq.push(['_trackPageview', path]); + } +}); + +h3. Integrating with jQuery Masonry + +bc. jQuery.ias({ + container : ".listing", + item: ".post", + pagination: "#content .navigation", + next: ".next-posts a", + loader: "images/loader.gif", + onLoadItems: function(items) { + // hide new items while they are loading + var $newElems = $(items).show().css({ opacity: 0 }); + // ensure that images load before adding to masonry layout + $newElems.imagesLoaded(function(){ + // show elems now they're ready + $newElems.animate({ opacity: 1 }); + $('.listing').masonry( 'appended', $newElems, true ); + }); + return true; + } +}); + + h2. Customizing IAS inserts a div element with an image to generate a loader. The div has a class called *ias_loader*. Using this class you can adjust the styling of the loader. diff --git a/jquery.ias.js b/jquery.ias.js index 8f2d3c39..ae8115ce 100644 --- a/jquery.ias.js +++ b/jquery.ias.js @@ -1,6 +1,6 @@ /*! * Infinite Ajax Scroll, a jQuery plugin - * Version v0.1.2 + * Version v0.1.3 * http://webcreate.nl/ * * Copyright (c) 2011 Jeroen Fiege @@ -146,15 +146,16 @@ show_loader(); loadItems(urlNextPage, function(data, items) { - // walk through the items on the next page - // and insert them with a nice fadeIn effect - for(i=0;i1){q(pageNum);curTreshold=g();b("html,body").scrollTop(curTreshold)}else{l()}})}}function l(){j();b(window).scroll(o)}function o(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=g()){m(curScrOffset)}}function r(){b(window).unbind("scroll",o)}function j(){b(c.pagination).hide()}function g(){el=b(c.container).find(c.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();return treshold}function m(v,u){urlNextPage=b(c.next).attr("href");if(!urlNextPage){return r()}d.pushPages(v,urlNextPage);r();p();f(urlNextPage,function(y,w){for(i=0;i0){m(curTreshold,function(){r();if((d.getCurPageNum(curTreshold)+1)");loader.hide()}return loader}function p(u){loader=k();el=b(c.container).find(c.item).last();el.after(loader);loader.fadeIn()}function e(){loader=k();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",item:".item",pagination:"#pagination",next:".next",onPageChange:function(){}};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){hash=(g.page>0?"#/page/"+g.page:"");history.pushState({ias:g},h,hash)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){hash=(g.page>0?"#/page/"+g.page:"");history.replaceState({ias:g},h,hash)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}}}})(jQuery); \ No newline at end of file +(function(b){b.ias=function(t){var c=b.extend({},b.ias.defaults,t);var h=new b.ias.util();var d=new b.ias.paging();var n=new b.ias.history();s();function s(){d.onChangePage(function(w,u,v){n.setPage(w,v);c.onPageChange.call(this,w,v,u)});l();if(n.havePage()){r();pageNum=n.getPage();h.forceScrollTop(function(){if(pageNum>1){q(pageNum);curTreshold=g();b("html,body").scrollTop(curTreshold)}else{l()}})}}function l(){j();b(window).scroll(o)}function o(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=g()){m(curScrOffset)}}function r(){b(window).unbind("scroll",o)}function j(){b(c.pagination).hide()}function g(){el=b(c.container).find(c.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();return treshold}function m(v,u){urlNextPage=b(c.next).attr("href");if(!urlNextPage){return r()}d.pushPages(v,urlNextPage);r();p();f(urlNextPage,function(x,w){result=c.onLoadItems.call(this,w);if(result!==false){b(w).hide();curLastItem=b(c.container).find(c.item).last();curLastItem.after(w);b(w).fadeIn()}b(c.pagination).replaceWith(b(c.pagination,x));e();l();if(u){u.call(this)}})}function f(v,w){var u=[];b.get(v,null,function(x){b(c.container,x).find(c.item).each(function(){u.push(this)});if(w){w.call(this,x,u)}},"html")}function q(u){curTreshold=g();if(curTreshold>0){m(curTreshold,function(){r();if((d.getCurPageNum(curTreshold)+1)");loader.hide()}return loader}function p(u){loader=k();el=b(c.container).find(c.item).last();el.after(loader);loader.fadeIn()}function e(){loader=k();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",item:".item",pagination:"#pagination",next:".next",onPageChange:function(){},onLoadItems:function(){},};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){hash=(g.page>0?"#/page/"+g.page:"");history.pushState({ias:g},h,hash)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){hash=(g.page>0?"#/page/"+g.page:"");history.replaceState({ias:g},h,hash)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}}}})(jQuery); \ No newline at end of file