I have an element and two different functions are assigned  to it.
One calls for carousel.next() and another triggers a navigation link
to change class.
I need click to be disabled until both are complete. How can I achieve
that?

(I am talking about $('.carousel-next') element
Here is the code:

function mycarousel_initCallback(carousel) {
    $('.navigation a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval($(this).text()));
        $('.navigation .selected').removeClass('selected');
        $(this).addClass('selected');
        return false;
    });
    $('.carousel-next').bind('click', function() {
        carousel.next();
        return false;
    });
}
$(document).ready(function () {
    // first carousel (coda)
    $('.carousel-first').jcarousel({
        visible: 1,
        scroll: 1,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        wrap: 'both'
    });
    // second carousel (image)
    $('.carousel-second').jcarousel({
        visible: 1,
        scroll: 1,
        vertical:true,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        wrap: 'both',
        animation:'slow'
    });

    // hacking navigation to follow 'next'
    $('.navigation a:first').addClass('selected');
    $('.carousel-next').click(function(){
       if ($('.navigation li:has(.selected) + li').length!=0) {
        $('.navigation li:has(.selected) + li')
            .children()
                .addClass('selected');
        $('.navigation .selected:first').removeClass('selected'); }
        else {
            $('.navigation li:first')
                .children()
                    .addClass('selected');
        $('.navigation .selected:last').removeClass('selected');
        }
    });
});

Reply via email to