Introducing Coda-Slider
UPDATE: (Oct. 29th, 2007): I’ve just released a new version of Coda-Slider. Check out the details here. The original version referred to in this post remains available for download.
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.
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.
September 16th, 2007 at 11:17 am
Nice work Niall.
Looks similar to JCarousel…. but bigger.
September 16th, 2007 at 11:14 pm
Cheers, Chris.
jCarousel was another I considered modifying, but it just had way too many “features” for my liking. slideViewer was much simpler and more straightforward, which was great for me being a JavaScript novice and everything.
September 17th, 2007 at 8:58 am
Niall,
thats fantastic. I’m happy the slideViewer insipred your work…
Keep up the great work!
Ciao
GC
September 17th, 2007 at 7:48 pm
Jcarousel can turn into a bit of a nightmare once you want more than one on the screen at the same time too. better off developing your own one.
Nice!
September 19th, 2007 at 7:43 pm
thx for this beautiful piece of work…
just one thing that i notice right away… what about accessibility?
when the js is turned off tabs are there reacting on onclick but nothing is happening?
is that possible to be done in the future?
and thx again…
btw… i was thinking about adding a combobox, for a case that there is too many tab items or too long ones, and also a vertical variant and i think that would be a great stuff because i had not saw something like that! :-))
i know it looks like im asking much….
maby just one hint
thy anyway, and keep on with good work!
cheers!
September 19th, 2007 at 8:08 pm
Hi Mario, thanks for your comment.
It was even worse for me when I disabled JavaScript (none of the slider content displayed at all), but I didn’t worry too much about accessibility when building this.
About 95% of web users have JavaScript enabled these days, and with more and more sites depending on it for AJAX and interface effects, I really wonder who in their right mind would browse the web with JS disabled. They’d be missing so much!
Still though, you make a valid point, and there will always be that client who demands that their website be 100% usable with JavaScript disabled. With that in mind, I’m sure that Coda-Slider could be modified to work in the absence of JS, but I’m not the guy to do it, at least not until that client comes along
As for your other points:
I can’t see a combo-box being a good idea from a usability point of view, but I imagine it’s possible. A vertical variant sounds simple enough. You could actually do that just by changing the CSS. if you wanted the slide to be up/down instead of left/right, you would need to change the JS however.
JavaScript stats: http://www.w3schools.com/browsers/browsers_stats.asp
September 20th, 2007 at 11:14 am
firstly thx for your really ample answer.
yes i guess you got the point about accessibility!
well, i would love if i could engaged myself more in programing but im just js novice…
combo box is somehow doable because i saw some nice combobox example proving that is possible, doing quite nice and simple without js
example: http://www.dynamicdrive.com/dynamicindex17/comboviewer.htm
i would use that one but it doesen`t have that nice easing effect,and also i wanted to use only one js library because of possible conflict among different js files.
also there is jquery accordion already done something similar and i thought that would be nice thing to have it here on codaslider too..
example: http://dev.jquery.com/view/trunk/plugins/accordion/
but as i say, everything is fine just like this!
thx once more
bye!
September 20th, 2007 at 7:13 pm
Was looking at your code there to see if i could rob any of (probably going to be building my own one soon as JCarousel is proving to be overkill for what we need) it when i realised that it doesnt seem to support safari?
September 20th, 2007 at 7:51 pm
Hey Chris.
It should work fine in Safari. Granted, I could only test it with Safari 3 beta for Windows, but I had Jason check it on a Mac and he said it was all good. Have you come across any specific bugs?
September 21st, 2007 at 1:09 am
Props on the slider!
Does anyone know how to achieve cross linking between tabs? Adding links in the content to a particular tab? Any help would be hugely appreciated!
September 21st, 2007 at 1:16 am
@ parrfolio: Thanks for the comment. There’s no easy way to do that at the moment. It would take a bit more JavaScript work.
It’s one of the best suggestions yet though. I might even get to add it over the weekend. Stay tuned!
September 21st, 2007 at 1:35 am
If you could add that I would be forever grateful. Once again thanks for the great code to work with.
September 21st, 2007 at 8:08 am
Two other effects which I’ve been notified of via email and readers might find of interest:
http://people.cs.uchicago.edu/~meweltman/sliding_tabs.html
Sliding tabs, which might be a good way of fitting in more tabs across the top without doubling-up or overflowing. I have no plans to incorporate this into Coda-Slider in the near future as there are other additions which interest me more. Interesting nonetheless.
http://www.stompfrog.co.uk/
Up/down and left/right slide effect. I really like this, but be warned that Coda-Slider would need heavy modification to behave similarly. It would actually be easier to start from scratch to achieve the same effect as stompfrog, and it would likey take less JS than what Coda-Slider uses.
Keep the feedback coming!
September 21st, 2007 at 9:51 am
Hey man! Real nice work on the site! Love the style
and this coda slider thing is well cool (/tries to think of somewhere to use it). Good job!
September 22nd, 2007 at 7:30 pm
hey there…
love this. it’s pretty much exactly what we’ve been looking for as a clickable rotating header for our site. wondering 2 things…
1 - is there a way to make it so the content rotates on a timed schedule as well as when clicked?
2 - when i’m running this - it seems to stack the tabs. i thought it was due to space issues - so i made the titles 1 digit numbers, but that didn’t help. any thoughts?
andy
September 22nd, 2007 at 11:37 pm
@Adam: Thanks man, loving your site too. Keep them links coming!
@Andy: Thanks for your comment…
1. That should be possible quite easily, using setTimeout. You could take out the code for the right arrow click and wrap it in a function, then call that for the right arrow click and also have it called at desired intervals using setTimeout.
2. One of the last things I added to this was centered tabs. Initially they were floated left, but to really replicate Panic’s slider I wanted them centered. To do this I needed to work out the width of the .stripNav UL generated at run time. Lines 36, 54 and 96 in slideviewer.js show how this is done (be sure to check the comments before each line):
http://www.ndoherty.com/demos/coda-slider/slideviewer.js
Line 36 might explain the difficulty you’re having, Andy. To get the true width of the UL, we have to account for any CSS margin added to the list items. In the main CSS of the demo, I have a margin-right of 2px for each LI, hence the initial value of navWidth = panelCount*2. (If margin-right were 3px we’d start with navWidth = panelCount*3, and so on.)
My guess is you may have added to the margin in the CSS and that makes the UL bigger than it’s presumed to be. This results in the tabs “stacking” or overflowing onto another line.
Of course, I may be wrong; your problem could be different to what I’m imagining here. If it persists send me a screenshot and I’ll see what I can do.
September 22nd, 2007 at 11:41 pm
Also, I must highlight here that I was recently made aware of an issue with the slider in Safari 2.04 on Mac. Coda-Slider DOES NOT WORK in that browser, and I have yet to find a fix.
That version of Safari is popular enough that you should think twice about using the current release of Coda-Slider in your projects. You have been warned!
September 23rd, 2007 at 12:28 pm
Hi Niall,
First of all, great work mate!
Love the slider..
I’m trying to set up the slider with dynamic content and tabs. I can see that parrfolio has asked you regarding cross-linking before, which is what i also need to be able to link to the content.
I don’t know how you expect to do this type of cross-linking, but a possibility is posting the page-link in the url? I hope you decide to look at the cross-linking function, and I’m willing to make a donation for your time.
You can follow the progress here:
http://smart-web.dk/slider/
September 23rd, 2007 at 5:33 pm
I have experienced a bug, which might be easy to fix with some css. When you apply the overflow attribute in Firefox, the slider behaves a but funny.
You can see what i mean here…
http://smart-web.dk/slider/ (overflow works fine in IE)
Thanks…
September 23rd, 2007 at 5:46 pm
Hi Lars, thanks for the feedback.
I haven’t had a chance to work on the cross-linking this weekend. Sorry folks.
As for that bug, I’m seeing it too, Lars. Where are you applying the “overflow attribute”? Is this in addition to the existing CSS in Coda-Slider?
September 23rd, 2007 at 6:10 pm
Hi Niall,
The class text_content has the following style:
.text_content {
overflow: auto;
height:500px;
padding: 0 15px 0 0;
}
Header
Some text
September 23rd, 2007 at 6:13 pm
Hmm, try this direct link to the styesheet instead:
http://smart-web.dk/slider/slider.css
September 23rd, 2007 at 6:15 pm
Yeah, just caught that myself in Firebug, Lars. If you change that overflow in .text_content to hidden, or just take it out altogether, it should work properly.
Very nice design, by the way.
September 23rd, 2007 at 6:21 pm
But if I take the overflow out, it won’t show the content when it exceeds the max height, e.g. on the page “Kontakt”
September 23rd, 2007 at 6:21 pm
Thx for the comment on the design btw
September 23rd, 2007 at 6:30 pm
I understand your dilemma, Lars, but I never intended for the max-height to be exceeded in Coda-Slider. You may be able to get the desired effect using an iframe or by some other means. If you do, please let me know.
Alternatively, you could spread out that contact form to use up the white-space on the right, and then there would be no need for scrolling or overflow.
September 23rd, 2007 at 7:21 pm
I’ll just use your solution and change the contact form so it can fit the height.
Thanks for the help…I’ll be your biggest fan if you find a solution in regards to the cross-linking.
September 25th, 2007 at 7:59 am
Hi Niall,
If you’re up for the challenge with the cross-linking I’m personal willing to make a 100 $ donation, and I’ll request others to do the same for your great work!
September 29th, 2007 at 6:47 am
Looks pretty sweet! I like it alot.
October 7th, 2007 at 9:32 pm
Hi Niall, try the new easing 1.2 plugin and see if codaslider works with jquery 1.2 too. It should. the only thing you should change, is the name of the easing function you’re using. hope it helps, let us know.
Cheers
GC
October 8th, 2007 at 7:38 pm
Hi Niall, the Codaslider work fine on my site but i have some question.
How to move the “top navigator” to bottom?
Because my new project has a flash on the top of page so i want to move the navigator to bottom of page.
Thanks
Tommy
October 8th, 2007 at 7:48 pm
@ Gian Carlo: Thanks for that. I’ll try get an updated version out soon, although I’m flat out busy right now so it could be a week or two.
@ Tommy: Good question, a few people have been asking that. You’ll need to open up slideviewer.js in a text editor and make two small changes.
First, on line 46, change jQuery(this).after to jQuery(this).before
Then, on line 60, change jQuery(this).parent().parent().parent().prev() to jQuery(this).parent().parent().parent().next()
I hope that helps.
October 8th, 2007 at 7:50 pm
Also, if anyone has used Coda-Slider in their own work, please let me know. I’ve seen some very nice implementations of it so far and I’d like to get a showcase together eventually.
Thanks.
October 9th, 2007 at 4:09 am
Hi Niall
i’ve confusing about your suggession.
@Niall : First, on line 46, change jQuery(this).after to jQuery(this).before
@Niall : Then, on line 60, change jQuery(this).parent().parent().parent().prev() to jQuery(this).parent().parent().parent().next()
Are you suggess me change its to default!? Could you please to make any demo ?
Thanks
October 11th, 2007 at 2:36 pm
Love the slider, and really appreciate you making it available.
That said, I’m with Lars on the cross-linking idea. I’d be happy to make a donation to help development of this functionality
October 12th, 2007 at 10:03 am
Hi! Great plugin, Niall! Thanks for your hard work! I will be waiting impatiently for next release with JQ 1.2 support
October 17th, 2007 at 3:06 pm
First of all. great plugin!
But.. I think I found some bug in it. When I click several times quickly on the tabbutton, the menu stops to work. I tested it with IE7 (demo page).
http://www.ndoherty.com/demos/coda-slider/
Is there a solution for this?
October 17th, 2007 at 3:15 pm
@ stalkert: Well spotted. I hadn’t noticed that myself. I will try fix that bug in the next release, which is constantly being pushed back due to time constraints.
October 22nd, 2007 at 2:00 pm
Linking from within one panel to another can be enabled thanks to the community at Experts-Exchange.
“For example, add the following anywhere in the html code (inside a panel if you want as well):
Goto panel 1
This says: Find the div with id #slider1, get the previous element (the nav bar), find the link with index 0 and trigger it’s click event. Here’s the same for Panel 5.
Goto panel 5”
This works well for me! Hope others find it useful
October 22nd, 2007 at 2:02 pm
Whoops. The code got swallowed. Standby…
October 23rd, 2007 at 1:13 pm
I’ve noticed that you can’t select the text inside the widget in Firefox 2 Win. Has anyone else noticed this?
October 23rd, 2007 at 1:14 pm
[…] http://www.ndoherty.com/blog/2007/09/15/introducing-coda-slider/ […]
October 23rd, 2007 at 2:29 pm
Hey Don, thanks for the comment.
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.
Unfortunately, using that property also stops the text from highlighting at all in Firefox. Just take it out and you should be all good.
October 23rd, 2007 at 2:31 pm
Hi Niall, I decided to ask your help via your site, today
I’m trying to use the Lightbox2 effects on the images that I put in one of the panel of the coda slider, but it doesn’t work…
Maybe someone tried this before? Any suggestion?
I really cannot understand javascript, so maybe it’s a silly question…
October 23rd, 2007 at 2:34 pm
Thanks for the info. It’s a minor bug and doesn’t change the fact that I recommend the software highly. I’ll add your fix to my blog post. I wonder if this would fix Sara’s question as well?
October 23rd, 2007 at 2:38 pm
Sara,
You might want to try using a jQuery based box instead of lightbox2. Lightbox2 is prototype / scriptaculous based and may have conflicts. It also increases your download size without reason.
Try this:
http://15daysofjquery.com/jquery-lightbox/19/. Although I would also make sure you remove the moz-select attribute as well.
October 23rd, 2007 at 2:41 pm
Good advice, Don. I’d recommend that too, Sara. Let me know if you still have problems after trying that.
October 23rd, 2007 at 2:42 pm
mmm… it seems that -moz-user-select it’s not related with my problem…
October 23rd, 2007 at 2:46 pm
I thought it could be a conflict between scripts… perhaps something related to onload attribute. But I cannot figure out where the conflict may be…
October 23rd, 2007 at 2:49 pm
Sorry Don, I was writing while you was posting your advice…
I’ll try your link! Thanks!
October 23rd, 2007 at 2:49 pm
In my experience, mixing low level JS frameworks is invariably a recipe for headaches. Try using a thickbox / jQuery based alternative. It will make your debugging a whole heck of a lot easier.
October 23rd, 2007 at 3:08 pm
Thickbox works really fine!
Thank you all!
Soon I will post the link to my new site
October 23rd, 2007 at 3:11 pm
Wonderful, I’m glad I was able to help.
October 25th, 2007 at 5:26 pm
[…] A situation that was brought to my attention while participating in the comments on a blog post at http://www.ndoherty.com/. Conflicts like this are a common experience for many of us and I thought this was a good […]
October 26th, 2007 at 4:36 pm
Wolfgang where you at? Can you please post your update to allow cross-linking to other panels with in a panel? Thank you.
October 27th, 2007 at 5:02 am
Hi Niall
Just wanted to bring to your attention, in IE 6 and 7, if you click twice on a tab, the slider will stop functioning altogether. Tested it on your demo and it does break. Otherwise, woks splendidly in all other sane browsers!
October 27th, 2007 at 4:17 pm
Thanks for all the bug reports.
I’ve been working on the next release of Coda-Slider for the past few days, and I believe I’ve fixed everything apart from the issue with Safari 2.0.4.
Cross-linking has also been added. I should have it all posted online here in the next two days.
October 27th, 2007 at 4:51 pm
Sweet, deal Niall! Will it be working with jQuery 1.2.1 and easing 1.2 as well?
October 27th, 2007 at 5:02 pm
Absolutely. In fact, upgrading to the newest version of jQuery seemed to fix that tab-multi-click bug in IE.
October 29th, 2007 at 5:10 pm
[…] 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 […]