• Demos
• Download
• Documentation: Installation | Settings

If you need help or troubleshooting, please register and ask in the Coda-Slider 2.0 forum.

Background

Coda-Slider is a jQuery plugin I first released in September, 2007. It aimed to mimic the slider effect on the promo page for Panic’s Coda software. That initial version was hacked together, and I made two small updates within a few months of its release. Coda-Slider 2.0 has been built from the ground up, and should prove much more versatile and easier to use than its predecessors.

License

Coda-Slider 2.0 is available for use in all personal or commercial projects under both MIT and GPL licenses. Pick your favorite and roll with it.

Save a Puppy

If you like Coda-Slider 2.0 so much that you’d like to part with some of your hard-earned cash, I’d appreciate any donation you can make to the Humane Society of Louisiana. You can donate via PayPal; just click the button on their homepage.

Learn jQuery

jQuery is quite easy to learn, especially if you know CSS already (you target elements the same way in jQuery). I learned by trial and error and plenty of visits to the online documentation. You can speed up the learning process by using the book Learning jQuery 1.3, which I reviewed here.

Split in two

Before this redesign, there was just ndoherty.com, where the primary focus was on web development. With the redesign, I decided I needed two sites: ndoherty.com became devoted to my thoughts on personal growth, while ndoherty.biz now plays host to the web design goodness. No point mixing those two subjects all together on one site.

The design of both sites is exactly the same, except for some subtle color differences.

Clean and simple

I wanted everything to be very clean and simple, which was much easier said than done. Click the numbers below to see screenshots that show the progression of the homepage design.

It started off pretty cluttered, got more cluttered, then I started taking things away until only the essentials were left. Looking back through those iterations, I’m pretty happy with the end result.

The logo

The stag logo was derived from my family crest:

I started out trying to make a good copy of the animal, but again found that a minimalist approach worked better.

But don’t go clicking and buying just because you like puppies. Read on to find out if this book is right for you, and there’s even a link to a free chapter at the bottom of this post so you can get a feel for it.

First off, a disclaimer: I’m not a hardcore programmer by any means. Functions and arguments and variable scopings make my head spin. I’m more of a jack-of-all-trades web developer who knows enough programming to hack away at some Ruby on Rails or PHP or jQuery and come away with something nice. Rarely something perfect, but nice nonetheless.

Something for everyone

Learning jQuery 1.3 has something for everyone. If you’re new to jQuery, this book will ease you into it. Yes, you can probably find all the same information online (much of it at jquery.com), but you’ll learn it a lot faster by working through the examples in the book. (And then you can spend that saved time working on some projects that will more than cover the cost of the book.)

There are also lots of great tips for more advanced coders. I learned bunches from my thorough read-through, and I’ll be referring back to it often, especially Chapter 11: Developing Plugins. And of course there were dozens of pages that made my head hurt, but I’m sure they can be helpful to the hardcore jQuery students.

Highlights

A few things I especially liked about Learning jQuery 1.3:

• Progressive enhancement and graceful degradation promoted throughout.
• Alternative ways of achieving the same result are often noted and/or explained; pros and cons of each approach listed.
• Clearly stated when an example is just for demo purposes and not sufficient for real-world use.
• Several walk-throughs of refactoring code to adhere to DRY principles.
• Very good about using semantic mark-up; alert you on the rare occasions that they don’t and explain why.
• The authors are obviously experts, but are also excellent at breaking everything down and stepping the reader through examples.
• Geeky humor.

Lowlights

Not too much I can point to here. I’d probably do the gradient fade effect (page 283) and revising styles with JavaScript (page 290) a little differently, but aside from that I found myself either nodding along or having repeated a-ha moments throughout.

Free Chapter

Yup, no word of a lie: all of Chapter 4 from Learning jQuery 1.3 is here for your perusal.

In Chapter 4 you’ll be introduced to jQuery’s animation techniques and see how to hide,  show, and move page elements with effects that are both useful and pleasing to the eye.

Download Chapter 4: Effects in PDF format.

Do it for the puppies

If this book sounds right for you, buy it via this link. Once again, any commission I earn will be donated to the Humane Society of Louisiana. Just think, you can help rescue a mistreated puppy while simultaneously learning about the benefits of caching jQuery selectors. Win-win.

So I finally found time to add a much-requested feature to Coda-Slider: Different classes for each tab. Now you can target individual tabs and give each one a different look. In the new demo, you’ll see that I just used different background colors to illustrate this feature, but of course you can use images if you like.As this is just a minor addition, I’m calling the updated version “Coda-Slider 1.1.1″. Makes sense to me.

• Check out the demo
• Download Coda-Slider 1.1.1

Apologies again that I haven’t been able to respond to all your comments and emails regarding Coda-Slider. I hope you understand that it’s just something I put together for fun and experience, and it’s difficult to spend time maintaining it when I have paying jobs on offer.

Also, please keep sending me your own implementations of Coda-Slider. I will get a showcase together eventually, promise.

Update – August 13, 2008

Thanks to everyone who has expressed interest in Coda-Slider. I noticed some new sites linking here in recent weeks, and I just wanted to give an update on the status of this script.

I am not willing to provide any additional functionality to Coda-Slider at this time. Thank you to those people who have contacted me and offered payment for specific alterations, but I have other projects I prefer to focus on. I also apologize for not being able to respond to all the comments here. I leave them open so everyone may help each other. Thanks to those good people who take the time to share solutions.Here are some more resources that may help those of you who run into difficulty with Coda-Slider:

• Instructions and How-To’s – This older blog post I wrote about Coda-Slider has tips that are still relevant and may help solve some common problems.
• Nettuts.com – Tutorial on implementing Coda-Slider
• Coda Slider Effect – An alternative jQuery script that provides similar functionality.
• jQuery.com – jQuery is easy to learn, and anyone with a decent knowledge of CSS should pick it up quite quickly. Dive into the documentation and you’ll soon be able to add all kinds of bells and whistles to Coda-Slider.

Good luck everyone.

Anyway, I setup the wireless connection using the WEP key I’d gotten from my friend’s Netgear router, going about it the same way I would on Windows XP. The process is almost automatic for me since I’d talked people through it literally hundreds of times as an AOL technical support agent a couple of years ago. Everything seemed to be in the same place and I did what I usually do, but the wireless just wouldn’t hook up. It was about then that my friend noted that the machine had been running a bit slower than usual lately. Fine, I’d just untick a few things that looked unnecessary in msconfig (start > run > msconfig > startup tab) and reboot. Maybe that would get the wireless working, too.

Big mistake.

Turns out you can’t just go disabling stuff willy-nilly in msconfig on Vista. With XP you can disable everything in that list and carry on with your wonderful life, but Vista sees fit to go apeshit when you try the same. So, upon reboot, I was greeted with a bunch of “application service” errors, none of Microsoft’s Apple-cloned Vista eye candy (just a bland, Windows ME looking interface), and a very worried friend who no longer seemed so confident in my computer literacy.

Oops.

Nothing would really work either. Nothing in device manager, nothing in network connections, USB ports were lifeless. What the hell had I done?

After a few searches on my own PC this morning, I found some answers. First, from BlackViper.com:

Do not use “msconfig” to disable services, type “services.msc” in the Run box instead!

Wish I knew that earlier.

Next, I used this list from TweakHound.com to reset all Vista’s services back to their default settings. (Took a while, too. It would have been nice if Microsoft had put a nice big “Reset all to default” button in there.) I did come across a few things that don’t appear in that TweakHound list, but I just left most of those disabled or set them to manual. Use your own judgement if you happen upon this same adventure.

A reboot later and everything was glossy and see-through again. Back to where I started. Now to figure out what’s up with that wireless connection.

It’s been about six weeks since I introduced a neat little jQuery plugin called Coda-Slider. It was well received, and I was delighted to see people incorporating it into their own projects in creative ways.

However, the original Coda-Slider had some bugs and lacked some features. After numerous requests, I’ve finally found time to make some improvements, and today I’m releasing Coda-Slider 1.1. Please check out the demo, and be sure to read the rest of this post for more info and details on customization.

• Check out the demo
• Download Coda-Slider 1.1

Improvements

• jQuery 1.2: The original Coda-Slider used jQuery 1.1, but this version uses the latest and greatest jQuery library. By extension, I also upgraded the jQuery easing plugin, and added the easing compatibility (Thanks to everyone who e-mailed me with that suggestion).
• Fixed IE bug: A few people noticed that clicking quickly on a tab in Internet Explorer (6 or 7) broke the slider. Upgrading to jQuery 1.2 seemed to fix that problem.
• Better accessibility: I’ve added a <noscript> tag so users with JavaScript disabled will know they’re missing out. Also, even without JavaScript enabled, all content housed within the slider is now accessible via a scrollable panel.
• YouTube videos: Someone (sorry, I forget who exactly) reported problems with YouTube videos embedded in the slider. Apparently their video showed up outside the viewing area when sliding. Details on the solution below.
• Better preloader: You may not even notice it with a fast connection, but trust me when I say that the loading graphic looks much better now. If you require a different animated gif for the loading graphic, I recommend Ajaxload.
• Cross-Linking: This was easily the most requested addition to Coda-Slider, so I hope you’ll find it useful. More info on the cross-linking below.
• Fully cross-browser compatible: Coda-Slider 1.1 has been tested successfully on IE6, IE7, FF2, Safari 2.0.4, Safari 3 and Opera 9. If anyone can test on additional browsers please let me know.

Constants

• Valid XHTML 1.0 Strict.
• Valid CSS.
• Circular navigation.
• Small file size: All the JavaScript and CSS compacted amounts to less than 36kb.

Shortcomings

• Safari 2.0.4 support: Coda-Slider 1.1, like it’s predecessor, doesn’t work in Safari 2.0.4. Unfortunately, I wasn’t able to troubleshoot this issue fully without a Mac of my own. However, if it’s any consolation, Safari 2.0.4 is only used by 1.99% of web surfers (source), and that number looks set to decline now that Safari 3 is out of beta. Nevermind. Thanks to everyone who emailed to tell me Coda-Slider 1.1 works fine on that version of Safari.
• Multiple sliders vs. cross-linking: While you can still have more than one slider on the same page, doing so hinders the cross-linking somewhat. In a nutshell, your cross-links will end up affecting each slider on the page, which is hardly ideal. My advice would be to choose between one or the other; either have multiple sliders and no cross-linking, or keep the cross-linking and forget about multiple sliders on one page.
• No back button support: Clicking the back button will bring users back to the previous page, not to the previous tab.

Instructions and How-To’s

Cross-Linking

The original Coda-Slider only allowed you to navigate between panels using the tabs and arrows. With Coda-Slider 1.1, you can also use links anywhere on the page to control the slider. All you need to do is structure your links like so…

<a href="#1" class="cross-link">Click here for the first panel!</a>

That link would move the slider to the first panel. If you wanted the link to bring you to, say, the fifth panel, you’d use a link like this…

<a href="#5" class="cross-link">Click here for the fifth panel!</a>

But that’s not all the functionality of cross-linking. Coda-Slider 1.1 also allows you to link to specific tabs from external pages. For example, this link will take you directly to the fourth tab in the demo.

Navigating through the slider via the tabs or arrows also changes the URL hash (#), so users can bookmark specific panels easily. To link to a specific panel from an external page, just use the full URL with the correct hash, like so…

<a href="http://www.yoursite.com/slider.html#3">Click here for the third panel!</a>

I would have preferred to use more meaningful names for the hashes (such as #products, #contact-us, etc.) but it seemed like an awful lot of extra code for such a small detail. Also, I’m pretty sure that Google don’t index hashes, so giving them meaningful names wouldn’t do anything for your SEO.

YouTube Videos

This was a little tricky to get right.

First of all, if you don’t care about your code validating, just go ahead and embed your YouTube videos using the embed code provided for each video at youtube.com. Your page won’t validate as compliant XHTML, but your video will behave within the slider, only showing within the appropriate panel.

I’m a sucker for validation though, so that wasn’t good enough for me. Off I went and tried out a few different methods for embedding YouTube videos as valid XHTML. While all the methods gave me valid code, they also caused the embedded video to show up outside the view port in the slider. Not good. Eventually I found a solution in the comments of this blog post by Bernie Zimmermann.

The code you should use to embed YouTube videos in Coda-Slider is as follows…

<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/OzGcRXXqPyg">
<param name="movie" value="http://www.youtube.com/v/OzGcRXXqPyg" />
<param name="wmode" value="transparent" />
</object>

No Arrows

Some people asked me how to get rid of the left and right arrows, leaving just the tabs for navigation. In Coda-Slider 1.1, the least you need to remove are lines 58 and 59 in coda-slider.1.1.js…

jQuery(this).before("<div class='stripNavL' id='stripNavL" + j + "'><a href='#'>Left</a></div>");
jQuery(this).after("<div class='stripNavR' id='stripNavR" + j + "'><a href='#'>Right</a></div>");

Taking out those two lines will remove the arrows and make any other code associated with them redundant. There’s plenty more arrow-specific JavaScript and CSS in Coda-Slider, but I’ll leave that for you to find and remove if you want to cut down the file size. Everything is commented pretty well, so the hunt should be quite easy.

No Tabs

If you just want to have the arrows and cross-linking for navigation, the minimum you need to remove are lines 62 to 65 (inclusive) in coda-slider.1.1.js…

jQuery(this).before("<div class='stripNav' id='stripNav" + j + "'><ul></ul></div>");
jQuery(this).find("div.panel").each(function(n) {
 jQuery("div#stripNav" + j + " ul").append("<li><a href='#" + (n+1) + "'>" + jQuery(this).attr("title") + "</a></li>");
});

Again, there is more code in there that becomes unnecessary with the arrows removed, but I’ll let you hunt for that yourself.

Update: Be warned that removing the tabs like this kills the same-page cross-linking controls. If you want to keep full cross-linking without the tabs, the easiest way right now is to just hide the tabs via CSS, like so…

.stripNav { display: none }

Not ideal, but it’s the best I can suggest for now. I’ll try incorporate a better solution into any future release of Coda-Slider.

Tabs Below the Content

Several people contacted me asking how to make the tabs display below the content. It’s actually quite easy, requiring just two small changes in the JavaScript.

First, change “before” to “after” on line 62 of coda-slider.1.1.js…

jQuery(this).after("<div class='stripNav' id='stripNav" + j + "'><ul></ul></div>");

Then, change “next” to “prev” on line 76 of the same file…

jQuery(this).parent().parent().parent().prev().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc);

And you’re done.

Change Width

To increase or decrease the width of the slider, there’s just a couple of changes you need to make in the CSS.

First, change the width of .stripViewer from the default 700px to your preferred width. A few lines below that in the CSS, enter the same value for the width of .stripViewer .panelContainer .panel (also 700px by default).

Those two changes should alter the width of your slider. Depending on what values you choose, you may experience some difficulties repositioning the arrows. You can try two things here:

1. Play around with the width and margin attributes for .slider-wrap in the CSS.
2. Alter the values for the left and right attributes (both 0 by default) for .stripNavL and .stripNavR respectively in the CSS. Remember that you can use minus values (e.g. left: -20px).

Change Height

Two changes required in the CSS to alter the height of the slider. They are as follows:

1. Change the height attribue of .stripViewer to your preferred value.
2. Change the height attribute of .csw to the same value. This is for the preloader, and also controls the height of the scrolling view port that is seen when JavaScript is disabled. You may also want to experiment with the values for margin in .csw .loading to ensure none of the content can be seen while preloading.

Inspiration and Credits

Coda-Slider was inspired by the promo site for Panic’s nifty one-window web development software.

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

Coda-Slider is of course dependent on the excellent jQuery JavaScript library. jQuery makes this kind of stuff so much easier to build, and it’s easy to learn, especially if you’re at all familiar with CSS (targeting is pretty similar in jQuery). Try it for a few days and you’ll have taken your web development skills to the next level.

Showcase

Several people have sent me links to their own implementations of Coda-Slider, and I’ve loved them all so far. I’d like to get a showcase together eventually, maybe a blog post here with screenshots and links. So, please keep them coming. You can contact me via this page.

While most of the new features in the jQuery UI package are common across most AJAX frameworks and toolkits, the new Selectables stands out as a unique and potentially quite useful interface element.

How it works

Selectables use mouse & keyboard events to allow the selection of groups of items. Selection state is controlled by CSS classes and callbacks.

Basic Usage

$("#ContainerElt").selectable();

Creates a selectable out of the <li> elements inside the container element.

Advanced Usage

Other elements can be made selectable by using the “filter” option. “Filter” allows you to define a second query string to describe the selectable elements. All elements matching this query within the parent element will be made selectable.

State Changes

The only other option is the specification of callbacks. Selectables can fire callbacks while an element is being selected, when an element is selected, while an element is being unselected and when an element is unselected. As with other jQuery UI elements, these are all handled by callbacks defined in the options.

For Example:

$("#selectable2").selectable({
 filter: "div",
 selecting: function(ev, ui) {
 $(ui.selecting).text('selecting');
 },
 selected: function(ev, ui) {
 $(ui.selected).text('selected');
 },
 unselecting: function(ev, ui) {
 $(ui.unselecting).text('unselecting');
 },
 unselected: function(ev, ui) {
 $(ui.unselected).text('unselected');
 }
 });

A unique class is also applied to an element on selecting (ui-selecting), while selected (ui-selected) and while unselecting (ui-unselecting). A selectable container element has the class “ui-selectable” applied on creation.

Drawbacks

I recently attempted to use selectables in a proof of concept for an upcoming project. Unfortunately, it left quite a bit to be desired from an accessibility perpective. Users required VERY EXPLICIT instruction that they were to draw a box around the objects they wanted to select. It wasn’t possible to easily select non-contiguous items. The plugin needs to dramatically improve its keyboard handling as well.

All in all, I consider jQuery UI Selectables to be a powerful and potentially useful tool for future projects. Unfortunately, I personally will be waiting to see how it matures before deploying in any production sites.

Find it Online

View A Demo of Selectables in Action here:
http://interface.eyecon.ro/demos/select.html

View Examples & The Online Documentation here:
http://docs.jquery.com/UI/Selectables

Find More information on the jQuery UI library at http://ui.jquery.com.

About The Author

Don Albrecht is a Web Designer & AJAX developer based in Rochester NY. He specializes in the creation of applications grounded in User research and general accessibility. He usually hangs out at AjaxBestiary.com a blog dedicated to all things AJAX and the tools behind the creation of engaging and rich web experiences.

The fix

Be sure that whatever it is you’re sliding (usually a div) doesn’t have any associated CSS attribute position declared. It doesn’t matter if it’s position: relative or position: absolute, or if this styling is applied to the sliding element or to a child of the sliding element; just rip it out of there.

Do that and your slideToggle should look all smooth in every browser.

First is my most recent freelance project, which was a site for the Mercy primary schools in Waterford. Secondly, there’s the Flash animation I created while at TSSG back in March.

These last couple of weeks in work I’ve been getting to grips with the jQuery JavaScript library to provide some cool effects on an interface I’ve been building. One effect I hoped to create was a tabbed sliding div type thing, like Panic have on their Coda site. I couldn’t find anything quite like that ready-made with jQuery, so I went about doing it myself. Using Gian Carlo Mingati’s excellent slideViewer as a starting point, I was able to achieve the desired effect. At the risk of getting sued, I’ve called it Coda-Slider.

• Check out the demo
• Download Coda-Slider

I’ve put a lot of info (features, bugs, etc.) into the demo itself, so I won’t repeat it all here. Feel free to use Coda-Slider in your own projects, and let me know how it works out. All the code is well commented or self-explanatory so you shouldn’t have much difficulty adapting it to fit your needs. if you do run into problems, let me know in the comments here.

Also, I’d really appreciate feedback on any bugs anyone notices. Suggestions for improvement are also welcome, although I likely won’t have time to implement any for a while.

UPDATE (Sept 21st, 2007): It’s been brought to my attention that there are some issues with Coda-Slider in Safari 2.04 on Mac. I’ve have no timescale for a fix; I may not get to fix it at all. Please take this into consideration if you plan to use Coda-Slider in your own projects. As of this writing, almost 2% of web users are using that version of Safari (source). Safari 3 is reportedly out of beta next month, so I’d expect usage of Safari 2.04 to decline after that.