Award-Winning Fjords Thomas Reynolds

Tweetie-style paging with pageSlider

Tweetie for Mac is one of my favorite programs. However, it is also one of the least Mac-like applications I use. Instead of standard interactions, such as a tab control, for switching modes, Tweetie uses an iPhone-inspired vertical slide. This is similar to the various carousel scripts around the web, but vertical rather than horizontal.

I recently need a little bit of gloss on a rather plain website, so I borrowed the effect. You can see the code implemented on the JiveWorld09 conference site. You can also see the effect in the screencast below:

The Source

You can grab the code on Github athttp://github.com/tdreyno/pageSlider or in this zip file.

How to Use

First, and foremost, you will need jQuery and jQuery.history to provide the back-button support. These are included on GitHub and in the downloadable zip file.

The code is implemented as a jQuery plugin which is called on a collection of pages in the current html document. You must have a div which contains the pages (defaults to having an id of maincontent) and then you will select the pages and apply the plugin. In the example below, each page has a class of page. That same div must also have a title attribute declaring the unique name for referring to that page.

There are also some CSS caveats. The containing element must be set to overflow: hidden;. Additionally, calculating heights on the pages can be difficult. The best way is to set a padding on the .page so margins don't leak outside it's box.

<head>
  <style type="text/css">
    #maincontent {
      overflow: hidden; }
    .page {
      padding: 5px; }
  </style>
  <script src="jquery-1.3.2.js" type="text/javascript"></script>
  <script src="jquery.history.js" type="text/javascript"></script>
  <script src="jquery.page-slider.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.page').pageSlider();
    });
  </script>
</head>

<body>
  <div id="maincontent">
    <div title="home" class="page">
      Home page
    </div>
    <div title="page2" class="page">
      Page number two
    </div>
  </div>
</body>

Now, whenever the "history" hash (the #page location in the URL) is changed, the javascript will slide to the requested piece. Normal links such as <a href="#page2"> can be used to trigger the effect. The back-button will also change the history and thus trigger the animation.

Configuration

The plugin needs to know the containing element to slide inside of.

$('.page').pageSlider({
  containerSelector: "#frame"
});

Events

The plugin calls a changingPage event whenever the animation begins. If you have dependent elements you want to update together with the slide, you can attach them to the event via the normal jQuery event model. This callback is used in the video above to update the sidebar navigation when the history changes.

$(document).bind('changingPage', function(anchor_name) {
  // Update some other dependent element based on anchor_name
});

Demo

See the demo here.