jqPageFlow

Simply put, this plugin makes the scrolling pagination found on sites like dzone.com and Google Reader easy to implement on your site.

To see an example, simply scroll down to the bottom of this page - you should see an unordered list with 50 items. As you get closer to the bottom, this list will expand to 100, then 150 afterwhich it should stop.

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

1. Download the latest source code from the repository : http://code.google.com/p/flexidev/downloads
2. Include the jQuery library into your page header (this plugin supports both jQuery v1.2.6 and v1.3)
3. Include the jquery.jqpageflow.js file into your page header
4. Include the supplied css file in your page header : modify as you see fit
5. View the source of this page: copy, paste and modify the javascript block as required. Use $("body").jqpageflow(); to use defaults.
6. 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.2b - commented out references to console (forced plugin to not work until firebug console was enabled)
• 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

Demo

• This is result item number 1
• This is result item number 2
• This is result item number 3
• This is result item number 4
• This is result item number 5
• This is result item number 6
• This is result item number 7
• This is result item number 8
• This is result item number 9
• This is result item number 10
• This is result item number 11
• This is result item number 12
• This is result item number 13
• This is result item number 14
• This is result item number 15
• This is result item number 16
• This is result item number 17
• This is result item number 18
• This is result item number 19
• This is result item number 20
• This is result item number 21
• This is result item number 22
• This is result item number 23
• This is result item number 24
• This is result item number 25
• This is result item number 26
• This is result item number 27
• This is result item number 28
• This is result item number 29
• This is result item number 30
• This is result item number 31
• This is result item number 32
• This is result item number 33
• This is result item number 34
• This is result item number 35
• This is result item number 36
• This is result item number 37
• This is result item number 38
• This is result item number 39
• This is result item number 40
• This is result item number 41
• This is result item number 42
• This is result item number 43
• This is result item number 44
• This is result item number 45
• This is result item number 46
• This is result item number 47
• This is result item number 48
• This is result item number 49
• This is result item number 50