Smarter Twitter like pagination (SmartScrollingPagination jQuery plugin)

On 01.04.10, In Jquery, by Andrei Gabreanu

I always thought about that button that says “Load more…” because, the user needs to wait when he pressed it. So i thought, since the user cannot jump 9 pages forward, why not preload the next page? So when the user clicks load more, the application would instantly display the next page content, and while the user browses through it, the application loads the next page and so on.

What do we we want to achieve?

One thing i always though would improve the User Experience on Twitter and Facebook was the pagination.

Basically, i always thought about that button that says “Load more…” because, the user needs to wait when he pressed it. So i thought, since the user cannot jump 9 pages forward, why not preload the next page? So when the user clicks load more, the application would instantly display the next page content, and while the user browses through it, the application loads the next page and so on. Since websites like Facebook and Twitter load not too much data per request via the “Load more” button, i assume its pretty safe to preload content.

Smart Scrolling Pagination – A jQuery plugin

So after searching on google for something like this, i thought to myself that i might as well learn how to create a jQuery plugin. And here it is: a very very (really!) simple to use plugin that will help you achieve what Twitter and Facebook should do (in my opinion). The plugin is not perfect, it can be enhanced with more cool stuff, but i believe it is good for a basic usage (until next versions).

How to use

Simply include the jQuery library and the plugin into your page and call it like this:

$(".content").smartPagination({
    url: "result.html",
    button: "load_more_content"
});

where the url is the path to your script that will generate the content to be loaded and button is the id of the element that will trigger the loader when clicked.

Advanced usage (no really)

If you want a list of all the options, here it is:

$(".content_extended").smartPagination({
    url: "result.html",
    parameters : { "isAjax": false },
    method : "get",
    debug : false,
    button : "load_more_content_extended"
});

where parameters is a Json object containing all your parameters to be sent to the url, the method can be either get or post and debug can be either true or false.

If debug is set to true then you will get alerts with each step the plugin does so you can see what happens at any time.

Conclusion

Here is what i plan to do in the near future for this script:

Add options for effects (currently only fadeIn() is supported)
Add options for receiving from the “url” only a Json element and to allow the developer to parse it as he considers
Add options for automatically adding content (at the top or the button) based on the “url” – something like jQuery Spy

If you want more features added to the TODO list then please share them below!

And in the end, if you liked the plugin please share it so everyone can benefit of of it !

http://www.zuup.ro Adrian

This is awesome! thx
http://twitter.com/briljantmartijn martijn

Very nice work. But why use html and not php file. In other words, how do i use this with php files.
http://phpdev.ro/ Andrei Gabreanu

I used HTML strictly to be easy to understand.

To use with a php file, just change the url to point to your php file then just, add parameters as a key / value pair to be sent to the php. Point your container to enable the plugin and your php file should return the content you would like to show (aka an html most likely).

Example:

$(“.my_cool_container”).smartPagination({
url: “my_cool_php_file.php”,
button: “my_button_that_triggers_the_loader”
});
http://twitter.com/briljantmartijn martijn

Very nice work. But why use html and not php file. In other words, how do i use this with php files.
http://phpdev.ro/ Andrei Gabreanu

I used HTML strictly to be easy to understand.

To use with a php file, just change the url to point to your php file then just, add parameters as a key / value pair to be sent to the php. Point your container to enable the plugin and your php file should return the content you would like to show (aka an html most likely).

Example:

$(“.my_cool_container”).smartPagination({
url: “my_cool_php_file.php”,
button: “my_button_that_triggers_the_loader”
});
http://twitter.com/briljantmartijn martijn

Thanks alot for your reply. Will try this some time and post if it works.
http://twitter.com/briljantmartijn martijn

Thanks alot for your reply. Will try this some time and post if it works.
http://wp-popular.com/popular-word-press-websites/smarter-twitter-like-pagination-smartscrollingpagination-jquery-plugin-phpdevelopment-blog/ wp-popular.com » Blog Archive » Smarter Twitter like pagination (SmartScrollingPagination jQuery plugin) – phpDevelopment | Blog

[...] the original post here: Smarter Twitter like pagination (SmartScrollingPagination jQuery plugin) – phpDevelopment | Bl… Tags: content, élément, loader, [...]
http://blog.galerie-cesar.com Fantome

Hi
A very nice nice work thanks for sharing
I used your script in a blog agregator to load posts but i have a little problem:
I tried to make an animation when loading the posts (fadein() for exemple) but it did never worked :s
can you please help me to do it?
thanks in advance
http://blog.galerie-cesar.com Fantome

Hi
A very nice nice work thanks for sharing
I used your script in a blog agregator to load posts but i have a little problem:
I tried to make an animation when loading the posts (fadein() for exemple) but it did never worked :s
can you please help me to do it?
thanks in advance
Rr

Sucks
Rr

Sucks
Trungnq

I tried to code with a php file to get data from mysql, bat I can not put parameter like pagenumber to my_cool_php_file.php? Can you show me how to give parameter to this file.
Thank you very much!
Trungnq

Dear martin!
I still can not put parameter in the my_cool_php_file.php to query exaxt data from mysql.
Could you help me to solve this!
Thank you!
Trungnq

I tried to code with a php file to get data from mysql, bat I can not put parameter like pagenumber to my_cool_php_file.php? Can you show me how to give parameter to this file.
Thank you very much!
Trungnq

Dear martin!
I still can not put parameter in the my_cool_php_file.php to query exaxt data from mysql.
Could you help me to solve this!
Thank you!
http://phpdev.ro/ Andrei Gabreanu

Hello Trung,
You could do something like

parameters : { “page”: pageNb },

where pageNb could be a variable which contains your page number. At the first load of the page this could be initialized with 1 afterwards you can just increment it +1 each time the user clicks the load more button.
http://phpdev.ro/ Andrei Gabreanu

Can you tell me what the issue you are having is? Did you set the method (post/get) correctly and passed the parameter?

Cheers!
http://phpdev.ro/ Andrei Gabreanu

Hello Trung,
You could do something like

parameters : { “page”: pageNb },

where pageNb could be a variable which contains your page number. At the first load of the page this could be initialized with 1 afterwards you can just increment it +1 each time the user clicks the load more button.
http://phpdev.ro/ Andrei Gabreanu

Can you tell me what the issue you are having is? Did you set the method (post/get) correctly and passed the parameter?

Cheers!
Azertyu

is there a demo ?

PHP Developer Blog - The blog of Andrei Gabreanu