Background
Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect.
This article will pick apart the pieces required to create the effect, and how to better it.
How to Solve the Problem
Recreating this effect is simple to do if you know what plugins to use. There are plugins out in the wild already, but we want our jQuery to satisfy the following requirements:
- Degrades perfectly without JavaScript enabled
- Sliding panels effect without hogging browser CPU
- Next and previous buttons added using JavaScript because they hold no use without JavaScript
- Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
- Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation - this should happen without any extra work
The hash is the emphasised part (including the # symbol) in: http://jqueryfordesigners.com/page.html#example
In fact, our version of this slider will be better than Panic's and the current jQuery plugins if we can meet all of the requirements.
For example, in the Panic example linking directly to the preview pane doesn't correctly highlight the navigation.
This whole solution is going to rely heavily on Ariel Flesler's scrollTo plugin and particularly it's 'adapters' to enhance the power of the scrollTo plugin.
I've provided a screencast to walk through how create this functionality. Details on how and what I used can be found below.
Watch the coda slider effect screencast (alternative flash version)
QuickTime version is approx. 90Mb, flash version is streaming - I've also noticed the sound is slightly over to the left - I'll fix that for next time!)
View the demo and source code used in the screencast
Plugins Required
Along with jQuery we'll need the following plugins - I recommend using the minified versions for production, and perhaps even development (download links can be found at the bottom of the linked pages):
Markup
Requirement 1: degrades perfectly without JavaScript enabled
To ensure this works without JavaScript, we will use the CSS overflow property to control the effect.
This way our panels will still focus in to view if a user clicks, or if the URL refers to a specific panel.
HTML
It's worth noting that although we could scroll the individual panels inside a single nested DIV, for the JavaScript to make the effect work, it will be a nested DIV that will scroll - not the individual panels. You can see this in the markup below:
<div id="slider">
<ul class="navigation">
<li><a href="#sites">Sites</a></li>
<li><a href="#files">Files</a></li>
<li><a href="#editor">Editor</a></li>
<li><a href="#preview">Preview</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#terminal">Terminal</a></li>
<li><a href="#books">Books</a></li>
</ul>
<!-- element with overflow applied -->
<div class="scroll">
<!-- the element that will be scrolled during the effect -->
<div class="scrollContainer">
<!-- our individual panels -->
<div class="panel" id="sites"> ... </div>
<div class="panel" id="files"> ... </div>
<div class="panel" id="editor"> ... </div>
<div class="panel" id="preview"> ... </div>
<div class="panel" id="css"> ... </div>
<div class="panel" id="terminal"> ... </div>
<div class="panel" id="books"> ... </div>
</div>
</div>
</div>That's it. Without CSS this markup works perfectly for our content, almost exactly the way tabs work without JavaScript and CSS.
CSS
I won't detail all the CSS like the navigation or shading effects - just the CSS required to correctly create the effect.
#slider {
width: 620px;
margin: 0 auto;
position: relative;
}
.scroll {
height: 250px;
overflow: auto;
position: relative; /* fix for IE to respect overflow */
clear: left;
background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}
.scrollContainer div.panel {
padding: 20px;
height: 210px;
width: 580px; /* change to 560px if not using JS to remove rh.scroll */
}Note also that I'm choosing to use overflow: auto; - this way, if the user does have JavaScript disabled, there will be a visual que that the panels can be scrolled. If you want to remove the horizontal scroll in IE, I would recommend changing .scrollContainer div.panel's width to 560px to account for the right hand scrollbar.
I also plan to include scrolling buttons to go left and right. Although the elements will be created by the JavaScript, we'll still need the CSS to place the buttons in the right place. Our JavaScript will put the buttons before and after the outer div.scroll element. We have to use absolute positioning to place them, so this is why #slider has position: relative; applied:
.scrollButtons {
position: absolute;
top: 150px;
cursor: pointer;
}
.scrollButtons.left {
left: -20px;
}
.scrollButtons.right {
right: -20px;
}jQuery
Requirement 2: Sliding panels effect without hogging browser CPU
If you try this effect using CSS, to use positioning to move the panels around it will eat up your CPU, and the browser will no likely lock up. This is why we're using Ariel's scrollTo pluing. The scrollTo plugin literally scrolls the element via it's overflow (or can be used to scroll the actual window).
Required Plugins
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.3.3-min.js" type="text/javascript"></script>
<script src="jquery.localscroll-1.2.5-min.js" type="text/javascript"></script>
<script src="jquery.serialScroll-1.2.1-min.js" type="text/javascript"></script>Next and Previous Buttons
Requirement 3: Back and forward buttons added
This is easy vanilla jQuery, here's the snippet from the final code:
var $scroll = $('#slider .scroll');
$scroll
.before('<img class="scrollButtons left" src="images/scroll_left.png" />')
.after('<img class="scrollButtons right" src="images/scroll_right.png" />');
Note the classes I've applied the scrollButtons to the images so they'll be positioned properly.
Navigation Updates Automatically
Requirement 4: Hitting the page with a specific hash highlights the right navigation
This is one of the key features that I felt was important to the slider. If I navigated to a specific panel, the navigation should match.
This is achieved using event binding. When the scroll plugin completes it's effect, it will call our trigger function.
The trigger function will receive the ID of the element it has just shown, and search for the navigation item whose href's hash matches the ID.
For example, if the div#sites element is shown, the ID 'sites' is sent to our trigger. Our trigger function will now look for links in the navigation that end with '#sites': <a href="#sites">Sites</a>.
This trigger function will be attached to the onAfter property in the scroll options and called when the page loads for the first time with a hash in the URL.
// bind the navigation clicks to update the selected nav:
$('#slider .navigation').find('a').click(selectNav);
// handle nav selection - lots of nice chaining :-)
function selectNav() {
$(this)
.parents('ul:first') // find the first UL parent
.find('a') // find all the A elements
.removeClass('selected') // remove from all
.end() // go back to all A elements
.end() // go back to 'this' element
.addClass('selected');
}
function trigger(data) {
// within the .navigation element, find the A element
// whose href ends with ID ($= is ends with)
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
// we're passing the actual element, and not the jQuery instance.
selectNav.call(el);
}I've had to separate out the selectNav function because it also be called when the user clicks on the navigation links.
To complete this requirement, once the page is loaded, we need to check whether there is a hash on the URL, and if so, trigger the 'scrollerComplete' function:
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1)});
} else {
$('#slider .navigation a:first').click();
}By default, we're triggering a click to the first navigation item if there's no hash on the URL.
Any Link Triggers Effect
Requirement 5: Any link on the page that refers back to a panel should trigger the effect
Since we're all lazy developers, we don't want to have to specifically markup arbitrary links on the page that should trigger this effect.
This is where Ariel's localScroll plugin comes to the rescue. By just applying that plugin with our default settings any link on the page will trigger the effect. In addition, because we're going to trigger our 'scrollerComplete' function when the effect has finished, it will correctly select the navigation associated.
The jQuery Code
Here's the code with all the above requirements added in. The code is commented to explain what we're doing.
I've also decided to include a bonus requirement - to support both horizontal or vertical scrolling.
// when the DOM is ready...
$(document).ready(function () {
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
// if false, we'll float all the panels left and fix the width
// of the container
var horizontal = true;
// float the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' // IE fix to ensure overflow is hidden
});
// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);
}
// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="images/scroll_left.png" />')
.after('<img class="scrollButtons right" src="images/scroll_right.png" />');
// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#slider .navigation').find('a').click(selectNav);
// go find the navigation link that has this target and select the nav
function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.navigation a:first').click();
}
// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset. Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll, // the element that has the overflow
// can be a selector which will be relative to the target
items: $panels,
navigation: '.navigation a',
// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',
// allow the scroll effect to run both directions
axis: 'xy',
onAfter: trigger, // our final callback
offset: offset,
// duration of the sliding effect
duration: 500,
// easing - can be used with the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'swing'
};
// apply serialScroll to the slider - we chose this plugin because it
// supports// the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);
// now apply localScroll to hook any other arbitrary links to trigger
// the effect
$.localScroll(scrollOptions);
// finally, if the URL has a hash, move the slider in to position,
// setting the duration to 1 because I don't want it to scroll in the
// very first page load. We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
});Wrap UP
That's everything you need for the perfect slider. Ariel has lots of other examples of how the scroll plugins can be used on his web site so do check them out.
I'll also be posting a follow up to last month's survey.
If anyone has any questions, suggestions or better examples, please do share by dropping a comment on the site.
June 3, 2008 at 14:43
Hi !
Is it possible to be allowed to translate (to french) your article on jquery DOT info ?
Thanks .
June 3, 2008 at 14:44
(Seems that your antispam tool prevented me from posting an URL)
June 3, 2008 at 16:37
Really excellent...also a good way to do 'manual' slideshows if one leaves off the tabs...
Please update your blog to tell which jQuery etc. to reference from Google's jQuery hosting, this way we don't have to worry about keeping the scripts up to date etc.
Google now hosts jQuery for anyone to use...
Thank you, Tom
June 3, 2008 at 16:48
Awesome.
June 3, 2008 at 16:53
@Tom - I'm still deliberating over the Google hosting of libraries, and whether I should start using it, particularly as I do a lot of work offline, so it's handy to have my own copy.
Maybe the next screencast :-)
June 3, 2008 at 19:22
Very nice effect & implementation. I have one complaint though: "semantically" (not huge fan of this word) this is not awesome. For screen readers, with javascript disabled, for search engines and when printing the page,
in the source page instead of : title1 title2 title3 div1 div2 div3
it would be really very neater to read: title1 div1 title2 div2 title3 div3
Besides this (fairly important) aspect, it's really nice.
June 3, 2008 at 20:05
One thing to consider is page weight. If you have a code slider as a portion of say your site's home page, all the divs contained inside will add substantial weight to your page, especially if each div has an image or two. I would posit a way to load only the divs and then onclick or slide or whatever, load in the src value of the img tags for that div. This way we don't have to use AJAX and can save you a ton on the page weight. Not sure how this would be implemented with the Coda slider, but the weight of the page should not be ignored when containing this many divs of content.
June 3, 2008 at 20:08
@Ozh - I'm not sure I follow. The source is: title1 div1, title2, div2, etc.
The first set of titles are navigation - as marked up with the class. There should be a skip link, but otherwise I see this solution as semantically sound -- always important :-)
I think you might be misinterpreting the UL as titles perhaps?
June 3, 2008 at 22:57
Remy, this is a great tutorial and I appreciated the walkthrough/screencast. Your site is a great jQuery resource - I use the jQuery API browser every day and am glad to see its updated to 1.2.6 now! Well done.
June 3, 2008 at 23:05
Ah one thing that came to mind when I was playing around with your implementation - if you use this for a form (breaking the tabs into step1, step2, etc.) tabbing through the inputs basically breaks the entire flow by scrolling to the next "panel" without triggering the transition effect. I was thinking that one way to take care of this would be to give the non-active panels "visibility:hidden" so that the total width would still be reported accurately, but hitting the "tab" key would not scroll to them. What do you think? I haven't tried it yet...
For panels of inconsistent height (i.e. one is 200px and another is 500px), I added some code to the trigger function that animates the height based on the id of the clicked element. That worked pretty well, too.
Thanks for your post!
June 4, 2008 at 08:21
Hi! This site is nice. Congrats for what you are sharing with us!
Robert from France.
June 4, 2008 at 12:24
Very cool... really like the fact that you broke down each part rather than just sharing code with no indication of why each piece is there. One thing that might make it ever cooler is if you had an option to automatically rotate between panes. Like on this website: http://www.pricechopper.com/
June 4, 2008 at 12:25
@Agent G - I'll be releasing a jQuery plugin which will support all these options via Ariel's plugins. Subscribe to the feed and you'll see it automatically.
June 5, 2008 at 09:18
is there any way to "animate" the tabs? e.g. instead of the simple background color change on mouse-hover - would it be possible to for example to slide the tab in from the bottom and slide out on mouse-out. i figure it could be done with a background image that could be animated up and down but all my tries to mod you script simply didn't work out. any hint towrds the right direction very appreciated.
June 5, 2008 at 10:42
very nice. well done. When I enter the hash in the url (#files) for example, it does NOT select the proper tab (it does select the proper div though) - it still defaults to the first one. This is in FF2.
June 5, 2008 at 13:08
@stuart - not sure why it's not working for you, unless you've got an example I can see (feel free to drop me a link I'll take a look if I have time), it definitely works for me - and the screencast was all done in FF2 which you can see it working fine.
June 5, 2008 at 14:26
So this is really nice from a ui standpoint, but man it loads slowly, even when I load it locally!
Box renders with scroll bar, I can click on links, and then eventually the scrollER renders.
June 6, 2008 at 17:33
As it this isn't cool enough. If you get pane rotation working with Ariel's plugins this will be awesome.
Not trying to be pushy, but any idea when this plugin will be ready?
June 6, 2008 at 17:39
@David655 - no problem :-) I'll be published next week along with a couple of other minor notices (particularly feedback from last months survey).
June 6, 2008 at 20:48
Very cool. I'm looking forward to it. I'm not sure what issues were revealed in your survey, but I do notice when I mouse-click to the right of the panel, the panel gets selected.
Also, please check out my implementation here: www.looklisteninteract.com/bettercoda/
I've attempted to put the nav buttons on the left side. There's some weird padding issues. Can anyone offer suggestions? help?
June 7, 2008 at 01:36
I'm sorry, but Coda's seems and feels better - scrolling is much smoother and seem more natural. I've seen many, many copycats, but the original is simply the best.
June 7, 2008 at 15:06
hi remy!
thank you very much for your blog - it's just great! unfortunately the coda-slider ist not valid css as horizontal-x will not pass the validator. any idea how we could fix that? ;o)
greetings from switzerland,
bensch @ amin.
June 8, 2008 at 02:49
This was a very valuable demo! How would I need to modify coda-slider.js in order to have multiple sliders on a single page?
Thanks again!
June 11, 2008 at 14:53
I would also like to know how to implement more than one slider on a single page. Anybody?
June 12, 2008 at 03:50
A quick note; under the required plugins section. The link to the localScroll is incorrect.
Thank you for sharing your knowledge.
June 12, 2008 at 08:47
@Derek - cheers - now fixed.
June 12, 2008 at 15:56
To implement 2 or more sliders on one page (the long way) is to create another function. I just copied this: jQuery.fn.codaSlider = function(settings) {... and created jQuery.fn.codaSlider2 = function(settings) {...
On my html page, i called: jQuery(window).bind("load", function() { jQuery("div#slider1b").codaSlider2() });
Also had to duplicate the CSS and basically named everything panel2, wrapper2, slider2, etc...
Messy but i was able to make it work.
June 12, 2008 at 16:00
@Jasper + Joe - I'm actually working on the plugin and handling multiple versions on the page. I'm speaking to Ariel (the author of the core plugins) to get it to work. Once it's all there, I'll release the new plugin.
Thanks!
June 12, 2008 at 22:13
Hi im using the javascripts from jqueryfordesigners.com/demo/coda-slider.htm and putted the html divs as showed on that page within a table, now i cant seem to get it working... all i get is Error: $panels.css is not a function
Im sure its something i forgot or doesnt it work within an table?
Further it looks awsome the working demo! thanks for making it available
June 12, 2008 at 22:25
nevermind my last post, it works well , the error message only comes up when logged in to the MODx manager (CMS) and having the QUICKEDIT visable on the visitors page where the scroll pane is shown. it works fine in IE6.0, IE7.0 and FF2 (just cant get it working in Safari on windows) but thats not a problem ;)
Thanks!
June 12, 2008 at 22:27
Hi nevermind my last comment, i only got the error because somehow the QUICKEDIT is interupting the scroll pane script. this happens when logged in to MODx manager (CMS) and having the QUICKEDIT turned on at the visitors page where the scroll pane is show.
It works very good in IE6.0, 7.0 and FF2 just somehow it will not work in Safari windows but thats not a problem for me ;)
Thanks
June 12, 2008 at 23:52
Great article.
I know you're a busy guy lately but... What are you waiting for, to update the article with the code we made, huh ? :D
Cheers Remy
June 13, 2008 at 09:05
Remy,
Is it possible to apply this effect to something like a submit button? I.E. I want to specify which "panel" to scroll to if an submit button is clicked.
I know how to attach a click to the button, but not so sure which part of the slider JS to then call?
Cheers, Chris
June 13, 2008 at 14:29
@Raymond - if you still have that error, open up Firebug and find out what's in $panels. I think you'll find it's not a jQuery object. You'll need to tweak the coda slider code - if you add
debuggerjust before that line, Firebug will break allowing you to take a look.@Ariel - It's currently breaking with more than one on the page. I'll catch up with you to get it sorted for all these nice people :-)
@Chris - quick hack answer (as I need to double check with Ariel) is
$('a[href$="' + IDSELECTOR + '"]).trigger('click');- but you'll need to test that!June 16, 2008 at 02:29
I'm using this in a jsp...and the nav images are seriously out of wack (images are hugggge!). I tried added height and width in the js and it didn't work. Any suggestions?
June 16, 2008 at 20:49
Hi, I've just implemented this slider into my site, but I've found a bug (perhaps just with my current browser, which is Firefox 3).
If you visit the page using a hash at the end (ex. example.html#something) the slider will display the section called 'something', but the navigation link for 'something' will not be highlighted -- the first section's link will remain highlighted.
This isn't too important for my purposes, but I figured it'd be better if you and the public were aware of this bug.
Thanks, Hans Engel
June 17, 2008 at 12:35
This is just what I was looking for! Nice simple and relatively clean. Fantastic stuff
I've recently discovered the joys of JQuery and I especially like the way it integrates nicely with ASP.Net without too many headaches. Your coda slider is now firmly embedded on our site at www.silver-pride.com :)
Cheers and thanks again
Graham
June 18, 2008 at 15:29
One thing I did notice was that there is an outline around the anchor links in Firefox. This is an "accessibility" feature apparently. However, it can be removed easily by adding this to the CSS.
a { outline: 0; }
Cheers
Graham
June 19, 2008 at 21:25
Really nice!! But it doesn't change the url with the anker like the default scroll of Ariel Flesler does. I added this line in the trigger function to enable this: window.location = "#"+data.id;
greetz
June 20, 2008 at 11:52
aha, it does now! Thanks for that.
June 23, 2008 at 12:08
The Firefox bug some people are reporting is not a bug.
In Firefox if you open the page with no hash in the URL then type a hash after the URL and hit enter the navigation link does not change to the correct tab and no scroll effect is shown, but the correct content does appear. This is because typing in the URL bar does not trigger a page reload and is not an anchor to which some events can be attached. Firefox is simply jumping to the anchor as requested. In the real world this is not a problem because users do not type anchors into the address bar.
June 23, 2008 at 13:10
Hi, great tutorial , but I've got a question : is it possible to add fadeIn and fadeOut effects for the panels where tey come in and come out - it will looks nicer.
June 24, 2008 at 21:26
Hey, with all the people asking for more I just wanted to say thanks, this is by itself great. It's just a very nice way to show the flow of development using jQuery, Firebug and a simple texteditor. Thanks for your work!
June 25, 2008 at 01:01
Nice tutorial. This is much smoother than the previous coda-slider thing I was using on another site. But I'm having the same problem that I had before in that when I break the navigation away from the slider, I can't use the 'selected' state on my nav. This is probably very simple, but I'm php/javascript ignorant so I can't figure out where I've broken it or how to fix it. you can have a look here: http://www.oneprcnt.com/1prcnt/index.html
If anyone knows a solution I would be eternally grateful.
June 26, 2008 at 16:05
I am trying to implement this and having these problems and questions:
when I put a large amount in one of the panes that would cause the div to be larger than it's height, no vertical scroll bar shows up and my text is cut off on the right side of the pane.
navigation links don't seem to work if I am not using a "ul" tag. Is this possible? I am not interested in the tab bar, but want to create my own links that control the slider.
Is there a way to make the individual panels grow or expand as needed? I'v seen a slider do this with text, but can't find the example.
June 27, 2008 at 18:11
Here's another issue: I can't get Lightbox to work within the slider. This is most likely a conflict of frameworks. Fine. But shouldn't I be able to use Thickbox, since it uses JQuery?
July 1, 2008 at 09:02
I'm trying to combine this beautiful slider with sIFR navigation. But everytime i click a tab the whole rendering of the navigation starts all over , making the beautiful sliding effect dissapear.
Can anyone help me with this?
My test version: http://www.mennoschmitz.com/test/coda-slider.html
menno
July 3, 2008 at 16:40
This plugin is wounderful but it got a bug.
Just navigate to any tab and refresh the page. You will get mix of different tab’s data.(try yourself to see what i mean)
It will be nice to use cookies to save the active tab id etc, so that the reload of the page can bring the same tab or at least the first tab nicely.
I am working on it to fix it. Will post if i found something.
By the way i am using Firefox 2.0 / Firefox 3
July 4, 2008 at 10:34
Great tut, but I'm getting following error
parse error, unexpected '(', expecting T_VARIABLE or '$'
for the line
$('#slider .navigation').find('a').click(selectNav);
someone can help? cheers, david
July 4, 2008 at 11:08
@David - I think you need to validate your PHP running the page. It's nothing to do with the JS.
July 4, 2008 at 11:25
omg, just noticed 1 min ago.. had the JS-code in the php-section ;)
July 4, 2008 at 15:23
Hi! Very nice tutorial.I habe only one question. I want that the slider will fade in with a timeout out. So I've taken a bit of jquery code to do that:
setTimeout(function(){ $(".slider").fadeIn(2000).fadeTo(5000, 1); }, 8000);
But when i use this bit of code, the slider starts verticaly. Does anybody here have a idea why?
Thanks a lot. Dennis.
July 4, 2008 at 19:28
Would anyone know how to make this auto slide? Is that functionality already built in and needs to be called ?
July 7, 2008 at 21:36
Still robert. I can't wait the plugin to be release. This is a very nice tutorial you made up here
I just give my feedback. The only error I had when implementing this was that I forgot about the "overflow-x" property in the css for scroll. I didn't know about that. It actually fix the IE6 bug I had. In my humble opinion this should be a bit more highlithed (or maybe I'm too noob :) )
Anyway congrats! Really nice tutorial / effect. Thanks again for sharing this with us.
July 8, 2008 at 20:53
Aamir Afridi, i'm seeing the same bug. When i reload the page in firefox, it loads the first tab content slightly off to the left.
I will also be working on a bug for this. But if you figure it out first, please post!
-dg
July 9, 2008 at 06:08
Hi - great slider which I'm looking to use on a site I'm currently working on.
One thing I thought worth mentioning; I've noticed that this doesn't work with IE8. I used IETester to see how it worked across IE versions and in IE8 the navigation seems to highlight correctly but the panel doesn't move or display the information related to the highlighted navigation.
Just thought I'd mention it.
July 9, 2008 at 14:22
Hello. I'm completely new to JQuery but am learning fast with your tutorials along with a few others. Quick question - and it possibly completely obvious but how would I go about changing the links of the tabs, but stoping the browser going to them if Javascript is turned on.
In other words, unless Javascript is working I'm not keen to have all the content on the page so I'd use something like
index.php?section=books
& replace "index.php?section=" wiith HASH on load.
Any ideas?
July 11, 2008 at 02:01
Just wondering why my last panel is below my other ones in firefox! Internet explorer looks fine!
http://www.marcotundo.com/metcalfe/test.html
July 12, 2008 at 07:52
Regarding the bug that Aamir Afridi found, it appears to be only a Firefox thing. Any ETA for a fix? Besides this one bug, I love it!
dw
July 12, 2008 at 14:31
How is this code released? Is it free to modify and implement or is his merely a tutorial and to use the code it should be completely rewritten? Thanks so much for the beautiful effect.
July 14, 2008 at 03:38
Great code thanks.
@Joe Its actually not that hard to use ajax to load sections of the page to reduce the overall page weight. I have done this on this site: http://www.taupohouse.com
It also uses the Google Maps API to load the Google Map asynchronously.
You just need to call the appropriate function in the sliderTrigger function. e.g.
// load gallery with AJAX including thickbox.js function showGallery() { if (!$('#imagegallery').hasClass("loaded")) { $("#loading").replaceWith('</ul>'); $("#imagegallery").load('ajax_gallery.php'); $.getScript("js/thickbox.js"); } }
July 14, 2008 at 14:06
Hey, I've done this, i've done quite well seeing as im new to jQuery. How do i do a next/previous?
Without using
Thanks.
July 14, 2008 at 17:01
Hi, Very nice tutorial ! I have only one question: I´m using the slider to show flash videos in a couple of tabs, but the flash player is appearing outside the slider in screen resolutions with a width much bigger than the slider (i.e. 1920 px).
How can I hide or show the proper video depending of the current panel ?
I tried modifying the z-index or the display property during the trigger, but is the first time I´m using jQuery so I think I still don´t get it.
Thanks at advance for your help.
pra
July 15, 2008 at 09:31
@Marco if you set to your class "scrollContainer" a higher width you don't have this issue. For example I tried this : And the third tabs was on the right as well. It's weird anyway.
I used the inspect feature on Firebug to set this value. Usefull for debugging.
Anyway it doesn't look bad at all if the third tabs is on the bottom, IMHO.
best regards.
July 15, 2008 at 09:35
Oups my html code was eaten by security. it was something like this : <div class="scrollContainer" style="width: 2080px;">
July 15, 2008 at 17:15
Robert, that works for me too, thanks !!
July 16, 2008 at 10:44
it's great but it doesn't work in IE6?? http://www.subwayslims.co.uk/scroller1607.html
any ideas why?
July 16, 2008 at 21:07
I'm glad it help you. Actually I didn't know about your probelm since you didn't send an URL. It's easier to help with an example.
So just adjust the width (and also height sometimes) to get it works fine.
Also don't forget the "overflow-x: hidden;" attribute for the .scroll class for IE. I made the mistake.
July 20, 2008 at 16:15
Can't access the screencast or the alternate flash video. Would love to watch the tutorial.
July 20, 2008 at 17:51
@Rusell - annoyingly, all of Amazon S3 appears to be down and certainly is two hours after you posted. For example, check out Twitter, all their images are missing, because they're hosted on S3.
Hopefully given they're a big service, it'll come back up again very soon - as much as it pains me to say, can you try again tomorrow?
July 21, 2008 at 17:24
Any word on if/when automatic sliding and multiple sliders will be added? I need to get both of those features working and I'm sure any attempt I make will be more of a hack.
July 21, 2008 at 20:35
Thanks Remy! I was able to access the screencast today.
July 22, 2008 at 04:59
When I copied the code directly from this site into a new page of my own, I found that the page did not display correctly in IE6.
The code needed additions which were included in the CSS of your demo page, but had not been carried forward to this example script; namely the inclusion of a 'width' attribute and an 'overflow-x' attribute both attached to the '.scroll' class.
Can I suggest that you add them into your code blocks above, as it seems from reading the other comments I am not the first person to notice a problem in IE6, and some of the other user's comments have gone unanswered.
July 22, 2008 at 22:07
Why is the #tab not being posted to the URL?
July 23, 2008 at 08:05
Wow! Awesome tutorial, I'm super grateful. Much to Masters point it was really cool to see your work flow and how you used firebug. I can read and read but the most effective learning comes from watching and listening for me. Kudos!
July 23, 2008 at 13:34
Local scroll is now on version 1.2.6. rather than than the 1.2.5 referred to here. If that's of interest ... Any news on the auto-rotation? Great tutorial by the way - I've actually managed to get it to work on my mum's website that I'm in the middle of re-building!
July 23, 2008 at 18:57
@Greg Johnson it is only used when opening in a new tabs. But it is possible to post the #div-id to the URL if you set the ID' value to the var "window.location.hash". But the problem is that the window will then go to the anchor. So it moves to the anchor when you click on the tab.
Actually i tried to set a different tab as default slected than the first one so I have something like this : <pre> if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { window.location.hash = 'myID' ; trigger({ id : window.location.hash.substr(1) }); } </pre>
But I have that issue: it automatically goes to the anchor. So it's not the good solution. i didn't find something better.
I was wondering if i could add the image loading effect on this . http://jqueryfordesigners.com/image-loading/
Any idea?
July 23, 2008 at 18:59
The code looks better like this :
if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { window.location.hash = 'myID' ; trigger({ id : window.location.hash.substr(1) }); //$('ul.navigation a:first').click(); }July 24, 2008 at 11:41
@GG - after much bemusement at why the demo page worked fine in IE6 but mine didn't, I realised that the example CSS above misses out a vital .scroll { width: 620px; /*or whaterver width your #slider is */ }
July 24, 2008 at 13:46
@GG - after much bemusement at why the demo page worked fine in IE6 but mine didn't, I realised that the example CSS above misses out a vital .scroll { width: 620px; /*or whaterver width your #slider is */ }
July 25, 2008 at 16:10
The tutorial is great, thank you. The script is almost perfect...
1) I think the tab url should be passed to the url bar to prevent the "refresh bug". Like in this version of coda slider: When you refresh a page the first tab is selected but the last viewed tab content is showed.
2) Adding support for independent tab id so that we can use custom images for the tabs.
3) As posted above the ability to load some of the tab content with Ajax.
Thank you, Mike
July 27, 2008 at 00:51
Can't see it mentioned above and can't seem to work it out...how do I get the next and previous buttons to display elsewhere on the page i.e. not either side of the slider and scroll?
I want them either side of a div further down the page but still to control the slider/scroll div slider.
How do I do this?
Thanks, Ed
July 27, 2008 at 09:36
hi remy!
i am new to your blog and i am really happy i found it ;) despite i am quite new to the js world i am starting to play around with it and jquery, so i tried to extend your slider so that it starts automatically to slide when loading. and the result with just a few codes of line is quite nice. here the code (just add it at the end of your document.ready function:
hope somebody likes it. and thank you very much again for this great site.
July 27, 2008 at 09:41
what did i wrong that only the first 2 lines of the code got formatted?? here the link to the right formatted code: http://codedumper.com/orufi
July 28, 2008 at 08:51
hi! i am a beginner and i tried to use coda slider and slider gallery in the same page but coda slider is not working when used with slider gallery. Both works individually fine. can you give me some idea on what caused it?
July 28, 2008 at 09:02
@Robin - do you have an example link with both of these effect on the page?
July 28, 2008 at 22:39
similar to Aimir and Dan above, I am seeing a bug in firefox where, if you refresh the page when the slider is past its first position, the panels will re-appear mis-aligned.. stuck between the first and 2nd position..
check my work in progress here: http://tinyurl.com/5pj5so
July 29, 2008 at 14:56
Any idea on my issue above (repositioning the arrow icons either side)?
Thanks, Ed
July 30, 2008 at 15:06
I'm getting the same firefox bug as dboz. Please help!!! :)
July 30, 2008 at 18:15
@Michael: thank you for your auto-scroll code! It's exactly what I was looking for for this script. The only thing that I would like it to do as well is change the selected nav link. It seems like it should already do this but it's not working for me (Ubuntu, FF3).
To test why it isn't working, I put "console.log(el)" in the "trigger" function. Except for the first panel, every time it autoscrolls it says "undefined" in the console. I guess because the data variable passed to the trigger function doesn't have an id attribute. In fact, when you click on the nav links (except the first one), it says "undefined" in the console. How would you alter the code to give the correct nav link the "selected" class? I would try but my jQuery-fu is a little rusty.
July 31, 2008 at 01:00
Hey there, Like it, like it a lot. Quick question (I'm no coder, just a graphics guy) - I'm sure this is easy to implement - how would you have this run automatically? ie: not have to click to get to the next item in the list. Thanks in advance J
August 1, 2008 at 07:41
This might be a really stupid guestion. I get vertical and horizontal scrollbars in Mac Safari no matter what i do (they're in this demo too). Is there any way to remove those scrollbars? With intense googling with no luck i's tarting to think it's just a "thing" for this browser or some setting I've turned on (I don't use mac so i'm very, very unfamiliar with Safari).
Thanks for the great tutorial otherwise, got it to work in FF2, FF3, Explorer 6 & 7 with minimun effort.
August 4, 2008 at 17:13
I think you could probably add
constant: false lock: false stop: true
to the scroll options in order to make this effect further mimic the Coda website's effect.
The constant: false will make going from the last to first by hitting the next arrow go at the correct speed.
The lock: false will allow queuing of events, like hitting a tab or arrow before the animation is done.
The stop: true will allow you to stop the running animation and go to the next in the "queue." This is the behavior on the Coda website.
August 4, 2008 at 20:54
@Maku520: it is working fine in my WinXP/FF3, i do not have any ubuntu right now at hand to test :(
August 4, 2008 at 23:31
Hey, Great stuff! I am having a little issue with the tabs not wanting to scroll completely over. http://grfxs.com/index2008.html . Wondered if you could give me a tip on what I screwed up?
Pat
August 5, 2008 at 07:23
Thanks for the auto-script Michael -- worked like a charm. It'd be nice if you could set an alternate delay for the last tab, since animation takes a bit longer to go from the last tab to the first tab. An example is here (watch it go from support to services): http://www.rocketmediastudios.com/index.php/rocketmediasite/index2
August 5, 2008 at 21:48
Has nobody come across relocating the buttons to navigate next and previous?
Thanks, Ed
August 6, 2008 at 00:12
Would anyone mind explaining (or providing a link that explains) the part about not eating up browser CPU? Remy says that using CSS to slide the divs would hog CPU? I'm not sure I understand the difference.
Thanks!
August 6, 2008 at 11:15
@A.S. - the cpu spikes when animating the CSS because it's causing the browser to render that part of the page. Typically not a big deal, but when compared to changing the position of a scrollbar - which is how this effect is achieved, there's zero (or significantly less) cpu usage because the browser is just moving the scrollbar, not having to recalculate too much to draw the page.
August 7, 2008 at 01:59
Thanks for clarifying that, Remy. Makes sense now!
August 7, 2008 at 09:21
Remy - thanks very much for publishing this code, it's been a really big help (both the code itself and your insightful explanations and video). I was able to get it working without too much difficulty on a new site I'm building.
Here's my question: What changes would I need to make to the code so that a different panel is displayed initially each time the page is loaded. So, using your example site, a person may land on the page and see the "files" panel displayed initially (and then they could navigate from there to other panels), another time a person might land on the page and see the "terminal" panel displayed initially.
The goal I'm trying to achieve here is to randomize which panel gets displayed initially. I'm not concerned about creating a cookie to remember that visitor A was shown the "files" panel on their last visit... I just want to inject some randomization so that the first panel, "sites", is not always the first panel visible.
Hope that makes sense. If not, let me know and I'll try to clarify.
Thanks again!
August 7, 2008 at 09:26
One additional question: Is there a way to control the speed of the slider animation? (When I test my sample code in Safari, Firefox & IE, I'm finding that the animation speed is different when clicking on the tabs versus the animation speed when clicking on the next/previous arrows.)
August 7, 2008 at 11:27
Hello, and thanks a lot for this tutorial!
I'm having the same trouble as "Tangier Clarke@June 26, 2008 at 16:05" had: How can we get to have the panels extend vertically? Actually, I was able to do this easily by removing .scroll and .scrollContainer div.panel height parameters. BUT if the user clicks on another tab (i'm using a fixed header) the panel scrolls horizontally but doesn't get back to the top... therefore it shows a blank panel, which is confusing!!!
Thanks in advance for you help,
PY
August 7, 2008 at 12:24
Hello,
I'm quite a newbie in jquery so i managed to get close to what i wanted using css, simply by adding "overflow:auto; /because IE6 doesnt know about overflow-y/ overflow-x:hidden;" /to hide an eventual and digracious horizontal scrollbar/ to the ".scrollContainer div.panel".
This allows the panel to extend vertically if needed... I understand that vertical scrolling isnt the goal for an horizontal panel layout, but it might be useful, especially if the user wants to zoom in...
However, again this isnt quite perfect for me... as i'd much rather have my panels automatically adjust to the height of the window (since i use fixed header AND footer)
Any clue?
August 10, 2008 at 00:29
Remy -- thanks a lot for the code and the screencast, it's helped plenty. I have one other thing on my mind, a small niggle: when using the tabs to goTo a panel, the sliding is much, no, much, faster than when using the side links (prev/next) -- how come? I changed the default value and it quickly becomes apparent, you don't need to slow it down much. I currently have it at 700, which isn't that big a difference to 500. When using the tabs there's almost no difference between 500 and 700, but with the image links the difference is quite noticeable. I would like to slow it down a bit but if the experience is different depending on what you use to activate the slide, there's not much point, if you see what I mean.
I'm using Safari 3 on Mac 10.5.4 (the effect is the same in Firefox 3), if that's of interest.
Many thanks!
August 11, 2008 at 18:01
Cheers mate, great screencast for people like me who need to see things visually. Clear, concise and easy to follow. Thank you.
August 15, 2008 at 12:06
Having some trouble getting the slider to work in my wordpress site. http://www.line47.com/discography/
getting the error "$panels is null"
Any help would be ace!
August 16, 2008 at 13:14
is there a possibility or can you give a link to run this effect for the swit h between real pages and not only between positions in one page with #-anchors?
August 16, 2008 at 18:34
For some odd reason the "any link triggers effect" does not work in my Safari . It works in Firefox 3 and Ive been right through the code and whilst I can read the code I cant seem to find what would stop it from working. Any thoughts? Im betting its something ridiculously obvious that Ill be embarressed about but Im lost.
August 25, 2008 at 13:34
Could I have more explanation about how to do multiple coda slider on a same page ? Thanks
August 26, 2008 at 00:51
Very neat tutorial.
Simple question for any Jquery user:
How do you make the panels change on mouse over?
I have tried to replace the click event to a mouseover. No errors in Firebug but nothing happens. When I click the tab the function still fires ( without the click event )
Any help appreciated. Thanks
Simon.
August 26, 2008 at 16:58
Thanks!
I have implemented this slider in my forthcoming website: codefiredesign.com/site
I just have one question. In Firefox, the navigation tabs don't display when active. They do on hover, but they don't "stay"... does anybody have a solution? I'll look through the CSS a little more...
-David
August 26, 2008 at 17:02
never mind, just fixed it!
-David
August 27, 2008 at 01:29
I just wanted to say thanks for the slider and to also confirm I get the same refresh bug mentioned earlier in the comments. As far as I can tell it only happens in Firefox and it's really not a huge deal for me. Thanks again for sharing.
August 28, 2008 at 10:09
I am trying to implement this on my future website, but unfortunately, it seems that it REQUIRES the .scroll to have an height under Internet Explorer 7, which sucks because my layout's width is flexible...
I did implement the original Panic code before "converting" myself to jQuery, and it worked fine (except I am placing the navigation buttons on the div.panel itself, and IE7 was freezing up the image of that button while everything else moved).
Is there any way of "patching" it so it won't require height anymore?
August 29, 2008 at 11:30
Even though I'm an editor by trade, somehow I ended up agreeing to rebuild my mother's website, and for some reason decided to include this slider, which is fantastic. I've still got to tart the design up a bit, but it all appears to be working here: http://www.sabc.co.uk/st-albans-office.html If anyone spots any issues, let me know (or needs an office in st albans!). Otherwise, thanks for the code. I don't understand the javascript, but I understand how to make it work, and that's probably enough! Cheers.
August 31, 2008 at 00:23
It's so weird, I never experienced a JavaScript WORKING in IE6, but NOT in IE7 (it works with everything else)... Only because the height isn't fixed?!
Anyway, I'm going to try to figure a way, but if you want to help, I've put it here : http://laurentlasalle.com/now/this.html (it's in french, just press the blue buttons)
September 2, 2008 at 12:49
Well here's my problem, I'm working with ASP.NET right now...well I know you guys don't, it's just that I tried implementing your Coda Slider on a aspx page and well it don't work as intended, I tried it with a normal html page and it works perfectly, however is there any way to make this work with an ASP.NET page, plz let me know...thanks alot;)
September 2, 2008 at 16:51
Hi well it works now used another way to implement it...thanks for great tutorials
September 4, 2008 at 23:33
Hi there, Can you please explain how to turn this into a vertical slide instead of horizontal?
Thanks
September 5, 2008 at 00:07
Actually, disregard my last message.. I got that sorted..
but here is another question, how can I have the div height to be on auto depending on the size of height of a div.
Tried to add 100% and auto in CSS under .scroll, but that isn't working...
September 5, 2008 at 04:07
Need Help. Desperately, I am very dumb in JS, but managed to integrate jquery (panic coda) slider in my web page. But I wasted three / four days to find the problem I am facing.
Please check the implementation on
http://www.modular-infotech.com/ytry/jqps/
My JQ Coda slider is getting triggered by other jquery tabs (tabs located on right column) or other plain named links. But could not able to fix it myself. I am getting error following error
Error: a is null Source File: http://localhost/1/js/jquery.serialScroll-1.2.1-min.js Line: 11
How should I stop this JQ panic coda slider being triggered by other links on the page? Thanks
September 7, 2008 at 23:27
Great script and really easy to use. I just have one problem and would be greatful for any solutions...
I have a suckerfish drop down menu on my site(http://lugtons.co.nz), and it drops over the slider. Works fine in Firefox, but both IE6 and IE7 are not displaying it properly - the drop down menu goes behind the slider. I've got my z-indexes right, but it's still no good. Anyone have a fix for this? I know there's a suckerfish fix for a smiliar bug (when the menu drops behind select boxes) but I'd rather not use it as it involves iframes... Any suggestions will be appreciated!
September 8, 2008 at 21:14
I got it to work with an instance of prototype also running (Replace the $ with jQuery if you run into the same problem on the coda-slider.js) but here's my problem... Works fine in ALL browsers, but if I add an embedded video from say, vimeo on one of the divs... ONLY in firefox for Windows, the video shows up on top of everything else... on top of the rest of my page. I click the tab and you can actually watch the video move around the page when it should be hidden. Could that have something to do with the overflow? Doubt it... help anyone?
September 10, 2008 at 10:56
This script is fantastic ! Thank you for sharing. I just have a question and hope you can help me.
I'd like to call the scroll from a flash animated menu, throught the getURL function. A javascript function to trigger the scroll to the desired panel would be perfect... I'm sure it's possible, but I can't come out with it :-(
Thank you for your help !
September 11, 2008 at 01:10
Hi, I love the this implementation of JQ Coda Slider. Can it be implemented in a nested way? etc.. Coda Slider in Coda Slider Anyone have done such implementation before? Can share? Many Thanks!
September 11, 2008 at 03:10
Hi all great site Is it possible to have it slide left and right on mouse over on buttons without having it stop so it just slides until mouse out? Any pointers would be helpfull, or just a link to an example
Thanks in advance
September 11, 2008 at 10:41
Wonderfull plugin...but I've a bug in Firefox (any version, any OS) which none seems to have experienced:
http://www.ghigos.com/testdrive/coop2006/fotografia.html
everything seems perfect but if you browse with the menu to another panel (let's say the second or the third...) in the same page and then try to scroll using the browser bar, it will scroll down but takes you back to the first panel!!! any help would be extremely appreciated!
September 11, 2008 at 11:17
First of all -- Thanks for all the wonderful scripts and tutes!!!
I am an aspiring web2.0,jquery front end designer..and I need ur help.
I feel that the slider script is clashing with my tracking codes (omniture tracking script). The jump to functions are fine but its not sliding at all. Please see link below.
http://www.tya.com.sg/microsite/vaio/index2.html
The slider works fine without the omniture tracking codes, here. http://www.tya.com.sg/microsite/vaio/index3.html (click the links..on the slider, below the flash)
I cannot really take out the tracking codes, im pretty sure my client wouldnt agree.
I've scourged the net for some answers, but since I am such a newbie in Jquery I really cannot make the work around work.
I appreciate if you can help me on this. Really need the help. Thanks!
Again great work!
September 13, 2008 at 01:39
Great tutorial! Just a few things are making me pull my hair out. I connfess I am combing a few different things here.
www.jasonhealy.net/media/mypage.html
I cant get it to scroll left and right. now i know this is cause I have and overflow style on the projects div but this needs to be there for the slide up/down effect. Any ideas greatly appreciated!! also dont know how to use easing functions on the slide/updown?? will link you when site is done cheers J
September 13, 2008 at 16:59
ok its the displsy:none property i have on the collapsable div housing the coda slider causing it to scroll vertical. please help if ya can!
September 16, 2008 at 20:59
Hi, great site, great tutorials. I got the slider up and running but I'm having one hell of a time getting an "indicator" image above the active link so you know what section you're on. An example of what I mean can be found here (the half circle above each active link):
http://www.playintraffik.com/
Any push in the right direction would be greatly appreciated. Thanks.
September 18, 2008 at 15:30
Any ideas on how to add a disabled class to the arrows if there's no more content to scroll?
September 21, 2008 at 08:24
I'm with Marcel. Can we add a class to make the left arrow not appear on the first slide, and make the right arrow not appear on the last slide?
Awesome tutorial btw.
Andrew.
September 23, 2008 at 13:09
Hi folks, First, great tutorial for jQuery beginners! I'll put this effect on my website, but with a little difference. I would like to make it visible in a modal window instead the main page. I use this plugin: http://www.ericmmartin.com/projects/simplemodal/ that's is simple and nice to use :-) I made the test here: http://stu.pido.us/~xbelanch/xbelanch/ If you click at "veure presentació", you will see the modal window with the slide panels. Click the right or left buttons, but only have a strange behavior. It seems that css property: $container with the total width not runs well: appears 0 px!!
Any ideas?
Thanks!! Xavier
September 23, 2008 at 17:06
I AGREE WITH ANDREW AND MARCEL! gREAT SITE, EXCELLENT TUTORIALS!!! THX FOR USEFUL INFORMATIONS :)
September 24, 2008 at 19:07
Ditto Marcel and Andrew; great idea...
... but I can't get the arrows to show up at all. In Firebug, I see the line of code, but it's greyed out... and I have no idea why.
Anyone?
September 25, 2008 at 02:29
Has anyone found a way to have the panel and navigation remember the last one you were on if you reload the page? I know it has something to do with cookies, but I have no idea where to start.
September 25, 2008 at 15:44
Or has anyone seen a coda example online with disabled classes on the arrow? Please share if so.
September 27, 2008 at 00:16
Hey there thanks for the great site!
I'm having an odd problem and I'm not sure what is causing it.
I've implemented this slider in a simple page. It works fine in IE but it does not work in any other browser such as FF. Firebug tells me there are some errors:
illegal character Error: illegal character Source File: jquery-1.2.6.js Line: 1, Column: 4 Source Code: 昨湵瑣潩⡮笩⼊ਪ⨠樠畑牥⁹⸱⸲‶敎⁷慗敶䨠癡獡牣灩ੴ⨠ 潃祰楲桧⁴挨
Error: illegal character Source File: jquery.scrollTo-1.3.3.js Line: 1 Source Code: ⨯പ 兪敵祲匮牣汯呬൯ 潃祰楲桧⁴挨
Error: jQuery is not defined Source File: jquery.localscroll-1.2.5.js Line: 102
Error: jQuery is not defined Source File: jquery.serialScroll-1.2.1.js Line: 190
Error: $ is not defined Source File: coda-slider.js Line: 2
Like I said it's working perfectly fine in IE but not in Firefox for some reason. I've searched around everywhere on how to solve this problem but I have not had any luck. I had this same problem with the other jquery coda slider that's floating around so clearly I am doing something wrong.
Any ideas on what is causing this or how to fix it? Thanks!
September 27, 2008 at 00:16
Forgot to mention I took these files directly from the working demo on here... (demo works fine in all browsers for me)
September 27, 2008 at 04:53
Just wanted to post here finally figured out i had to add
charset="iso-8859-1"
javascript src in my html file