PHP Developer / Blog

I noticed that DZone had a really cool UI for a list of user submitted links. DZone is similar to Digg but geared more towards programmers. The premise is that a small subset of links are populated when the page loads. Once the user begins to scroll and nears the bottom of the list it automatically populates more stories to the end. This is a great alternative to having numerous pages that the user has to click through. You can also view a working example.

The tools
I decided to use the prototype.js library because I didn’t want to spend more than a couple hours on the scripting portion of this. I also needed some good sample data and decided to go with Digg’s API to get a list of the latest 100 photos. On the backend I used PHP but you can swap that out with something else if you’d like.

The photos
First let’s get the photos from Digg. I used a simple PHP curl request to connect to their web service.

$ch = curl_init('http://services.digg.com/galleryphotos?count=100&type=json&appkey=test');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'PHP');
$full = json_decode(curl_exec($ch), true);
$stories = json_encode($full['photos']);

I went ahead and decoded the response to a PHP array and stored the photos key to a variable named $stories. I re-encoded that to a JSON string because we’re going to pass that into our JavaScript constructor.

The JavaScript
We’re going to utilize a few prototype.js functions to make this clean and fast.

• Class.create
• Element.insert
• Element.observe
• Element.stopObserving
• Element.getDimensions
• document.viewport.getScrollOffsets

We’ll start by defining some simple CSS.

  .epiItem{
    height:100px;
    background-color:#eee;
    border-bottom:#ccc dotted 1px;
  }

Let’s additionally set up a div which we’ll use to populate the photos. We’ll also need to include the prototype.js library (change the path as needed).

<script src="/js/prototype.js"></script>

Now we’re ready for the javascript. Here’s the class we’ll use to handle everything.

  var EpiList = Class.create(
    {
      displayItem: function(item)
      {
        $('epiList').insert('

'+item.title+'

', {position:'bottom'});
        this.item++;
      },

      onScroll: function()
      {
        var previousScroll = this.scroll['top'];
        this.scroll = document.viewport.getScrollOffsets();
        if(this.scroll['top'] > previousScroll)
        {
          if((this.scroll['top'] / this.viewport['height']) > .60)
          {
            if(this.item < this.items.length)
            {
              this.displayItem(this.items[this.item]);
              this.reset();
            }
            else
            {
              this.stopObserving();
            }
          }
        }
      },

      observe: function()
      {
        Event.observe(document, 'scroll', this.onScroll.bind(this));
        Event.observe(window, 'resize', this.reset.bind(this));
      },

      reset: function()
      {
        this.scroll = document.viewport.getScrollOffsets();
        this.viewport = $('content').getDimensions();
      },

      stopObserving: function()
      {
        Event.stopObserving(document, 'scroll', this.onScroll.bind(this));
        Event.stopObserving(window, 'resize', this.reset.bind(this));
      },

      initialize: function(items, display)
      {
        this.reset();
        this.item = 0;
        this.increment = 3;
        this.items = items;
        this.display = display;
        for(i=0; i
        {
          this.displayItem(this.items[i]);
        }
        this.observe();
      }
    }
  );

  new EpiList(, 10);

Notice the PHP code at the very end? That’s the JSON encoded data that we got using the PHP code above.

How it works
We create an instance of the EpiList class which fires off the constructor initialize(items, display). We pass in the JSON string as the list of items which we specified as 100 photos. We also pass in 10 as the default number of photos to prepopulate. The last line of the constructor is a call to the observe() method. This sets up event handlers for when the user scrolls or resizes the window. The main method is the onScroll() method. This is what checks to see if the scrollbar is at least 65% of the way near the end. If it is then we append another photo to the bottom of the div. This keeps the page growing and the user is pretty much unaffected - a win win.

The benefits
This approach has many benefits including a great user experience and decreased bandwidth/server load…if implemented correctly of course.

Disclaimer
This is just a proof of concept that is completely unoptimized.

This entry was posted on Monday, February 18th, 2008 at 2:41 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.