Skip to content

Commit

Permalink
Re-implemented infinitescroll working within containers as well
Browse files Browse the repository at this point in the history
as the entire window (issue 12).
Updated original multi instance method to automatically generate
instance ID's and modified all demos' to reflect this (issue 16).
samcleaver committed Jan 6, 2011
1 parent dc055fd commit 5bc2c84
Showing 9 changed files with 203 additions and 63 deletions.
2 changes: 1 addition & 1 deletion README
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ the jQuery and Wordpress Plugins

jQuery Plugin:
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
currently: version 1.5.100504
currently: version 1.5.110106

Wordpress Plugin:
http://www.infinite-scroll.com/installation/
107 changes: 69 additions & 38 deletions jquery.infinitescroll.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*!
// Infinite Scroll jQuery plugin
// copyright Paul Irish, licensed GPL & MIT
// version 1.5.101207
// version 1.5.110106
// home and docs: http://www.infinite-scroll.com
*/
@@ -70,21 +70,44 @@
opts.isFiltered = true;
return $(window).trigger( "error.infscr."+opts.infid, [302] );
}

// Calculate internal height (used for local scroll)
function hiddenHeight(element)
{
var height = 0;
$(element).children().each(function() {
height = height + $(this).outerHeight(false);
});
return height;
}
//Generate InstanceID based on random data (to give consistent but different ID's)
function generateInstanceID(element)
{
var number = $(element).length + $(element).html().length + $(element).attr("class").length
+ $(element).attr("id").length;
opts.infid = number;
}
function isNearBottom(){

// distance remaining in the scroll
// distance remaining in the scroll
// computed as: document height - distance already scroll - viewport height - buffer
var pixelsFromWindowBottomToBottom = 0
if(opts.container.nodeName=="HTML")
{
var pixelsFromWindowBottomToBottom = 0
+ $(document).height()
// have to do this bs because safari doesnt report a scrollTop on the html element
- ($(props.container).scrollTop() || $(props.container.ownerDocument.body).scrollTop())
- $(window).height();
- ($(opts.container).scrollTop() || $(opts.container.ownerDocument.body).scrollTop())
- $(window).height();
}
else
{
var pixelsFromWindowBottomToBottom = 0
+ hiddenHeight(opts.container) - $(opts.container).scrollTop() - $(opts.container).height();

}

debug('math:', pixelsFromWindowBottomToBottom, props.pixelsFromNavToBottom);
debug('math:', pixelsFromWindowBottomToBottom, opts.pixelsFromNavToBottom);

// if distance remaining in the scroll (including buffer) is less than the orignal nav to bottom....
return (pixelsFromWindowBottomToBottom - opts.bufferPx < props.pixelsFromNavToBottom);
return (pixelsFromWindowBottomToBottom - opts.bufferPx < opts.pixelsFromNavToBottom);
}

function showDoneMsg(){
@@ -100,11 +123,9 @@
}

function infscrSetup(){

if (opts.isDuringAjax || opts.isInvalidPage || opts.isDone || opts.isFiltered || opts.isPaused) return;

if ( !isNearBottom(opts,props) ) return;

if ( !isNearBottom(opts,props) ) return ;
$(document).trigger('retrieve.infscr.'+opts.infid);

} // end of infscrSetup()
@@ -138,15 +159,15 @@
} else {
desturl = path.join( opts.currPage );
}

box.load( desturl + ' ' + opts.itemSelector,null,loadCallback);

});

}

function loadCallback(){
// if we've hit the last page...
// if we've hit the last page..

if (opts.isDone){
showDoneMsg();
return false;
@@ -158,14 +179,13 @@
// if it didn't return anything
if (children.length == 0 || children.hasClass('error404')){
// trigger a 404 error so we can quit.
return $(window).trigger( "error.infscr."+opts.infid, [404] );
return infscrError([404]);
}

// use a documentFragment because it works when content is going into a table or UL
while (box[0].firstChild){
frag.appendChild( box[0].firstChild );
}

$(opts.contentSelector)[0].appendChild(frag);

// fadeout currently makes the <em>'d text ugly in IE6
@@ -198,7 +218,6 @@
debug('Paused: ' + opts.isPaused);
return false;
}

function infscrError(xhr){
if (!opts.isDone && xhr == 404) {
// die if we're out of pages.
@@ -230,16 +249,17 @@
var opts = $.extend({}, $.infinitescroll.defaults, options),
props = $.infinitescroll, // shorthand
box, frag, desturl, thisPause, errorStatus;

callback = callback || function(){};
if (!areSelectorsValid(opts)){ return false; }

props.container = document.documentElement;
opts.container = opts.container || document.documentElement;

// contentSelector we'll use for our .load()
opts.contentSelector = opts.contentSelector || this;

// Generate unique instance ID
if(opts.infid==0)
generateInstanceID(opts.contentSelector);
// loadMsgSelector - if we want to place the load message in a specific selector, defaulted to the contentSelector
opts.loadMsgSelector = opts.loadMsgSelector || opts.contentSelector;

@@ -252,24 +272,34 @@

// set the path to be a relative URL from root.
path = determinePath(path);

// distance from nav links to bottom
// computed as: height of the document + top offset of container - top offset of nav link
props.pixelsFromNavToBottom = $(document).height() +
(props.container == document.documentElement ? 0 : $(props.container).offset().top )-
$(opts.navSelector).offset().top;


// define loading msg
props.loadingMsg = $('<div id="infscr-loading" style="text-align: center;"><img alt="Loading..." src="'+
opts.loadingImg+'" /><div>'+opts.loadingText+'</div></div>');
// preload the image
(new Image()).src = opts.loadingImg;


// set up our bindings

// bind scroll handler to element (if its a local scroll) or window
$(window)
//Check if its HTML (window scroll)
if(opts.container.nodeName=="HTML")
{
debug("Window Scroll");
var innerContainerHeight = $(document).height();
var binder = $(window);
}
else
{
debug("Local Scroll");
var innerContainerHeight = hiddenHeight(opts.container);
var binder = $(opts.container);
}
// distance from nav links to bottom
// computed as: height of the document + top offset of container - top offset of nav link
opts.pixelsFromNavToBottom = innerContainerHeight +
(opts.container == document.documentElement ? 0 : $(opts.container).offset().top )-
$(opts.navSelector).offset().top;

// set up our bindings
// bind scroll handler to element (if its a local scroll) or window
binder
.bind('scroll.infscr.'+opts.infid, infscrSetup)
.bind('filter.infscr.'+opts.infid, filterNav)
.bind('error.infscr.'+opts.infid, function(event,errorStatus) { infscrError(errorStatus); })
@@ -288,7 +318,7 @@

$.infinitescroll = {
defaults : {
debug : false,
debug : true,
preload : false,
nextSelector : "div.navigation a:first",
loadingImg : "http://www.infinite-scroll.com/loading.gif",
@@ -304,17 +334,18 @@
pathParse : undefined,
bufferPx : 40,
errorCallback : function(){},
infid : 1, //Sam addition
currPage : 1,
infid : 0, //Instance ID (Generated at setup)
isDuringAjax : false,
isInvalidPage : false,
isFiltered : false,
isDone : false, // for when it goes all the way through the archive.
isPaused : false
isPaused : false,
container : undefined, //If left undefined uses window scroll, set as container for local scroll
pixelsFromNavToBottom : undefined
},
loadingImg : undefined,
loadingMsg : undefined,
container : undefined,
currDOMChunk : null // defined in setup()'s load()
};

49 changes: 47 additions & 2 deletions jquery.infinitescroll.min.js
25 changes: 21 additions & 4 deletions test/test-loadingmsg.html
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@
One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.
</p>

<div style="height: 200px; font-size:15px; overflow:auto;" id="innerscroll">
<div style="height: 200px; font-size:15px; overflow:scroll;" id="innerscroll">
<p>
Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.
</p><p>
@@ -50,9 +50,7 @@
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<a id="innernext" href="test2.html">next page?</a>


</div>
</div>

<p>
Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.
@@ -93,6 +91,25 @@
// selector for the loading message
loadingMsgRevealSpeed : "fast"
// speed at which the loadingText should appear
}, function(){
window.callbackcontext = this;
window.console && console.log('callbackcontext',this,$(this).find('p'))
});
$('#innerscroll').infinitescroll({

navSelector : "a#innernext:last",
// selector for the paged navigation (it will be hidden)
nextSelector : "a#innernext:last",
// selector for the NEXT link (to page 2)
itemSelector : "#body p",
// selector for all items you'll retrieve
loadMsgSelector : "#footer",
// selector for the loading message
loadingMsgRevealSpeed : "fast",
// speed at which the loadingText should appear
container : "#innerscroll"
//What scroller script should monitor (default is $(window))

}, function(){
window.callbackcontext = this;
window.console && console.log('callbackcontext',this,$(this).find('p'))
2 changes: 1 addition & 1 deletion test/test2.html
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@
Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<a id="next" href="test2.html">next page?</a>
<a id="next" href="test3.html">next page?</a>



2 changes: 1 addition & 1 deletion test/test3.html
Original file line number Diff line number Diff line change
@@ -46,7 +46,7 @@
Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<a id="next" href="test2.html">next page?</a>
<a id="next" href="test4.html">next page?</a>



51 changes: 37 additions & 14 deletions test/trigger.html
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@

<style type="text/css">
#container { width: 300px; margin: 0 auto; font-size: 22px; font-family: cambria}
#next { display:block!important; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border: 1px solid #ddd; background: #efefef; text-align: center; font-weight: bold; box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444; text-decoration: none; padding: 5px;}
#next { display:block; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border: 1px solid #ddd; background: #efefef; text-align: center; font-weight: bold; box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444; text-decoration: none; padding: 5px;}
#next:hover { background: #dfdfdf; color: #222;}
</style>
</head>
@@ -53,7 +53,7 @@ <h4><a href="http://www.infinite-scroll.com">&larr; return to infinite-scroll.co
Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<a id="innernext" href="test2.html">next page?</a>
<a id="innernext" href="trigger2.html">next page?</a>


</div>
@@ -66,13 +66,13 @@ <h4><a href="http://www.infinite-scroll.com">&larr; return to infinite-scroll.co
Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>




</div>
<div id="footer">
<a id="next" href="trigger2.html">next page?</a>
<a id="next" href="trigger2.html">next page?</a>
</div>
</div>

@@ -87,27 +87,50 @@ <h4><a href="http://www.infinite-scroll.com">&larr; return to infinite-scroll.co
/* */
$('#body').infinitescroll({

navSelector : "a#next:last",
navSelector : "a#next",
// selector for the paged navigation (it will be hidden)
nextSelector : "a#next:last",
// selector for the NEXT link (to page 2)
itemSelector : "#body p"
itemSelector : "#body p,#body a#next",
// selector for all items you'll retrieve
infid : 1,
//Define instance ID (as we are using manual triggering)
errorCallback : function() {
$('a#next').remove();
}

});

$('#innerscroll').infinitescroll({

navSelector : "a#innernext",
// selector for the paged navigation (it will be hidden)
nextSelector : "a#innernext:last",
// selector for the NEXT link (to page 2)
itemSelector : "#innerscroll p,#innerscroll a#innernext",
// selector for all items you'll retrieve
container : "#innerscroll",
//What scroller script should monitor (default is $(window))
infid : 2,
//Define instance ID (as we are using manual triggering)
errorCallback : function() {
$('a#innernext').remove();
}

});

// kill scroll binding
$(window).unbind('.infscr');

$("#innerscroll").unbind('.infscr');
// hook up the manual click guy.
$('a#next').click(function(){
$(document).trigger('retrieve.infscr');
$('a#next').live("click",function(){
$(document).trigger('retrieve.infscr.1');
return false;
});

// remove the paginator when we're done.
$(document).ajaxError(function(e,xhr,opt){
if (xhr.status == 404) $('a#next').remove();
$('a#innernext').live("click",function(){
$(document).trigger('retrieve.infscr.2');
return false;
});



});
14 changes: 13 additions & 1 deletion test/trigger2.html
Original file line number Diff line number Diff line change
@@ -38,15 +38,27 @@
<div id="body">
<p>
One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.
</p><div style="height: 200px; font-size:15px; overflow:auto;" id="innerscroll">
<p>
Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.
</p><p>
There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.
</p><p>
Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<a id="innernext" href="trigger3.html">next page?</a>


</div><p>
Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.
</p><p>
There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.
</p><p>
Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<a id="next" href="test2.html">next page?</a>
<a id="next" href="trigger3.html">next page?</a>



14 changes: 13 additions & 1 deletion test/trigger3.html
Original file line number Diff line number Diff line change
@@ -38,15 +38,27 @@
<div id="body">
<p>
One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.
</p><div style="height: 200px; font-size:15px; overflow:auto;" id="innerscroll">
<p>
Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.
</p><p>
There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.
</p><p>
Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<a id="innernext" href="trigger4.html">next page?</a>


</div><p>
Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.
</p><p>
There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.
</p><p>
Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.
</p><p>
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<a id="next" href="test2.html">next page?</a>
<a id="next" href="trigger4.html">next page?</a>



0 comments on commit 5bc2c84

Please sign in to comment.