Home > javascript, jquery > jQuery plugin : jqPageFlow – scrolling pagination made easy

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

  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.1b released

Credits

About these ads
  1. January 18, 2009 at 5:42 pm | #1

    The demo site does not work until you enable the console loggin from Firebug. Nice plugin still.

  2. richard
    January 18, 2009 at 7:46 pm | #2

    Why doesn’t the demo work?

  3. richard
    January 18, 2009 at 7:52 pm | #3

    Remove the console references and it works.

  4. January 18, 2009 at 8:02 pm | #4

    @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.

  5. richard
    January 18, 2009 at 8:31 pm | #5

    Maybe just make debug=0 rather than debug=1 when you release

  6. January 18, 2009 at 9:52 pm | #6

    @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.

  7. vtheliving
    January 30, 2009 at 1:47 am | #7

    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!

    • January 30, 2009 at 8:15 am | #8

      Certainly, check your mail and we’ll take it from there.

  8. zach
    February 1, 2009 at 9:50 pm | #9

    The demo is still not working for me (ff3) even after enabling firebug console logging.

    • February 2, 2009 at 7:57 am | #10

      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 ?

  9. Ced
    July 1, 2009 at 11:16 am | #11

    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.

  10. kalkal
    October 15, 2009 at 12:28 am | #12

    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.

    • October 15, 2009 at 7:20 am | #13

      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.

      • kalkal
        October 15, 2009 at 10:17 am | #14

        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.

      • kalkal
        October 30, 2009 at 10:47 am | #15

        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 :)

  11. January 9, 2010 at 12:43 pm | #16

    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

  12. Aleksandar Tasevski
    June 28, 2010 at 10:12 am | #17

    It works fine in Firefox and IE but not in Chrome. Does someone know what is the problem?

    • Aleksandar Tasevski
      June 29, 2010 at 1:21 pm | #18

      When I alert the succes html, in Firefox I see the result, but in Chrome there is nothing.

      Help?

    • Aleksandar Tasevski
      June 29, 2010 at 1:36 pm | #19

      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.

  13. Vik
    October 14, 2010 at 2:43 pm | #20

    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?

    • abtraju
      August 5, 2011 at 3:02 pm | #21

      this script support ipad?

  14. June 9, 2011 at 11:49 pm | #22

    this plugin is still being developed?

  15. September 16, 2011 at 3:54 pm | #23

    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?

  1. January 18, 2009 at 9:15 pm | #1
  2. January 8, 2010 at 9:10 am | #2
  3. January 20, 2012 at 12:21 pm | #3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: