Coda Slider - Problem with slider.siblings
Hi,
I'm having a problem with the Coda Slider plugin for jQuery. Being a JavaScript novice, I have no idea how to solve the problem myself. So... any help would be most appreciated.
The demo example I'm working from can be found here:
http://www.ndoherty.biz/demos/coda-slider/2.0/
I'm using Example 4, without the hard-coded non-dynamic navigation.
Here's my code:
===start===
<div class="box-footer">
<div id="coda-nav-1" class="coda-nav">
<ul>
<li><a href="#1">Client Briefing Form</a></li>
<li><a href="#2">About You</a></li>
<li><a href="#3">The Basics</a></li>
<li><a href="#4">Details</a></li>
<li><a href="#5">Anything Else</a></li>
</ul>
</div>
<div id="footer-buttons">
<div id="coda-nav-left-1" class="coda-nav-left"><a href="#" title="Prev"><span><</span></a></div>
<div id="coda-nav-right-1" class="coda-nav-right"><a href="#" title="Next"><span>></span></a></div>
</div><!-- End footer-buttons -->
</div><!-- End box-footer -->
<div class="box-divider"></div>
====end====
When you click on one of the links within the ul, the script assigns a "current" class to the link. Therefore, I'm able to style the slider's menu to show which section the user is in. This doesn't work, however, when the user users the next/prev buttons. The content still slides perfectly, it's just that the "current" class doesn't get added to the ul links, as it does when you click on them directly.
The problem goes away when I remove the containing shape (<div class="box-footer">) - the links then get assigned the "current" class when I either click the links directly, or use the arrows. However, removing the containing shape breaks my design.
This suggests that the Coda Slider code is attempting to alter anchor links at its own level within the hierarchy. The code from the jQuery plugin suggests this is the case - see "slider.siblings" etc:
===start===
// Left arrow click
$("#coda-nav-left-" + sliderCount + " a").click(function(){
navClicks++;
if (currentPanel == 1) {
offset = - (panelWidth*(panelCount - 1));
alterPanelHeight(panelCount - 1);
currentPanel = panelCount;
slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('li:last a').addClass('current');
} else {
currentPanel -= 1;
alterPanelHeight(currentPanel - 1);
offset = - (panelWidth*(currentPanel - 1));
slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().prev().find('a').addClass('current');
};
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
return false;
});
===end===
Do I need to adapt either piece of code to look elsewhere for the "current" class? If so, how?
Thanks.