Jump to content

Using infinite scroll on multiple pages?


man5

Recommended Posts

 

okay, you already have a method/function - scrollPagination() that has parameters defined that tell each instance of it how it should behave. that this code has the url where it's going to make the ajax request to hard coded and buried in the javascript.js file isn't helping (the code is not general purpose now, making it harder than it should be to customize.) since the code in javascript.js is supposed to be defining a jquery plug-in, it should have been written completely configurable so that you don't have to touch the code in it at all and everything it does should be definable in the page where you use that code.

 

for the purpose of making the 'ajax.php' url a call time parameter/variable, make the following changes to the original index.php and javascript.js files -

 

in index.php, add the url     : 'ajax.php', line (line #5 in the following) -  

<script>
$(document).ready(function() {
    $('#content').scrollPagination({

        url     : 'ajax.php', // url to get data from, via .post method, to add a get parameter, just add it on the end of this
        nop     : 10, // The number of posts per scroll to be loaded
        offset  : 0, // Initial offset, begins at 0 in this case
...

 

in javascript.js, add that same line in the var settings = { block (line #7 in the following) - 

(function($) {

    $.fn.scrollPagination = function(options) {
        
        var settings = {

            url     : 'ajax.php', // url to get data from, via .post method, to add a get parameter, just add it on the end of this url
            nop     : 10, // The number of posts per scroll to be loaded
            offset  : 0, // Initial offset, begins at 0 in this case
...

next, find the line in javascript.js that looks like this - $.post('ajax.php', { and change it to -

$.post($settings.url, {

the above makes the url (ajax.php in the example) a parameter that you can change or add anything to.

 


 

for the usage in the code you posted immediately above this reply, for the index.php page, change the url : .... value to the following (this is the same line #5 in snippet of code from the original index.php that i had you change as the first step in this process, all you are doing now is making it into the url and any get parameters you want the code to use) -

        url     : 'autoload.php?page=index',

for the food page, use this for that line -

        url     : 'autoload.php?page=food',

 

 

Hi mac_gyver,

 

This is brilliant!!!  It works like a charm. Thank you so much!

 

I only have one other question. Say I have one <head></head> that applies to the entire website, is there a more efficient/compressed way to call the 'url' in the body section, as oppose to pasting this entire code?

<script type="text/javascript">
		$(document).ready(function() {

			$('#results').scrollPagination({

				url     : 'autoload.php?page=food', // url to get data from, via .post method, to add a get parameter, just add it on the end of this url
				nop     : 7, // The number of posts per scroll to be loaded
				offset  : 0, // Initial offset, begins at 0 in this case
				error   : 'No More Posts!', // When the user reaches the end this is the message that is
											// displayed. You can change this if you want.
				delay   : 500, // When you scroll down the posts will load after a delayed amount of time.
							   // This is mainly for usability concerns. You can alter this as you see fit
				scroll  : true // The main bit, if set to false posts will not load as the user scrolls. 
							   // but will still load if the user clicks.
				
			});
			
		});
	</script>
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.