I've been driving myself crazy trying to make this work. Variations of my attempt have become insanely embarrassing - I just can't seem to figure out what Niall slider wants me to do in order to trigger the slider to go to the next frame without clicking anything.
What I want is for the slider to slide to the next frame when form elements are changed. So, with jQuery that should be about as simple as saying:
$(document).ready(function()
{
$('#radioButton').change(function(){
GO TO THE NEXT FRAME
});
})
But apparently it's not that simple. I've tried a lot of things. Some desperate things. Mostly just trying to trigger parts of his code. The code that appears to make the next frame happens is this code:
$('#coda-nav-right-' + sliderCount + ' a').click(function(){
navClicks++;
if (currentPanel == panelCount) {
offset = 0;
currentPanel = 1;
alterPanelHeight(0);
slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('a:eq(0)').addClass('current');
} else {
offset = - (panelWidth*currentPanel);
alterPanelHeight(currentPanel);
currentPanel += 1;
slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().next().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;
});
It's a combination of me being very mediocre with JavaScript and being fairly unfamiliar with Niall's code. It's well commented, but I can't tell exactly what's happening on each line. When I can see, I'm not really sure how to make the same thing happen with my .change
function.
Anyway, if someone can shed some light on this I'd be incredibly grateful. I think if I can be helped to figure this out, it might help me out quite a bit down the line as well. I think there's something about JavaScript here that I'm not understanding, but I don't know what it is.
You can programmatically click a link using the no-args click()
function in jQuery. Assuming you are using the same setup as most of the examples, you should be able to write something like this:
HTML:
<input type="radio" id="next-panel" />
JavaScript:
$("#next-panel").bind("change", function() {
$("#coda-nav-right-1 > a").click();
});
This will click the link that's in the default location for the "right" link in the demos. You can see a working example here: http://jsfiddle.net/andrewwhitaker/WzJMP/
Side note: Have you considered using jQueryUI tabs? jQueryUI has a much more usable and well-documented API, and you could easily recreate the effects and functionality of Coda slider. You'll also probably get better support on sites like StackOverflow.