New
Play QuickTime version 
Play Flash version 
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.
You should follow me on Twitter here I tweet about jQuery amongst the usual tweet-splurges!
Related screencasts
Demo
If you find this demo doesn't work as expected, it's possibly due to the demo running from within an iframe. Try running the demo in it's own window.
Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Better Coda Slider</title>
<link rel="stylesheet" href="coda-slider.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="coda-slider.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="wrapper">
<h1>jQuery Coda Slider</h1>
<div id="intro">
<p>This technique demonstrates an accessible 'Coda'-like slider interface, but in addition, allows you to place links to the sliding content anywhere on the page and have the effect (and navigation) still work. <br /><a href="http://jqueryfordesigners.com/coda-slider-effect">Read the article, and see the screencast this demonstration relates to</a></p>
</div>
<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>
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="sites"><h2>Sites</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="panel" id="files"><h2>Files</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="panel" id="editor"><h2>Editor</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="panel" id="preview"><h2>Preview</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="panel" id="css"><h2>CSS</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="panel" id="terminal"><h2>Terminal</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#sites">And some sites</a></p></div>
<div class="panel" id="books"><h2>Books</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>
</div>
<div id="shade"></div>
</div>
<p>Lorem ipsum dolor sit amet, <a href="#books">books</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href="#sites">sites</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <a href="#terminal">terminal</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D63879189.-%3B)
John On 12th October 2009 at 02:10
I went through all the comments and i saw some people mention that they could not make Lightbox or Thickbox work with Coda Slider.
For me i can’t combine PrettyPhoto with Coda Slider. How’s that?
This really need a solution.
Other than that it works great.
Thanks and good job.
Shahriar Hyder On 12th October 2009 at 06:10
Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/
John On 13th October 2009 at 23:10
Ok so i just had to place the prettyphoto script under the codaslider one and it works great. It’s awesome.
Thanks again.
Rudy On 15th October 2009 at 01:10
Hello all I tried to make the scrolling vertical setting up the float to ” as described some comment above but unfortunatley this did not work for me : the content is displayed without effect. By the way I have another big problem related to styling: the script calculates the maximum height of the portion to be scrolled and take it as standard value: is there a way to let the scroll be height as its real content insted of taking the highest value? this would be perfect because now my control bar at bottom sometimes is close to content and sometimes is not!!! Thanks
Rudy
rgregory On 15th October 2009 at 20:10
I am trying to build a slider that works in Hybrid using a tutorial that I found on jQuery for Designers. I am very close to getting it to work. When I do, I will post a video tutorial that will show the steps and I’ll try and release a child theme (bare bones) with a working version for those that want it. Though it may be easier to create it with the supplied code.
Anyway, here is the post that contains the background and problem, complete with screencast.
http://www.greenermountain.com/2009/10/a-cry-for-help/
Jamen On 16th October 2009 at 02:10
Does this slider, or do you know of any sliders that load your current tab first, then preload the rest?
Also, how does this slider handle vertical overflow? Is it per frame?
Lastly, strange issue I’ve noticed when working with sliders before: If each ‘panel’ (referring to objects via their CSS classes) has ‘overflow: auto;’ set while the ’scrollContainer’ has ‘overflow: hidden;’ Mozilla seems to ‘flicker’ during the transition where as other browsers do not.
Screenshot: http://img240.imageshack.us/img240/1420/screenshotht.jpg
Guess I’ll find most of this out when I try it! :)
Nice article by the way. Very comprehensive.
Thanks, Jamen
Dan On 17th October 2009 at 01:10
Hi, great tutorial. One problem i’ve encountered, which is a problem for users of the site i’m working on. As people are so used to using the browser navigation rather than the one created within the page, when they click backwards and forwards, it’ll navigate off the page.
Is there a way to make the # links apear in the address bar, and allow people to navigate the conventional way, but allowing animated transitions?
I’ve seen this done on a couple of websites, but can’t figure out how when looking at the code. (Can’t currently remember the addresses, i’ll link when i find out)
Thanks Dan
Fred On 20th October 2009 at 14:10
how can I change height and width ? in CSS ?
lorenzo On 21st October 2009 at 16:10
Nice work. Got it working no problems.
How about onload it automatically loads the panel to match a day of the week? For example if my ID’s are: monday, tuesday, wednesday and so on… Could there be some javascript to load and possibly use SSI or PHP include to write out the name of the day inbetween request for the panel to load?
mpmchugh On 21st October 2009 at 17:10
@damon
Is there a trick to getting your auto cycling code to work? It just breaks my implementation when I add the code to the end of coda-slider.js.
Thanks, mpm
web suunnittelua On 22nd October 2009 at 15:10
Thanks for this tutorial, its getting harder and harder to find high quality tutorials these days. Your code examples are so clear and the video is nice and easy to follow. I’m just trying to implement these sliding tabs into a registration wizard, we’ll see how it goes :) Great work, thanks again!
Ramsey On 22nd October 2009 at 20:10
John (and anyone else) - I’m trying to get prettyPhoto to work with my version of this coda slider as well, but adding my scripts to the top don’t seem to fix it. Any ideas?
peng On 23rd October 2009 at 18:10
how can i set the scroll to up anda down i set directions to “YY”,it’s not working
stinki On 26th October 2009 at 15:10
hi, great script! it works like a charm for me.
i added the code for auto cycle that was posted before. the triggers to stop the auo-cycle works also but now i need a trigger to start it again.
how can i do it?
thanks a lot, stinki
Damon On 27th October 2009 at 00:10
@mpmchugh here’s a direct link to my coda-slider.js use as is or check against your code.
http://solutionarts.net/js/coda-slider.js
also, I’m not using any minified versions of the other js running the site:
jquery.serialScroll.js
jquery.scrollTo.js
jquery.localscroll.js
jquery.easing.compatibility.js
jquery.easing.1.3.js
jquery-1.3.2.js
coda-slider.js
DrDiv On 30th October 2009 at 17:10
Great slider! On the last slide, is there a way to make the right button continue to scroll to the first slide, instead of scrolling left all the way to the beginning?
Thanks, DrDiv
katapofatico On 31st October 2009 at 22:10
Hello,
Can you give me a tip, please?
A lot of thanks!
dave On 2nd November 2009 at 16:11
Firstly thanks for the awesome slider, it is really nice!!
I want to make the silder work with a picture navigation. Is there any way to make this work?
The problem is that every li needs another picture when selected.
Is there any way you post a solution for this?
Thanks in advance.
Pschorr On 2nd November 2009 at 18:11
I’m attempting to get the arrows to disappear when you’re at the first and last slide, although I’m having some issues. I tried to use the serialscroll plugin to do it but it doesn’t seem to be working other than stopping the scrolling at the end and making the arrows inactive.
Does anyone have a simple solution to hide the arrows at the end and beginning?
Thanks!
Dan On 6th November 2009 at 07:11
Hi,
I am having an issue. The overflow in firefox gets messed up when I try to embed a video in the slider. The overflow does not remain hidden and you can see the right side. when the page loads. This only happens in PC versions of firefox. Safari, firefox, chrome, and opera are fine on my mac. The evil IE 6-8 is fine on a pc. For some reason this is just broke on firefox for windows.
Here is a link http://notjustanotherjones.com/Slider/
Any help would be greatly appreciated.
Thanks,
Dan
vk On 6th November 2009 at 12:11
Thank you very much for the information.
Can i ask you how can i change the top menu. For example to put my own hover images.
to make something like that http://soundcloud.com/tour
Thanks in advance
johan On 7th November 2009 at 15:11
Hi, I’m having a hard time hiding the next or previous buttons when I’m at the left or right end of my panels. Any tips on how to do that?
Krieg On 7th November 2009 at 23:11
Hi there Coda Slider enthusiasts!! Wow incredible tool you got there sir. Really useful and appealing, got like, a day or two getting to work this great idea. But as all in here, got bump with a really weird problem. Am trying to use a flash menu; it uses a xml and stuff, but the url assing, is inside the source file of the flash project. It works when i assing the “#slide”. It makes each panel switch but without the sliding animation, its like it refreshes and no animation is played. It does work with the normal menu. Just wondering if any of u guys are willing to help me. I uploaded the files even the flash source and hopefully someone finds it useful and also a great coder helps me solve this problem. I can assure there is no virus in that .rar file, but i recommend doing a viruscan (u never know). Any question or solutions please e-mail me to soriano_x@hotmail.com.
Hoping a Response Best regards Krieg
P.S. Excuse my English Grammar =D by some reason my comments are not saved =S
http://depositfiles.com/files/1dqxmngs8
justin On 8th November 2009 at 06:11
Hi, great snippet.
Question though… I am having trouble getting the slider to change automatically (on a timer), while maintaining the links functionality as well. Do you think you can point me in the right direction? I feel as if JQuery already has some sort of timing feature built in, I’m just unsure of how to utilize it.
Thanks in advance.
Justin
JD On 10th November 2009 at 16:11
In Firefox (Windows version 3.015) when you refresh the page - the first tab is shown as selected - but the display area stays on whatever the content for the last tab selected .
For example, on your example, if I click on CSS and then reload the page I see the Sites tab as selected, but it displays the CSS information panel.
This happens to me on your example site as well as the site I am trying to implement this on.
I really to need to get his working properly, any ideas? Is there some way to auto set SerialScroll to a certain spot on page reload?