A quick update to Coda-Slider: unique classes for navigation tabs
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.
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.
November 29th, 2007 at 2:58 pm
Kewl
November 29th, 2007 at 4:58 pm
[…] Get it at ndoherty.com: […]
December 5th, 2007 at 10:01 pm
[…] This is a nice minor variation on CSS tabs (with sliding animation) that i’ve seen. Uses jQuery, and also allows you to customize individual tab areas. Tags: CSS, Javascript, jQuery, Tabs […]
December 11th, 2007 at 8:47 pm
Very nice.
I might suggest speeding up the transition, removing effect caching, and making sure that the anchor tags return false when their click/release handler is called.
December 12th, 2007 at 9:16 am
Great update!
I might suggest be able to show the tabs under slide div.
and,does ver1.1.1 enable to it by changing some code?
December 12th, 2007 at 11:07 am
But the 10% of my users with javascript will not be able to see my content.
December 12th, 2007 at 6:30 pm
Is there a way to have the cross-links show as if they are active
like a different effect
I am trying to do something similar to apple
www.apple.com/imac
under the “why you’ll love imac” section
where there are 4 dots, to show progress
ie. page 1, page 2, page 3, page 4
under the why you will love imac sections
Thanks
Chad
December 12th, 2007 at 9:13 pm
Me and my co-worker have been stripping the excess code from Panics site to get this feature. And I spent all week dressing it up. I’m just happy someone is offering the code cause now I’m going to swap it out for yours. Thanks!
December 16th, 2007 at 1:11 am
very interesting, but I don’t agree with you
Idetrorce
December 23rd, 2007 at 1:19 pm
thats great. But ı just want to know How can I run a php code for example in wordpress the latest comments tag. is it possible? Can I put the code directly into a div?
December 27th, 2007 at 9:32 pm
@Chad MacDonald Says
Would love to see an updated version of the coda-slider, like in the love imac category. But the only difference is the repeating (carrousel) function, instead of switching back through all categorys to start at the beginning.
January 7th, 2008 at 6:18 pm
Would be great if you could break silence and reply to my email … that I just sent …
January 8th, 2008 at 11:40 pm
Well… terrific! Thanks to share valuable things like this!
Regards
January 9th, 2008 at 12:04 am
Hi there,
This is really great. I ran into a problem though. I am using the jquery ui tabs in conjunction with coda slider, and for some reason the coda slider only works on the first tab.
Here’s the demo:
http://www.cpmv2.com/test2/
If anyone has any suggestions I would really appreciate it.
January 9th, 2008 at 4:03 pm
off left technique instead of display:none for the css on the sliders solved it. Thanks Klaus.
January 12th, 2008 at 4:49 am
@ John,
I assume you mean users without javascript … and yes, they can see the content, it just a bunch of divs to them. Turn off javascript and see.
January 16th, 2008 at 8:45 pm
Seriously, if we could get the cross links to show what is current, like the tabs, this will be perfect.
Again, like www.apple.com/imac showing the dots as progress…
Thanks
Chad
January 18th, 2008 at 5:43 am
@Chad,
On the Apple website, actually the dots are images itself!! I did a similar implementation around two-three months back at:
www.advancewith.us/carousel
www.advancewith.us/kirlian-photography/gallery.html
You can also see this implementation for my modifications:
www.advancewith.us/TripleAceVideo
Thanks,
Dhaval
January 25th, 2008 at 11:46 pm
i hope someone can help me out.
what i did is to load ajax contents (multimedia and other kind of contents) to the “panelContainer” div, which was “kind of” successful.
the questions are
1) how to reset the current navigation tab to 1 every time the ajax content loaded? currently, i.e. if previous selected “tab3″, when i load new content, the current navigation tab will be forced to “tab3″.
2) i tried to use jquery media plugin with this slider plugin, but, the “overflow:hidden” wont work. all the video files are lined up horizontally. anyone has similar experience?
thanks.
January 27th, 2008 at 3:26 am
Hi…
Very nice, but just a minor graphical bug - On panel 4 you can see the youtube flash out on right side
You can see the error at http://aarhof.eu/clientside/youtubeerror.jpg
Firefox 2.0.0.11
Windows XP
January 28th, 2008 at 10:09 pm
as to my questions above. question 1 is solved by assigning different slider an unique id. ( this may not be the best way to solve it. )
just want to share with you guys.
thanks.
January 29th, 2008 at 3:16 am
Hey all. I’m an ant amongst giants here - as I know just enough css and javascript to copy something and make it work
- but I have a question on the coda slider that I’m just stumped on. I can’t figure out how to get the slider window to _not_ center in the browser window. I’ve tried changing all of the “center”s to “left”s, but, no such luck. Is there a way to make the entire slider default to the left side of the browser window (or at least inside a table cell)?
Thanks!
Ken
January 30th, 2008 at 12:22 pm
Hello.
Very nice script. Just a question : Is it possible to have a vertical slide ?
Thank’s. Kaimite.
February 4th, 2008 at 12:23 am
I have flash embedded in an iframe in one of the pages. When I scroll to the next page it floats outside the content area of the slider. Is there a way around this?
Thanks
February 4th, 2008 at 7:18 pm
Hi Niall,
I’d like to use this on a commercial site — is that okay?
Also, is there a “suggested donation” for use on a commercial site?
Thanks!
February 4th, 2008 at 8:15 pm
Hey Krystyn. Feel free to use this anywhere you like. It’s free to all. Just put it to good use
I won’t a suggest an amount to donate, because I appreciate any donation, no matter how small. Whatever you think is a fair will be fantastic.
Loving the colour scheme on your blog, by the way.
February 6th, 2008 at 11:40 pm
Very nice. One option I would like to see, but it’s probably not possible (if I understand what’s going on here) is to disable the left arrow if you are on panel 1 and the right arrow on the last panel.
February 11th, 2008 at 12:28 am
Hi.
Love the script. But, is there a way to disable the auto generated tabs?
I know it’s somewhere in the JS but haven’t a clue as to how its generated.
I would like to have several other slider divs that are linked from within the first few slider divs but don’t want them to show up in the tabs.
Cheers.
February 11th, 2008 at 5:54 am
Hello, I am using this code for my site.. I am using drupal, but what happens is that 1 tab is on top of all the other tabs, it looks weird.
February 11th, 2008 at 11:47 am
Hey, does any know if you can edit it so the tabs change like every 10 seconds? I’m using it for a magazine website with what’s in this issue in the tabs but would be good if there could change by them self.
Thanks
Ben
February 11th, 2008 at 7:26 pm
unfortunately the 1.1.1 slider seems to fail miserably on Opera 9.25 (latest version) — you get all the columns at once (tall and thin) and pressing any of the panel buttons besides #1 makes all the content vanish!
February 11th, 2008 at 7:27 pm
What’s Opera?
February 13th, 2008 at 9:04 pm
Great work! I love this slider. It make such a great visual presentation!
One question: Is there any way to make the window have a dynamic height? Thanks!
Nick
February 14th, 2008 at 11:55 am
I love this!
Is it possible to put multiple slider on
one page?????
Thanks!
February 16th, 2008 at 9:39 am
Yes I have the same question as “Ko”
In a page is it possible to embed one or more slider?
February 16th, 2008 at 9:22 pm
Hi I tried your newest version with application/xhtml+xml mimeType since I want my source code to be valid Xhtml 1.1 but firebug returns the following error:
An invalid or illegal string was specified” code: “12
I might do some digging. If I find anything, I will let you know. But just so you know your script does not validate against Xhtml 1.1 completely.
February 21st, 2008 at 3:55 pm
Great script! I’m also trying to get it to scroll vertically. Can you show me how?
February 23rd, 2008 at 3:59 pm
It is very cooland nice. I want to know how the contents in the panels could be scrolled down in case the content is more.
thanks
February 27th, 2008 at 6:30 am
like another poster, was considering re-creating from panic’s site. very excited about your alternative. many thanks!
e
February 29th, 2008 at 8:06 pm
Hi,
How I do to disable Top tabs ?
And leaving only the cross-links?
Tnks
March 3rd, 2008 at 1:41 am
Great, great plugin.
I’m currently updating my website and will be using this a few times.
Might I ask, are you able to have multiple sliders on one page, only having different heights to the ‘.stripviewer’?
I’ve made a few changes to the CSS to separate most prefs, but having difficulty trying 2 sliders, different heights.
Many thanks, this is an amazing jQuery plugin.
James
March 5th, 2008 at 3:55 pm
Nice work & may the forces be with you
March 7th, 2008 at 1:27 am
Thank you for this slider. Does anyone knows how to get ride of auto generated link ie Panel 1 , Panel2 etc which sits at the top of the slider.
Regards
March 11th, 2008 at 6:43 pm
Hi, this is really great script, but i have a question. I know it was once here, but i couldn’t find the answer. Is there a possibility of change same-page cross-links class? To differ which one is active?
Thanks for replying.
March 11th, 2008 at 6:46 pm
i’m sorry for replying so soon, i found the solution. actually it was easy but i was changing another file, therefor i haven’t seen any changes
my fault…
and if any one wanted:
[code]
jQuery(”a.cross-link”).click(function(){
jQuery(this).parents().find(”.stripNav ul li a:eq(” + (parseInt(jQuery(this).attr(”href”).slice(1)) - 1) + “)”).trigger(’click’);
jQuery(this).addClass(”current”).parent().parent().find(”a”).not(jQuery(this)).removeClass(”current”); // wow!
});
[/code]
March 14th, 2008 at 6:23 pm
Hi, does anyone know if it’s at all possible to insert coda-slider into an existing div with a background image (for slide show purposes)? All i can find examples of are not placed inside of a div but rather the body.
March 15th, 2008 at 11:07 pm
I am using the slider on http://theembassyofgod.com/new/
but the loader div is not hidding the content layers/panels… i have made the loader height quite high, to force the panels off the page… but thats not a great solution. Any ideas?
I have had to adjust the z-index, to make sure the panel was under the menu…
Any ideas? Take a look… http://theembassyofgod.com/new/
March 27th, 2008 at 12:08 am
How do I remove top tabs?
March 28th, 2008 at 4:21 am
I dont know how it to integrate to my Datalife Engine :(. Path not understanded my DLE. Please help me, how integrate it to DLE? :(((
P.S. I m from Russia, and maybe my English not good :))
please guys, answer me on sanka_s@mail.ru
March 31st, 2008 at 2:07 pm
This script is great, didn’t take me long to use.
Only one small issue, all my button are images, I got the rollovers working using a:hover but can’t get the active state using a:current.
Is there a way to do this?
Cheers
March 31st, 2008 at 3:12 pm
Hey Neil,
Check this one out:
http://advancewith.us/TripleAceVideo
Hope that’ll help
Cheers,
Dhaval
April 6th, 2008 at 11:41 pm
Hey, I’ve used a hacked coda-slider on the front page of our website - http://lawbore.net. Thanks for a very useful bit of code!
April 7th, 2008 at 5:42 pm
hello — thanks for this… but how can i remove the tabs? i just want to use the arrows and am having a hard time removing the panel titles / tabs.
April 7th, 2008 at 6:20 pm
Courtney,
Try adding this to the css file:
.stripNav {display:none !important}
does that do the trick?
April 10th, 2008 at 1:32 am
[…] Coda-Slider Layout […]
April 16th, 2008 at 9:48 pm
I wonder if you can answer a small question. I noticed that the links that trigger the slide are set in anchor tags with the class “cross-link”. I am needing my triggers to be DIV tags with onclick usage. Is it possible to pull that off?
April 18th, 2008 at 4:03 am
Hello! I did get this to work as I wanted it to, so thanks for the help. However, one thing I’m having trouble with is that I have some CSS dropovers from my site’s left navigation — and instead of showing up over the slider, they show up behind it in IE 6 and 7.
I tried setting my navigation dropover with a higher z-index and setting the slider styles at z-index = 1, but that didn’t do anything.
Do you have any ideas?
Thanks, Courtney
April 18th, 2008 at 6:58 am
Great script.
Is there any way to scroll the panels automatically; say, skipping to the next panel every 5 seconds?
April 24th, 2008 at 7:41 am
I noticed a bug in firefox 3 when you add another tab it goes onto the tab links goes onto the next line. Works fine in Safari.
April 28th, 2008 at 8:26 pm
I’m currently trying to modify your Coda-Slider so that the slider will automatically cycle through the pannels lets say, every 7 seconds. Also trying to have it so that if a panel is cross-linking to have the slider NOT automatically change. My Javascript is a bit rusty so any help would be GREATLY appreciated.
April 29th, 2008 at 4:03 pm
Hi,
I think it’s a great script! But i want to use it with the width 100%, but i can’t get it to work. When i change the width to 100% the slides print under each other. Do u know how to make this work?
Thanks!
April 29th, 2008 at 4:44 pm
Front-ender: I don’t think you can use it with a relative (percentage) width. The whole mechanics of the slider work by having fixed-width panes alongside and a fixed-width viewing window onto them.
April 29th, 2008 at 8:42 pm
How would you go about auto figuring the height of each panel and adjusting the viewing window up or down when each panel is displayed? Some of my panels contain more content than others and I’d like my footer to move up or down in relation to the height of the current panel.
April 29th, 2008 at 8:52 pm
Steve - great idea. You could use the jquery dimensions plugin to get the height of each of the panel divs and then use the animate function to shrink and expand the viewing window / wrapper at the same time as the panel slides. Shouldn’t be too tricky.
April 30th, 2008 at 1:12 am
Howard - the dimensions plugin docs are not exactly clear on how to go about finding the height and using it. Any pointers or know of any better documentation to the plugin? My slider has 9 different panels to it. How do I pull the current panel’s height and apply it (plus padding and/or margin) to the .stripviewer height?
April 30th, 2008 at 12:01 pm
Steve: off the top of my head, I’d do something like this (untested)…
Find the panel parent of the link of the class a.current. This is your current panel. Get the height of it simply by calling the height function like:
var the_height = $(panel_div).height ()
and then assign it to the viewing window like
$(’.stripviewer’).height(the_height)
This would have to happen at the same time the switch of panels occurs, so you’d need to bind it to that event click or the function that does the panel sliding in the original jquery code.
Do you see what I mean?
May 1st, 2008 at 3:36 pm
Can anyone tell me how to go about doing more in the navigation tabs? I’d really like 2 individually styled elements in each tab — an and a . Is this easily done? Can someone help?
I am pretty much a javascript newbie
May 1st, 2008 at 3:38 pm
Looks like part of my message was filtered.
I’d really like 2 individually styled elements in each navigation tab — an H2 and a paragraph.
May 2nd, 2008 at 11:34 pm
This thing needs a forum (besides these comments). I have so many questions, and I love to see more example of this in action. I’ve use this on a site but it’s not doing what i’d like it to do. I’m not asking it to do a lot, and most of my questions are probably more CSS related. What I am facing:
- Moving those tabs off the top and styling them (I currently have them turned off and moved the crosslinks around to use them as nav, but I can’t get them to stle in a ‘current’ state like the tabs do
- Getting flash elements to not go over the top when they roll out to the next pane (strangly enough this is mostly a Firefox only problem for me
- Having the slider sit where I want it to, in a larger div, with all of my nav, header, etc where it should be.
you can see an example of what I’m working with here: http:www.theknowbar.com
-
May 3rd, 2008 at 12:55 am
I’m sorry I can’t answer everybody’s comments. Really, I am. I’m just too busy with other projects to play around with Coda-Slider and find solutions to all these issues.
That said, I do believe the issue of Flash movies appearing outside the slider can be solved by using <param name=”wmode” value=”transparent”></param> just before you close the object tag.
Try googling “valid xhtml flash embed wmode” or something like that. Should do the trick.
Good luck.
May 3rd, 2008 at 12:58 am
Actually, I covered a lot of these issues (including the Flash one) in a previous post. Sorry I didn’t have it easier to find on here:
http://www.ndoherty.com/blog/2007/10/29/coda-slider-11
May 5th, 2008 at 4:27 am
Great plugin, but does anybody know how to set it so that the slides transition automatically?
May 9th, 2008 at 3:43 pm
Hello everyone! Thanks Niall for the great script. I have it working perfectly on a website that uses the LavaLamp JS menu (http://www.gmarwaha.com/blog/?p=7) as the tabs. Looks and works great!
I am however having one nagging issue, likely due to my last of CSS skillz. Anyone have any recommendations on auto-adjusting the height based on the size of the content in each LI Coda-Slider uses? I have some pretty long content within each tab, while some have nearly nothing. As you can imagine, the ones with nothing still have an enormous amount of extra space since the other LI’s have a much greater height. I could use overflow but the scrollbars in the page annoy me and look horrible…
May 9th, 2008 at 5:29 pm
Seeing as everyone has been asking for a fix to make the height follow each panel’s content individually, I thought I might as well write it. Pretty useful for me too
Get my hacked version of the coda slider code at:
http://lawbore.net/js/jquery/coda-slider.1.1.1.js
You can see it in action on the front page of http://lawbore.net - I don’t use the left/right nav, but it should all work fine still.
(nb: I haven’t tested it yet with multiple sliders on one page.)
Nick: Maybe for the next version you could include this extra functionality and have it configurable on/off?!
Enjoy!
Howard
May 9th, 2008 at 5:39 pm
PS. I said “Nick” above, but I meant Niall the writer of the coda-slider!
May 9th, 2008 at 5:42 pm
Very cool Howard. The implementation on your site looks great. Thanks for sharing…
May 11th, 2008 at 3:31 pm
I am seeing a bug in IE7 (occurs in the 1.1.1 demo) when resizing the browser window.
If you resize the browser (IE7), the slider does not stay centered in the page. Its not easy to notice since the background of the slider and page are similar. Take a look at the black border of the slider. Initially, its centered correctly on the page. But if you resize the browser, you will notice that the slider stays the same distance from the left and will no longer be centered correctly - until the browser is refreshed.
Works in FF and IE6 fine though.
Any one have any thoughts on how to fix this?
May 16th, 2008 at 5:44 am
Great slider, thanks!
Anybody figure out a trick to get multiple sliders working on one page?
Once I have more than two sliders on a page the cross-linking goes wacko
Got started here: http://teef.org/test/
I’m no javascripter, just able to hack. Please help!
June 4th, 2008 at 4:06 pm
First off thanks a bunch for this slider. It works super!
I’m trying to integrate this slider in a project I’m working on. My challenge is getting the slider to move from whitin a flash movie.
Does anyone know how to call the slider script from a javascript function, so I can call this function from the flash movie? Or does anyone know another genius way to do this?
Thanks in advance!
June 4th, 2008 at 4:25 pm
@ Judo; If you recall with this slider you have the ability to link to a slider externally using the “#sliderNumber”. You’ll just have to call the url from inside Flash.
– AS 2.0 –
buttonInstanceName.onRelease = function() {
getURL(”http://www.somesite.com/sliderPage/#sliderNumber”);
}
Make sure you have the url pointing to the same page as the slider (and as the flash I’m assuming)
– AS 3.0 –
var myURLRequest:URLRequest = new URLRequest(”http://www.somesite.com/sliderPage/#sliderNumber”);
buttonInstanceName.addEventListener(MouseEvent.CLICK, sliderChange);
function sliderChange (event:Event):void {
navigateToURL(myURLRequest, “_self”);
}
*God I’m starting to hate AS 3.0*
I think that should work for you. If not, let me know.
June 4th, 2008 at 4:26 pm
Wow… I messed up on that one.
Sorry about that.
June 4th, 2008 at 4:27 pm
Wow… I messed up on that last one. That was me.
Sorry about that.
June 4th, 2008 at 4:40 pm
Thanks for your quick reply Scott!
The problem with this site is that it is not supposed to reload, which happens in IE when I use the method you suggested. Even more strange is the fact that when I try this in firefox, nothing even happens. (Do I love the way different browsers use different interpretations of standards).
Anyway, I’m looking for a way to call the jquery or coda script directly through javascript, so the slider will slide to the chosen slide. (that’s a lot of slide in one sentence), but I have no luck trying to make sense of the code that makes that happen for, for instance, the cross links or the tabs.
Thanks again for your interest in my problem.
June 5th, 2008 at 10:21 am
Very nice script!!
But how to make it auto rotate? e.g go to the next panel every 5 seconds automatically.
Thanks
June 12th, 2008 at 10:39 pm
Fantastic script! Thank you!
Is there a way to get the script to load a particular panel first (OTHER than panel 1, of course).
For example, if I had panels 1-4 on a page, but wanted Panel 4 to display when someone first visits the page.
Thanks for any assistance!
June 13th, 2008 at 4:14 pm
Hi,
Am not the best when it comes to css and javascript but am having problems resizing the content window. I’d like the window to be a bit larger as my content wont fit inside it. every effort that i have made will end up in panels showing horizontally accross the page.
Thanks for your help
June 13th, 2008 at 4:46 pm
Mr Mike: loading the page with #4 at the end of the URL will do that for you
Festim: got an URL for that?
June 13th, 2008 at 5:13 pm
Howard thanks for your quick interest, unfortunately am testing locally but I managed to sort out the problem, even though it took me a good few hours.
I have one more question though, you posted the Javascript file for the automatic height but somehow that aint working for me. Any suggestions?
Thanks again
Festim
June 13th, 2008 at 5:27 pm
Festim: Almost impossible to debug without seeing it I’m afraid. Check that you’re actually referencing my Javascript and not a different version. Possibly changes you’ve made to the HTML/CSS are making the height switch no longer work. I could say, if I could see it.
June 13th, 2008 at 6:25 pm
Hi Howard,
I have uploaded the files at this address: http://studenti.ztudenti.com/
Please have a look around and let me know what I have done wrong.
Thanks a lot
Festim
June 13th, 2008 at 7:52 pm
Looks to me like you’re still using the original packed version of the javascript in the SCRIPT tag. Replace coda-slider.1.1.1.pack.js with a copy the version of coda slider I linked to. Unless you repacked my version ??
June 13th, 2008 at 8:06 pm
Does anyone have a fix for the IE7 bug - where if you resize the browser window, the slider panel does not recenter to the page (Greg Marshall comment above details the problem). I am having the same issue.
In the demo, if you resize the window in IE7 (make the width larger), you will notice that the slider will not recenter to the page - but rather stays the same distance relative to the left side of the browser before the window resize takes places. Its not as noticable with the demo due to the colors but you can see if you look where the slider (white) gets positioned relative to the background (gray).
June 13th, 2008 at 11:15 pm
Ah thank you very much, earlier I just replaced the contents of the Javascript file, because I thought its been linked already but it wasnt.
Thank you very much for your help.
Festim
June 23rd, 2008 at 8:49 pm
I just wanted to say thank you to Howard Richardson for sharing the modified codaslider.js file! You are a lifesaver!!!! THANK YOU!
And of course, a big thank you to Mr Doherty!
June 24th, 2008 at 1:00 am
Is there any way to make it so that the arrow on the left and right would slide in a circular motion instead of sliding backwards to the first tab?
July 1st, 2008 at 2:32 pm
The “wmode” flash fix doesn’t work for Firefox. I tried it, and it appears the same as it does when I didn’t have that added. It looks right in Safari, but yes.. still juts out of the container when a flash object slides thru.
http://adxcreative.com/projectHub/thebluffhomes/
I do remember there being some sort of fix for something like this… i think it had to fade out the flash object using DOM scripting. I can’t remember, for the life of me, where I saw or used that effect. It must have been a year ago or so.
If anyone has a ‘real’ fix for this, that’d be great. Thanks.
July 1st, 2008 at 2:40 pm
http://www.balupton.com/sandbox/jquery_lightbox/jquery_lightbox/js/jquery.lightbox.js
find this part…. i’m not the greatest at javascript, but if this were used to shut off any flash objects when the motion starts, then reset when the motion stops, i think it could fix the problem.
start: function ( )
{ // Display the lightbox
// Fix attention seekers
$(’embed, object, select’).css(’visibility’, ‘hidden’);//.hide();