Tuesday, June 3rd, 2008

Ajaxian Featured Tutorial: Coda Slider Effect

Category: jQuery, Tutorial

The effect of “sliding panels” has become extremely popular for categorizing & displaying large amounts of data on a single page. One of the most notable implementations of this effect was done by Panic to display all of the features and benefits of their Coda web development IDE. Since then, many implementations of this effect have been built and most are now referred to as “Coda sliders” since they provide very similar scrolling capabilities.

Remy Sharp of jQuery for Designers has created a new screencast and tutorial on how to create a coda slider effect using jQuery:

Although Panic didn’t really invent the effect, the sliding panels on the Coda is great implementation of this effect.
This article will pick apart the pieces required to create the effect, and how to better it.

Remy’s tutorial aimed for several goals:

  1. Degrades perfectly without JavaScript enabled
  2. Sliding panels effect without hogging browser CPU
  3. Next and previous buttons added using JavaScript because they hold no use without JavaScript
  4. Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
  5. Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation – this should happen without any extra work

The tutorial is very detailed walking you through the markup of the page, use of several jQuery plugins, setting up the navigation, and handling the events for the slider. Along with that, Remy created a screencast, available in both Quicktime and Flash formats, that explain how everything is put together.

Posted by Rey Bango at 9:28 am

4 rating from 46 votes


Comments feed TrackBack URI

We just used the effect on our tour page: http://soundcloud.com/tour

Comment by ericw — June 3, 2008

Remy. Looks useful. Just wonderong, is there a reason why you didn’t add the page.html#subpage to the URL when clicking on the tabs etc?

Comment by GalloNero — June 3, 2008

This is great.
@GalloNero – I think he didn’t add the ID of the element to the hash on trigger because then it would make the screen jolt down to that level when you clicked. (I tried it and its REALLY annoying)

Comment by Jigs — June 3, 2008

Chaps – I’ve spoke to Ariel about this option (the creator of the scroll plugins) and there is a way to manage this, and without jumping the page. If you add ‘hash : true’ to the scrollOptions it will do it. I’m planning on releasing a full plugin to handle the whole effect for you – so stay tuned!

Comment by remy — June 4, 2008

I’ve always liked this effect, but didnt like the fact that it didnt loop and that you had to go through all of the in-between pages if you wanted to go from one to five. So I wrote something similar with mootools that can handle dynamic sizing based on the container element’s size. Check it out here – http://8trk.com/splash.php

Comment by emehrkay — June 4, 2008

Leave a comment

You must be logged in to post a comment.