Question

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.

Answer 1

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.