Continuous Pagination with YUI

Last month, I implemented continuous pagination to Simple Shopping Search that is described in Breadcrumb + Navigation. I refered to the article on Switch On The Code to create this.

What the script should do is

  1. Checking position when scroll event occurs
  2. If it’s scrolled at a certain point of the page, it gets next page contents/data and then append it at the end of the page

The timing when it should get next contents (or data) depends on page length, window or frame size. For example, if you want to load next page when you scroll down to the bottom of the page, it should load contents when

position of the page > page length – window height – offset

Yahoo! UI Library has a method to get the above values in Dom Collection module, the example code would be

var dom = YAHOO.util.Dom;

var continuousPaginator = function(){
    var offset    = 10;
    var scrtop    = dom.getDocumentScrollTop();
    var docheight = dom.getDocumentHeight();
    var winheight = dom.getViewportHeight();

    if ( scrtop < docheight - winheight - offset) {
        // get next page content and append it at the bottom of the page

YAHOO.util.Event.addListener(window, "scroll", continuousPaginator);

By the way, Simple Shopping Search now supports Amazon US data. You can also check the behavior of breadcrumb navigation with Amazon US category.

Continuous Pagination with YUI

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s