Ajaxian Featured Tutorial: Coda Slider Effect
Date : 2008 06 03 Category : Tech & Development
AjaxianThe 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:
Degrades perfectly without JavaScript enabled Sliding panels effect without hogging browser CPU Next and previous buttons added using JavaScript because they hold no use without JavaScript Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation 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 workThe 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.