Skip to content

Instantly share code, notes, and snippets.

@karlazz
Created March 25, 2013 23:08
Show Gist options
  • Save karlazz/5241734 to your computer and use it in GitHub Desktop.
Save karlazz/5241734 to your computer and use it in GitHub Desktop.
Make a finite scroll with Ajax. Not great but does the trick.
/* Finite scroll functions */
jQuery('.nextpage').click(function(){
var nextpageno=$('.nextpageno:last').html(); /* write this element with php into div, kind of hinky */
if (nextpageno>0) {
$('.inside').append($(document.createElement("div")).load('<?php echo $nextpagelink."/"?>' + nextpageno + ' .inside-left') );
}
});
jQuery(document).ajaxSend(function(event, request, settings) {
$('.nextpage').css("display","none");
$('.loadimg').css("display","inline-block");
});
jQuery(document).ajaxComplete(function(event, request, settings) {
$('.nextpage').css("display",function() {
var nextpageno=$('.nextpageno:last').html();
if (nextpageno==0) return "none"; else return "inline-block";}
);
$('.loadimg').css("display","none");
// $.scrollTo('.inside-left:last',400);
});
</script>
@karlazz
Copy link
Author

karlazz commented May 6, 2013

/* NOTES
-- the click bar is in a div with class="nextpage".
-- the div with class="iq-inside" will get appended to with the content in the class="iq-inside-left" from the loaded page
-- the load requires a URL which is built in the php from $nextpagelink. It just needs to look like "/mypage".
-- nextpageno is the value of the html in a div with class="nextpageno". It gets parsed and used to set the post offset for the query. It gets calculated by php.

-- there is an image file for .loadimg, it is a swirly gif.

-- basically, ajax just loads the same page over and over, but each time wordpress puts in new content based on the query.

*/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment