Welcome

You're looking at the fabulous jQuery Coda-Slider, inspired by the promo site for Panic's nifty one-window web development software (which I've never used, but I hear is great). Panic apparently created their own slider from scratch, but I've used jQuery to achieve the same effect here.

Feel free to use it in your own projects. You can read my associated blog posts here.

Many thanks go out to Gian Carlo Mingati, whose jQuery image slider was used as the starting point for this script. If you're looking for the same type of effect for an image gallery, his slideViewer would better suit your needs.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros. Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam.

What?

If you're reading this you must have clicked a tab above or the arrows at the side. The sliding effect that brought you to this text is what the Coda-Slider is all about; Nice, slick content presentation.

Some features of the Coda-Slider.

• Clean and valid code. XHTML strict.
• Circular navigation.
• Dynamically created tabs.
• Multiple sliders can easily co-exist on one page.
• Completely customizable via CSS. Colors, height, width, etc.
• Magic kind of "catch-up" ability which I don't quite understand but like a lot. Try clicking several tabs quickly to see what I mean.
• Cross browser compatible; tested in IE6, IE7, FF2, Opera 9 and Safari 3 on Windows, and FF2 and Safari 2 on Mac.

Sed at orci quis felis tincidunt pharetra. Sed ac ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada.

How?

Coda-Slider is pretty easy to use on your own site. You'll need the following:

• jQuery. The release used here is 1.1.4 (local copy). jQuery 1.2 was released in September 2007 and does not work with this script. If anyone wants to have a go updating Coda-Slider for use with 1.2, feel free. I don't have the time right now.
• The jQuery Easing Plugin v1.1.1 (local copy).
• slideviewer.js (local copies: readable | compact), which is all the custom JavaScript written by Gian Carlo Mingati and modified by me. I'm Niall Doherty, by the way.
• A bunch of CSS and properly formatted HTML. Pick apart the source of this page or the download for more details.
• The initialization call for each slider on the page in the document head.

For your convenience, you can download everything you need for Coda-Slider right here: coda-slider-1.0.zip

Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.

Limitations

A few things you might want to consider before using Coda-Slider in your own project:

• Dependant on JavaScript and stylesheets being enabled, obviously.
• Not possible to hyperlink to specific tabs.
• Not yet compatible with jQuery release 1.2.

If you experience any problems or bugs using Coda-Slider, please let me know and I'll add them to the list. Better yet, I might even fix them! You can contact me via e-mail:
himself [at] ndoherty [dot] com

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros. Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam.

Miscellaneous

Random stuff worth noting:

• The CSS on this page doesn't fully validate because of one property in the stylesheet: -moz-user-select. I put that in to stop a glitch where the whole slider would highlight when you clicked outside it in Firefox. It bugged me, but you can take it out if you like.
• The tab names come from the title attribute of each div in the slider.
• I didn't worry too much about filesize when putting this together, but all the JS and CSS used for the sliders on this page amounts to 31.6kb. (By comparison, the three JS files which appear necessary for Panic's slider to work add up to 38.1kb.) I'm no JavaScript expert so the code in slideviewer.js is probably a bit bloated and could be trimmed down. You could also further compact some the JS by using a compressor like /Packer/.
• Yes, there's a preloader in there. That's part of Gian Carlo Mingati's slideViewer. It's not entirely necessary for Coda-Slider, since we're not preloading a bunch of images, but I left it in there.

Sed justo dui, bibendum nonummy, condimentum ac, viverra at, felis. In consectetuer pede elementum ligula. Integer vel massa ac tortor condimentum sollicitudin. Sed at orci quis felis tincidunt pharetra. Sed ac ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.