jQuery plugin : jqPageFlow – scrolling pagination made easy
jqPageFlow
Simply put, this plugin makes the scrolling pagination found on sites like dzone.com and Google Reader easy to implement on your site.
A working demo is viewable here
This is of course all configurable, and intended to be used on an automatically generated page using a backend script (eg php).
Please note that this script is still currently in beta, so if you find any problems please post a bug submission to http://code.google.com/p/flexidev/issues/ with as much information as possible
Usage
- Download the latest source code from the repository : http://code.google.com/p/flexidev/downloads
- Include the jQuery library into your page header (this plugin supports both jQuery v1.2.6 and v1.3)
- Include the jquery.jqpageflow.js file into your page header
- Include the supplied css file in your page header : modify as you see fit
- View the source of this page: copy, paste and modify the javascript block as required. Use $(“body”).jqpageflow(); to use defaults.
- Create a php/.net/perl/python etc backend script to handle the serverside stuff – see the index.php file (this page) included in the download source for a basic example
Features
- Compatable with jQuery v1.2.6 and 1.3
- Chainable
- Configurable options : including the url to call, current page, pager var, container element etc
- Server side platform independant : tell it how to interact with your backend scripts
- Cross browser compatability, tested in FF 2.5+, Safari 3+ (more browsers to come soon)
- Skinnable loader with CSS and customizable image path
Options
- url: Specify which url (relative or absolute) the plugin should submit the ajax request to. Defaults to current window.location
- currentPage: Gets appended to url as a GET value to help your backend script keep track of which page of results the user is on. Defaults to 0 (first page)
- pagerVar: Related to currentPage, gets appended to url as a GET var to help your backend script keep track of which page of results the user is on (e.g. index.php?page=2). Defaults to “p”
- perPage: Used for calculation and display purposes, tell the plugin how many results are being displayed per page. Defaults to 50.
- totalResults: Tells the plugin when it needs to stop trying to look for more results. Defaults to 100
- container: Specify which html element contains the result items, can be any jQuery compatible selector (eg “#mycontainer”, “.results”, “body”).
Any html returned to the ajax call gets appended to this element. Defaults to “body” - loaderImgPath: Tell the plugin where to find the loader img relative to the page calling the plugin. Defaults to “images/loader.gif”
- debug: When set to 1, the plugin will print debugging information to the console (firebug). Defaults to 0
Changelog
- 18 Jan 2009 : version 0.1b released
Credits
- Plugin Author: Barry Roodt – http://calisza.wordpress.com , Twitter
- Naming ideas, SEO/SEM help: Christopher Mills – http://imod.co.za , Twitter
Share this:
Categories: javascript, jquery
Tags: javascript, jquery, navigation, pagination, scroll, scrolling
Leave a Reply Cancel reply
Latest Tweets
- Sorry Proteas, but the way this pitch is playing now, 300 might not have been enough. 4 hours ago
- RT @sboshmafu: Like, Bafana, it was nice to believe. #savseng > heh, sometimes I wonder why they even pitch up to play. 6 hours ago
- wtf was AB doing playing that shot. 7 hours ago
- Building offline applications with AngularJS and PouchDB zite.to/16BpKWe 1 day ago
- Backbone-Dropbox.Js zite.to/11LuNis > cool 1 day ago
Archives
Recent Posts
- Yet another list of ‘extremely useful’ jQuery plugins
- Advanced radio button grouping with jQuery
- Mobile App Development – Snake Guide for South Africa
- Howto: Create custom thumbnails from Flutter image fields
- Simplifying Flutter duplicate groups and fields
- Circular Image Slide with jQuery
- 6 jQuery snippets you can use to manipulate select inputs
- How to validate Date of Birth with jQuery
- Still alive and kicking
- jQuery plugin : jqPageFlow – scrolling pagination made easy
Top Posts
- 6 jQuery snippets you can use to manipulate select inputs
- Circular Image Slide with jQuery
- How to use jQuery to select a radio button from parent element
- Javascript / Jquery Bookmark script
- How to validate Date of Birth with jQuery
- jQuery plugin : jqPageFlow - scrolling pagination made easy
- Jquery UI Layout Manager Plugin
- Spam proof Contact Form with Zend Framework, ReCaptcha and Akismet / TypePad Antispam
- Yet another list of 'extremely useful' jQuery plugins
- Advanced radio button grouping with jQuery
The demo site does not work until you enable the console loggin from Firebug. Nice plugin still.
Why doesn’t the demo work?
Remove the console references and it works.
@Ludovic and @Richard – thanks for the spotting that so quickly.
Commented references to console out for the moment until I can figure out why that’s happening. Might need to read up on the use of console a bit more
Fixed and uploaded.
Maybe just make debug=0 rather than debug=1 when you release
@Richard : sheesh, can’t believe I didn’t see that. Guess that’s what happens when releasing code after a 5 hour code binge
thanks.
hi,
I really liked your plugin. Currently i am using an autocomplete plugin by bassistance.de. Would it be possible for you to guide me of how i can implement this functionality in the autocomplete plugin? I would appreciate any help.
Thanks!
Certainly, check your mail and we’ll take it from there.
The demo is still not working for me (ff3) even after enabling firebug console logging.
Hi Zach,
Are you getting any errors ? what is it or is it not doing ? do you have the same problem in other browsers ?
For the demo, I’ve actually commented out all references to console for the moment, so it should not make any difference to whether the script’s functioning or not.
Also, are you referring to the online demo, or the demo included in the zip ?
Hi,
I have a little problem. I use jqPageFlow on a search result page. It works well when I have a lot of results. But with 5 results for example, the loading icon is still displayed. Any idea ? Thanks.
I’m interested in using this script to power a wordpress site, I currently have it functioning well with the infinite-scroll plugin for wordpress. This plugin has a feature which I really need (links inside the un-scrolled content) but I’m unsure how I might impliment this. It’s obviously a very general question, but how do I get it to recognise individual posts and repeat them at a certain point?
infinite-scroll requires all of your posts to be in a single container and there is a trigger div which when hit, triggers the next batch of content to load, which is based on the amount of posts wordpress is set to display.
Are you aware of anyone using your script in conjunction with wordpress or any tutorials to impliment it? A google search hasn’t been very fruitful..
Thanks.
I haven’t heard of anyone using it for a wordpress site just yet. It is something though that I’ve been wanting to do – it’s just been a matter of finding the time to sit down and give it a serious look.
If it’s not terribly urgent and you’re willing to wait a couple of weeks I should have something up for you by then.
That’d be fantastic! I’d be implimenting it into Grid-a-Licious, it’s quite popular to use infinite scroll with this theme but as I say, it simply isn’t as flexable as your script and as I plan to use it in conjunction with a portfolio, it’d be pretty stupid to use an infinite scroll script which cannot allow skipping to certain projects. If you need a tester, I’m your man!
Thanks,
Mark.
Hi, any progress on this front? No biggy if not, I’ll simply have to have to rethink my navigation but it’d be really noice
Hello !
If you want using pagination plugin, pls try it here: http://kenphan.info/view/2010/01/Cach-su-dung-jQuery-jPager-plugin.html
That is a simple page used AJAX and JSON. The name is jPager. That jPager is easy install & simply.
Download it here: kenphan.info/download.jpager.rar
It works fine in Firefox and IE but not in Chrome. Does someone know what is the problem?
When I alert the succes html, in Firefox I see the result, but in Chrome there is nothing.
Help?
I found a solution, the code doesn’t work localy but works when is put on server, because of some restriction to file system that Chrome has.
I have a problem. My main page does not know how many total records are there as in document.ready of the main page I am calling the ajax page which loads the data. total number of records can only be known from the ajax page. So is there any way to set the config.totalResults var from ajax page? I have tried setting $.flexiPagination.defaults.totalresults, but ur script is not taking the value from there in the main if condition, its taking it from the config, which is perfect. So is there any way to set the config.totalResults var from ajax page?
this script support ipad?
this plugin is still being developed?
It doesn’t work when you have less results with screen resolution 1920×1080 , for example 20 instead of 50 it doesn’t scroll to next results, how I can fix it?