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.
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.
- - -
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();
July 12th, 2008 at 5:40 pm
Is there a way to make it slide up/down rather and left/right?
July 21st, 2008 at 7:55 pm
Thanks for this, works great, but I do have something I am trying to solve and maybe you have a hint for me.
I would like to have a form on the first tab and on submitting the tab I would like to switch to tab 2 and also refresh the content of tab 2 without reloading the complete page.
Also I would like when clicking on a link on tab 2, to switch back to tab 1 and pass some values to that tab to fill in some fields of the form.
July 24th, 2008 at 1:04 am
here’s one i have yet to see….
Problem 1: i can’t get the overflow to work on the .panel class. If you have enough content that it requires some scrolling , it doesn’t work.
Problem 2: when i DO apply the overflow to ANY class near, on, or around the content panels, the js gets funky and shakes when going from panel to panel.
Any ideas?
July 24th, 2008 at 1:18 am
Eric… got a demo link for that?
July 24th, 2008 at 1:48 am
ok… so i realized that the shaking issue is an FF problem… weird that’s its just FF.
I put the overflow on the .wrapper tag… still no scrolling.
http://www.ericdmunoz.com/coda/
July 24th, 2008 at 11:20 am
Ow, that’s nasty! On linux FF it doesn’t only shake, it screws up the whole window redraw.
Have you tried removing height:100% from the .panel class? I have a suspicion that would help.
Cheers,
Howard.
July 24th, 2008 at 2:26 pm
hmm…. no go… sad… any other ideas?
July 24th, 2008 at 2:46 pm
Well you might try using my dynamic-height version of the script (posted earlier on this board). You wouldn’t get scrollbars, but at least it wouldn’t screw up so bad and all your text would be visible.
July 24th, 2008 at 7:14 pm
howard… i’m finding some stuff on it, but not a plugin or any script… could you point me in a more specific direction amidst 100 comments?
Thanks,
Eric
July 25th, 2008 at 11:20 pm
Try:
http://lawbore.net/js/jquery/coda-slider.1.1.1.js
July 27th, 2008 at 7:39 am
hi
i like this tab but i have a small problem when i save the file as (asp) file
the tab dosn’t work when i click it open an empty page
what should i do to make it work
please help me
August 5th, 2008 at 1:39 pm
I get the same problem as Eric was/is having in Firefox. Is there a fix for this?
August 8th, 2008 at 11:59 pm
Hello,
I would like to have two extra sliding arrows (» and «) next to the stripNav. Right now they are next to the panel slider.
Is there a quick way to clone the arrows?
Greetings
August 9th, 2008 at 12:50 pm
Hello
can someone help me
i use the slider in the left of my web page but i can’t but any thing in right
of the slider how can i do this????
becouse when i insert a pic on the right all the slider come down
August 12th, 2008 at 9:29 am
I too have the same “shaking” issue as Eric and Kevin. It seems to only have this problem on Firefox 2.0.x as 3.0 seems to be working fine. Check out my problem here:
http://www.nguyenware.com/wedding/story.htm
Other than that it’s a beautiful script. I also tried Howard’s script and it doesn’t look to be helping… Any ideas?
Thanks!
August 12th, 2008 at 6:08 pm
Hi, (Help!)
I have added my own images to the navTab and it shows correctly, but now I have two issues:
1. I still have the tab “text” showing over my nav images (Panel 1, Panel 2, etc.). How can I turn the text off so only the nav image shows? (priority over issue #2)
2. For the life of me I can’t make the “current” tab show the right image. Current state shows the “current” image. Hover state shows the “hover” image. Active state shows the “current” image.
Here is a brief example:
.stripNav li.tab1 a { background-image:url(”images/nav_orlando.gif”); width:80px; height:54px;}
.stripNav li.tab1 a:hover { background-image:url(”images/nav_orlando-hover.gif”); width:80px; height:54px;}
.stripNav li.tab1 a:current { background-image:url(”images/nav_orlando-active.gif”); width:80px; height:54px;}
Any help will be GREATLY appreciated.
Thanks in advance.
Josh
August 12th, 2008 at 7:01 pm
@Josh,
I have the answers to what you need to do, but you’ll need to know a bit of JQuery and CSS to fix them. I don’t have the time to do it for you, unfortunately.
1. You’ll need to edit the JQuery code. The names get written into the tabs by the JQuery at start-up. They’re taken from the title property of the panel div. You’ll need to make the code write an empty string instead.
2. You’re doing this wrongly. “current” is a regular class which gets added and removed on-the-fly, not a state like “hover” or “visited”, which is how you’ve written it with the colon.
August 12th, 2008 at 7:09 pm
Hi Howard,
Thanks for your respond. I fixed the “:current” issue I had (.current) Missed that one at first.
I’m new at JQuery, any guidance about how to make the string write an empty string will be greatly appreciated.
Thanks for your prompt response.
J.
August 12th, 2008 at 7:13 pm
Guess you might be able to fudge it by making the names of the tabs empty in your HTML??
August 12th, 2008 at 7:20 pm
Howard,
I did try removing and / or leaving the name of the tab (title=”panel 1) empty, but it rendered text “undefined”.
Everything else works perfect, the only issue I have before completing the project is eliminating the tab texts…
Thanks again…
J.
August 12th, 2008 at 7:41 pm
Howard, I found a quick solution.
I removed this
jQuery(this).attr(”title”)
from line 61 of coda-Slider.1.1.1.js.
It work exactly like I needed it too. I would like to eventually clean it better tho… but for the time being… it does the job.
Thanks for your time.
J.
August 12th, 2008 at 7:58 pm
@Josh, sounds like a good solution. I did think afterwards that you probably could have just changed the title to but what you’ve done is neater.
Enjoy your new codaslider!
August 12th, 2008 at 8:01 pm
oh where it says the blank above that was actually a no-break-space character!
August 12th, 2008 at 8:50 pm
@Howard
Both Niall’s and your scripts are awesome. But I’m pretty much a CSS noob and I was wondering how to use your hacked script for resizable windows. Just simply replacing the old js file with your new one does’nt really seem to be helping much. Am I missing something.
Thanks a lot.
August 12th, 2008 at 9:02 pm
Actually never mind. Turns out i’m retarded
Awesome script
August 13th, 2008 at 9:46 pm
Has anyone had any issues with having the slider inside a div with a png background (with transparent edges) ???
I’m using a png fix for IE and it breaks the slider, the NavTabs don’t work in EI when using the PNG fix… of course… it works great in all other browers… go figure.
Has anyone come across that problem?
Josh
August 13th, 2008 at 11:38 pm
Hi everyone,
I just added a status update to the blog post above. I included links there that may help solve some common problems.
August 14th, 2008 at 7:16 am
@Eric and @Kevin:
I think I finally found a solution! You have to have the “overflow:auto” set to a div container outside of the slider wrapper. It wont work for IE so you’ll have to fix it by adding a conditional comment i.e. () and add the overflow information in there under the wrapper class. I hope this will help you guys out or at least get you on your way. I tested in IE7, FF2 and FF3. You can see the example here:
http://www.nguyenware.com/wedding/story.htm
Let me know if you have any better ideas!
@Niall
You rock. Thanks for kinda being a part of my wedding.
August 14th, 2008 at 7:17 am
hahah nice… the conditional comment didn’t show up since it was “commented”. Try going to this link to see what I was talking about…
http://www.quirksmode.org/css/condcom.html
August 14th, 2008 at 9:59 am
@Tim - good solution!
One thought: when you’ve scrolled down then change tab, it scrolls to the same position on the next tab. This looks kinda strange. You could make it always reset the scroll to the top when moving between tabs.
Cheers,Howard.
August 14th, 2008 at 10:05 am
I see from Niall’s update that he no longer wishes to do development on the Coda Slider script.
I would however be happy to implement peoples requested features in return for payment in Wii video games from my wish list.
For an example of work, see my ‘dynamic height’ addition to coda slider at http://lawbore.net by switching between the Core, Reasearch and Career tabs there.
If anyone is interested, please email me at my gmail account: 68guns at gm….
Cheers!
Howard.
August 14th, 2008 at 2:09 pm
Saw the script in use on the Beck “Modern Guilt” web site. Nice work.
August 19th, 2008 at 5:30 am
@Howard:
Excellent idea… I took it to heart and just created anchors at the top for a quick fix. Thank you!
-Tim
August 19th, 2008 at 12:42 pm
@Tim
Sorry to be the bearer of bugs, but it seems that when you switch from ‘how they met’ to ‘he said, she said’ you get a blank box on my browser. However it only seems to happen when you click the links in that order. How bizarre is that?!!
I’m using Firefox 2 on Linux by the way. It probably works fine on other browsers. If I were you, I’d just forget about it and enjoy planning the wedding
August 20th, 2008 at 2:36 am
@Howard:
ahhh! You know I couldn’t go on if everyone didn’t have an equal browsing experience… I wouldn’t be a good web designer then.
Can you please check now to see if you have that blank screen when you jump from 1 to 3? Thanks again for the bug check!
-Tim
August 20th, 2008 at 10:37 am
@Tim - Yes, all fixed now! What was the bug?
H.
September 1st, 2008 at 4:31 am
hey tim,
I’m looking at that link you gave me (the wedding one) and i’m having trouble in figuring out what exactly you did to make that shaking stop.
It looks like you added or took out a container div and i think that’s throwing me off. Also, i think i’m gettin mixed up w/ other js script that i see that’s not part of coda, which would prob be for other items.
Any help would be much appreciated.
September 16th, 2008 at 9:14 pm
@Tim (494)
Such a simple solution
Thanks a lot for the hint with the “overflow:auto”. This solved the problem and now it works just fine in all the browsers I am testing it with …
Thank you!
September 17th, 2008 at 5:18 am
Hi All,
What a great tool, eh?
We’ve been customizing it a bit, and for our first post on “How To’s” with this tool, feel free to check out how we added a timed automatic rotation here:
http://eliasinteractive.com/blog/making-it-happen-coda-slider/
Thanks to all involved on this!
- Lee Taylor
September 19th, 2008 at 10:32 am
I made a small modification to the script - I found that adding too many panels into one slider meant that the tabs would eventually wrap, so I thought a drop down selectbox would work a little more nicely. Code here:
http://www.ihkozam.com/codadrop.htm
September 19th, 2008 at 3:40 pm
Hey guys… i’m still having trouble getting w/ the overflow:auto.
Tim the outside .wrapper w/ the overflow:auto isn’t working for me.
When i do this, i get both vert and horiz scrolls poppin’ up on me and as i go down the panels, the horiz scroll gets smaller and smaller.
HELP!
-Thanks,
Eric
September 27th, 2008 at 8:25 am
Anyone have some ideas on how to call a new “cross-link” from flash?
This is my current button in flash:
getURL(”http://www.site.com/test/#5″, “”);
thoughts?
October 1st, 2008 at 8:39 am
非常好的效果,简洁大方,
very good!
thank you!
October 13th, 2008 at 3:08 am
First off, thanks very much for the script. Works like a charm
I’m surprised that nobody else had a problem with tooltips. When using the “title” attribute, the top navigation retrieves the title of the div and automatically names the tab. This causes the entire DIV to have a tooltip of whatever the title is (well at least on Firefox/Mac.
I fixed this easily enough by:
1. Replace the head link with the following so you can customize the JS
2. Near line 64, there will be this script. Replace the .attr(’title’) with .attr(’id’), this way you can uniquely name each tab without worrying about tooltips for the whole div.
jQuery(”div#stripNav” + j + ” ul”).append(”” + jQuery(this).attr(’title’) + “”);
3. In your HTML, format each panel DIV as shown
October 16th, 2008 at 8:29 pm
Hi all,
The first things I want to say is a big thank you to Niall Doherty
This script is a good method for displaying images.
But the problem is: i need to remove the Tabs “tab Nav” So I look in the code JS and I delete:
// Create the Tabs
jQuery(this).before(”");
jQuery(this).find(”div.panel”).each(function(n) {
jQuery(”div#stripNav” + j + ” ul”).append(”” + jQuery(this).attr(”title”) +
“”);});
But the problem still exists, I can not understand!!
i try to name the title by ” “, but this methode are succesful with internet eXeplorer and google chrome, but Opera has been
affiche “” undefined undefined undefined undefined undefined “”.
are there a solution.
Thank you in advance for your help.
October 16th, 2008 at 9:22 pm
Yazan,
I may be confused about what you are trying to do, but why not just set a CSS style in your style sheet:
#stripNav { display: none; }
(or whatever the div is that holds the tabs - not in front of it right now…)
Is that all you wanted to do - hide the tabs?
October 17th, 2008 at 8:01 pm
thank you very much sir,
i want to ask you another question please,
what about the arrows ??,
i want to change the place of arrows and put them in a precise “div”.
October 17th, 2008 at 8:16 pm
Yazan,
Replace:
// Create the Left and Right arrows
jQuery(this).before(”Left“);
jQuery(this).after(”Right“);
With:
// Create the Left and Right arrows
jQuery(this).after(”");
jQuery(”div#YazanDiv”).append(”Left“);
jQuery(”div#YazanDiv”).append(”Right“);
Then you can add a style for “YazanDiv” and should be able to place it anywhere you want on the page using absolute positioning.
October 17th, 2008 at 8:21 pm
Oops - it stole my code…
Trying again:
replace:
// Create the Left and Right arrows
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>”);
With:
// Create the Left and Right arrows
jQuery(this).after(”<div id=’YazanDiv’><\/div>”);
jQuery(”div#YazanDiv”).append(”<div class=’stripNavL’ id=’stripNavL” + j + “‘><a href=’#'>Left</a><\/div>”);
jQuery(”div#YazanDiv”).append(”<div class=’stripNavR’ id=’stripNavR” + j + “‘><a href=’#'>Right</a><\/div>”);
October 18th, 2008 at 10:03 pm
Thank you to answer my questions, it’s very nice of you, I am trying the method you give me, but unfortunately it does not, the
problem of div. I will try to better explain the issue, please take a look at the photo please
“”http://img232.imageshack.us/img232/8955/011111111111bx9.jpg”"
Is it possible that I move the arrow in the Div I want?
Thank you very much,
although I master HTML and CSS, but JQuery is a bit new to me.
October 20th, 2008 at 2:55 am
hi. this ia nice scritp. im trying to use codaslider + fancybox, but fancybox doesnt works with codaslider. its a way to use both together? i need to aply fancybox inside the tabs…
other question: my page is “Product”. the tabs are PROD1, PROD2, PROD3. i can set a link in other page (index), to a direct tab, like PROD2, and when i acces the page, the PROD2 is activate?
October 22nd, 2008 at 9:27 pm
Hi, I tried to send a message through your web submission form but the percentage bar kept going on and on, it wouldn’t send. I was hoping maybe you could design my site for me based on your coda-slider, can you please contact thanks.
Samuel
October 29th, 2008 at 3:13 pm
Hi !
Great plugin, a friend shew it to me and I immediately adopted it.
I’d like to contribute adding an event handling stuff.
I’m currently implementing codaSlider to replace a series of radio buttons to select options on a product.
Inside the stripNavX, stripNavL and stripNavR click function, I’ve added the following line just before “return false”;
$(’.panel’).eq(cPanel-1).trigger(’panelSelected’);
Then in my inline code I’ve just to bind a function to panelSelected to, for example, activate a hidden radio button :
$(’.panel’).bind(’panelSelected’,function(elem){
$(’#colorchooser input[@type=radio]’).removeAttr(’checked’);
$(elem.target).find(’input[@type=radio]’).attr(’checked’,'checked’);
});
Without javascript this degrades gracefully to a group of regular radio buttons.
Hopefully you will like this feature and add it to your next release….
October 31st, 2008 at 6:41 am
I’d just like to say thank you! This script is awesome! It works so well, and as a guy thats fairly new to all this stuff, it was great and easy to customize.
On that note, I’d like to ask if anybody noticed a difference in the smoothness of the animation in Firefox 3. It kinda seems to pause for a second at the start.
http://www.jamesbull.ca/test/
Anybody had this issue, or know how to resolve it??
Thanks!
November 5th, 2008 at 7:09 pm
Wondering if there is a vertical scroll implementation? Would it work to simply swap out left and right commands in the js with up and down?
November 12th, 2008 at 7:08 pm
Any update anybody on getting a flash movie
button to link to the anchor and cause the panels to slide?
Thanks for a great script however..
November 30th, 2008 at 10:02 am
Hi there and thanks for the sharing this Niall! I have it on my site and almost running perfectly… however.. there is a very strange bug and I can not for the life of me figure out what is causing it. I am testing it in Firefox 3 but I dont think it is browser related. I want the images to fill the full width of the browser and the scroller container to be 100%. The problem is any panels after the 10th get pushed back to the beginning under the first. Rather than try and interpret my confusing explanation please have a look at:
http://www.folkphotography.com/portfolio/dogs/
Anyone have any ideas why the width is limited like this? Very strange.
I would be super grateful if anyone has a theory as to why this is happening.
Cheers!
November 30th, 2008 at 11:00 pm
Ahhhh… I got it. I had to change the width in the js to something like this:
var stripViewerWidth = ‘15250px’;
December 3rd, 2008 at 9:19 pm
How can I get the last tab to go to a new URL instead of a Panel?
December 4th, 2008 at 2:43 am
Thanks Coda-sliding it nice slide show
I must be fitted to our website for show Real Estate
Thanks
December 4th, 2008 at 5:06 pm
Hi all,
I am developing a site using this code and all is looking good. I have one question. I am using it to display images - how can I resize the slider container depending on the images being shown?
Any help would be great,
thanks,
Scott
December 4th, 2008 at 5:14 pm
Scott… what you ask is pretty difficult. It would require custom code to be written to detect the size of the images and adjust the CSS properties and rezise panels in real time, to make sure the panels all line up. It would be several hours work for sure.
I’m a UK developer and could do the job for you for a reasonable price, so feel free to contact me if you’d be interested in that.
Cheers,
Howard.
December 4th, 2008 at 5:18 pm
Hi Howard,
Surely it can be done using the standard JQuery Resizer function?
What do you class as a reasonable price?
thanks for the reply,
Scott
December 4th, 2008 at 5:19 pm
Scott,
Howard is right, that would be some serious code. Your best bet is to resize and/or crop your images to fit into the slider container, not to have the container resize to your images.
December 4th, 2008 at 5:28 pm
Hi Scott,
I don’t know what you mean by the standard resizer function. There is a “resize” function, but that’s for binding a browser-resize event to a function, which is quite a different thing, if I’m understanding your needs correctly.
I could do the job for you for £150. I have already written a height-resizing version of the slider (see http://lawbore.net “topic guides” on front page, try switching to “careers” tab and back) so I have experience with this aspect of the code.
All the best,
Howard.
December 4th, 2008 at 5:53 pm
Hi Howard,
That is exactly what I am looking for - i’ll have a think about it as a budget for this project has already been set (but i might be better off using you than spending 4 weeks trying to work it out lol).
Can you send me over your contact details to scott@framefive.co.uk as you may also be able to help us with further projects.
Thanks again,
Scott.
January 8th, 2009 at 3:22 pm
Thank you so much for this script. Exactly what I was searching for and easy to modify to!
January 8th, 2009 at 4:32 pm
Probably a very stupid question, but how do you ad a image to a panel. doesn’t seem to work.
January 13th, 2009 at 2:23 am
Martijn - can you be more specific? What sort of image do you want to add where?
You can just use standard img tags inside the .panel divs. Should all work fine.
January 18th, 2009 at 1:54 pm
Hi Howard.
Before “doesn’t seem to work” in my previous message, i’d typed a part of the html code i was using. Strange enough it wasn’t displayed.
Somehow the standard img tags are not working.
I’ve uploaded the complete directory (30kb) of the page i was working on. I would apreciate it if you would take a look at it. I was trying to ad an image to the second panel. As you can see I’ve changed the layout a little bit.
http://www.megaupload.com/nl/?d=J4SBY8HE
Thanks in advance!
January 18th, 2009 at 3:04 pm
Martijn,
Looks fine to me. There was no image called a1.jpg in your zip, but once I added one it displayed fine on my Firefox.
If I were you I’d lay off the “center” tags though. They’re no longer considered proper HTML
H.
January 22nd, 2009 at 3:53 am
great script! my first time working with .js and this has helped so much.
January 24th, 2009 at 5:48 pm
@Howard
I’ve tried the script on another computer (XP+IE7) and (indeed) the image is displayed. On my own computer (Vista 64b + IE7) there seems to be some problems.
Strange isn’t it?
Thanks for your help anyway.
Martijn
February 7th, 2009 at 10:58 pm
I am having difficulty adjusting the duration of the easing effect.
In ‘coda-slider.1.1.1.js’ there is a line
easeTime: 1000,
I have tried adjusting this number, but it seems to have no effect. The test site can be seen here: http://www.posnick.com/redesigntest
any ideas??
I’m also trying to figure out how I can make each panel an individual width rather than specifying a width that sets all the panels uniformly.
Thanks in advance! Noah
February 7th, 2009 at 11:52 pm
Hi Noah,
If you change the easeTime in the code or by overriding the value when you call the slider, it really should change the easing time.
I suspect what you’re probably doing wrong here is changing the value in the non-packed version but still linking to the packed version in your HTML.
I’ve had a look at your site but the whole layout is not even rendering properly for me (Firefox 3). There’s no viewing window. The panels stretch to the width of the page.
It’s quite possible theoretically to make each panel a different width. However in practice it would be quite a bit of programming. At the moment the panels sliding positions are easy to calculate, because they’re just a multiple of the fixed width. Once you change this to variable widths, you’re talking measuring each panels width, storing the values, and changing the animate parameters accordingly. This is a good few hours fiddly programming, I’d say.
All the best,
Howard.
February 13th, 2009 at 12:02 am
Thanks Howard,
You were right about the easeTime - I was still linked to the packed version. As far as the whole site layout - I want it to expand the width of the page. I’ve checked what I’ve got in both the latest version of Safari and Firefox (3.06) on a mac and it looks how I want it to. I’ve decided to do without the variable panel widths for now.
My only trouble is with a poster frame in an embeded quicktime movie. I’m not sure if this is a compatibility problem with jquery or what. Any help would be appreciated. The poster frame loads fine, but when clicked the movie doesn’t load - all I get is a quicktime logo with a question mark. Any ideas? I’ve also tried using a javascript file to load the quicktime instead of the embed/object tags and the same thing happens. I then tried to just have an image that loads the quicktime in thickbox when clicked, but nothing loads in thickbox either - I don’t even get the faulty quicktime logo there. If it’s something with quicktime, I guess I could try converting my video files to h264 flash?
February 13th, 2009 at 12:11 am
Noah, have you got a demo online of what you’ve developed so far?
Howard.
February 13th, 2009 at 11:28 pm
I do, sorry I forgot to post that.
http://www.posnickplus.com/testsite
If you click on TV at the bottom and then click on “click to play” you’ll see what I mean. That’s the embeded version with the poster frame. If you then click the subnav on the TV panel to boys, if you click on the thumbnail there it links to a different video that should display in thickbox, but that doesn’t work either.
If you don’t mind, please email me with your response as I will be able to respond much quicker. noah@posnick.com
Thanks for all your help Howard.
February 22nd, 2009 at 6:01 am
Anyone have a fix for the Firefox 3 problem… the last Top Nav title seems to down to the next line!
February 22nd, 2009 at 6:04 am
okie… haven’t done much testing, but the firefox problem can be fixed by changin
var navWidth = panelCount*2;
to
var navWidth = panelCount*3;
works in FF3 and safari 3
February 22nd, 2009 at 9:30 pm
Is there a way for auto-cycle?
I have seen it asked many times here, nobody knows?
any help is greatly appreciated.
February 22nd, 2009 at 9:45 pm
Sammy… There’s no built-in capacity for this, but you could program it pretty easily. Just make a recurring timed event which triggers a click on the right arrow.
Howard.
March 3rd, 2009 at 2:07 am
So I thought my site was done, but I went to do a final check on a PC in IE (I’m on a mac) and nothing works properly. It all loads and functions fine in Safari and Firefox, but in Internet Explorer the content isn’t aligned properly and the navigation links don’t work.
March 3rd, 2009 at 2:27 am
Noah… yeah, I was gonna say. There’s some real problems with the current design that ran deeper than just the videos not playing. I haven’t had any free time to take a look at them for you unfortunately. It looks pretty involved.
I do jquery and coda-slider programming work professionally, so if this is for your business you might consider employing me to fix the issues for you? Right now I think this is the only way I could find the time to help out with this particular problem, sorry.
Howard.
March 3rd, 2009 at 2:28 am
PS, on firefox the same navigation issues exist if the height of your window is small enough to cause scrollbars to appear.
March 3rd, 2009 at 3:00 am
Depending on rates that may be a good alternative. Please email me so we can figure something out. noah@posnick.com
March 9th, 2009 at 11:33 am
Hi,
I’m looking for a solution for cross-links behaviour.
What I need is to have arrows or something like this, before and after the links.
It will be very helpful to have asap a solution….
March 9th, 2009 at 12:43 pm
Luigi,
It’s not really clear exactly what you mean?
You could just add the characters: « and » to the cross-link text?
H.
March 10th, 2009 at 10:35 am
@howard
sorry for my english, I’ll try to explain better
there is the structure of cross links that I need:
where the numbers are the usual crosso links and the “” symbols are the links for next and prev pages, these symbols must to be links useful for navigate quickly between pages
note that this links are outside
March 10th, 2009 at 12:19 pm
(sorry for the previus incomplete message)
where the numbers are the usual cross links and two symbols that rapresent the links for next and prev pages, these symbols must to be links useful for navigate quickly between pages…
note that this links are positioned outside the scrollable panels div, justo close to the cross links
March 11th, 2009 at 4:53 pm
Luigi:
Do you mean that you would like to move the black arrows at the side of the panel window to the crosslinks at the bottom of the page?
Howard.
March 11th, 2009 at 5:48 pm
@howard:
here the demo page : http://www.dolcebassano.it/demo/base_homeCODA.html
on the top of the page there are numbers and the links NEXT PREV, I hope that this can explain better than my bad english
March 11th, 2009 at 6:47 pm
@Luigi:
Nice design!
There’s two things that are stopping your NEXT and PREV links from working…
1. There’s no click event attached to them. eg:
for the “left nav” function of coda-slider you could change it to:
jQuery(”a.prevlink”).click(function(){ …
and add the class “prevlink” to your PREV link. Likewise for the NEXT link.
2. You’ve changed the structure of the pages so that the DOM tree traversing (with parent(), prev() and find()) isn’t locating the elements it needs to.
You can debug this by adding alerts inside the functions thus:
alert (jQuery(this).parent().parent().html());
etc
The html function will output the contents of wherever you are in the tree at that moment. Try adding extra parents() to the chain until you are able to locate the elements that coda-slider is looking for.
Cheers,
Howard.
March 12th, 2009 at 3:52 pm
@howard
tnks for the answer! and tnaks for the compliment…
about the solution, I’ve some problem to apply your suggestion because I’m not so much skilled in writing code… So, I need some more help with a more exaustive writed code for my case… sorry for the rookie request
March 12th, 2009 at 4:17 pm
@Luigi:
I tried for 30 minutes to fix your site myself on my PC, but it’s quite a complicated job and I didn’t manage to get it working, hence just the tips on how you should do it yourself. The problems are all because you have changed the structure of the HTML. If you would stay with the original site design it would work.
I’m afraid I don’t have the time to spend any longer on your problem
I’m a programmer professionally, so please let me know if you would be interested in hiring me to fix the code for you. I think there could be 2-3 hours work there. Sorry I can’t help further, but I’m already very busy.
March 12th, 2009 at 4:39 pm
@howard
I understand, your suggestion was helpful because after some try, I found a solution!
Now it works!
http://www.dolcebassano.it/demo/base_homeCODA.html
But there is another problem, when I click on the next or prev button, the active page doesn’t appear marked on numbers, they remains without any sign……….
only if you have a short answer or someone else have the solution…..
your help was very helpful!!!!!!
March 12th, 2009 at 5:31 pm
@Luigi:
Glad you’ve made some progress. I’m afraid the link you gave still doesn’t work for me though (firefox 3).
To get the active page to highlight, the link has to be assigned the class “current”. The code after the bit which does the animation does this. In your case it’s not finding the . Keep adding parent functions to the chain like you did before until you are able to locate it.
Cheers,
Howard.
March 13th, 2009 at 9:43 am
Hi,
>Luigi : I’ve added some features to codaslider, some of which may fit your needs. I’m currently preparing a demo page to illustrate them. Here they are :
- New option to specify which element is used in your panels to make the tabs titles (default as h1)
- New option to enable/disable tabs
- You can trigger or bind several codeSlider-related events : panelSelected, nextPanel and prevPanel.
So for your next/prev links you would just have to do this :
HTML :
< >
Javascript:
$(’#prevpanel’).click(function(){$(’#myslider’).trigger(’prevPanel’);return false;});
$(’#nextpanel’).click(function(){$(’#myslider’).trigger(’nextPanel’);return false;});
I’ll let you know here when it’s online (what’s more I guess this will need further tests by other people than myself)
March 13th, 2009 at 9:45 am
Escaped HTML :
<a href="#" id="prevpanel"><</a> <a href="#" id="nextpanel">></a>
March 13th, 2009 at 11:20 am
Here it is : http://demental.info/codaslider/
Sorry for perfectible markup/design…
March 24th, 2009 at 3:03 am
Hi,
I have implemented coda slider for a new website I’m developing.
http://creativesuperstore.com/new/portfolio/design/projects/dita_ads/
I was wondering if anyone knew how to get rid of the browser’s native vertical and horizontal scrollbars before the page is fully loaded. I hate the way they look.
Any help on this would be very much appreciated. I not worried about complete accessibility for this project.
Thanks in advance.
March 24th, 2009 at 12:10 pm
@Steve:
There’s a couple of things you can do here…
You can start the coda slider initialisation earlier so that the scrollbars never get the chance to appear. This will only work on Firefox and IE, due to issues the other browsers have with measuring elements. So change your startup-code to read:
if ( $.browser.msie || $.browser.mozilla ) {
$(document).ready(function(){
$(”div#slider1″).codaSlider();
});
}
else {
$(window).bind(’load’,function(){
$(”div#slider1″).codaSlider();
});
}
Secondly, you could try hiding the overflow which creates the scrollbars by changing in the css:
.csw to overflow:hidden not overflow:scroll
This is untested, but I imagine it will fix the problem for the other browsers.
Hope this answers your question!
Howard.
March 24th, 2009 at 12:24 pm
@Steve:
Be careful if you copy and paste the code above, to change the quotes back to the regular sort of quote or the code wont work - both double quotes and single. Looks like this blog switches them to a different character.
March 24th, 2009 at 7:29 pm
Thanks Howard! The CSS solution worked like a charm. Much appreciated!
March 26th, 2009 at 11:10 pm
Hai everyone………
I don’t want to appear as the dumbest girl ever, but how exactly can you adjust the text in de navigation tabs? I’m using Css in dreamweaver and i’m not able to find a line in wich i can changes the titels. I must be doing something terribly wrong……………………
March 26th, 2009 at 11:18 pm
@Romy:
around: div class=”panel” title=”Panel 1″
change the title=”whatever new title you want”
cheers,
Howard.
March 27th, 2009 at 7:50 am
thnx very much! Must have been sleeping last night…………..
Has anyone imported a lightbox yet?
April 16th, 2009 at 7:35 pm
I would just like to thank you for helpin’ us all out, mate. It’s nice to see that not all of Ireland is full of lazy paddies. Thank a lot mate.
==Irish Pride
April 29th, 2009 at 2:54 am
Hi -
is it possible to apply this code to an iFrame content?
I like the movement of the scroll and also I would like to use an iFrame with content.
thank you,
milena
June 15th, 2009 at 5:24 pm
good job
thanks