views:

10

answers:

0

Hi, does anybody have any idea what the conflict is between these two jQuery scripts?

I'm using the horizontal Coda slider, for the main homepage feature, and I'm also using some jQuery for switching between the tabs on the news panel in the sidebar. When I click on one of the news panel tabs it causes the main homepage feature to move.

You can see it in action at - http://callcredit-html.epiphanydev2.co.uk username: demo password: demo

My jQuery is as follows:

$(document).ready(function () {

    //NEWS PANEL
    $(".news-box").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".news-box:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".news-box").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
    // END NEWS PANEL

    // CODA SLIDER
    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');

    var horizontal = true;

    if (horizontal) {
        $panels.css({
            'float' : 'left',
            'position' : 'relative'
        });

        $container.css('width', $panels[0].offsetWidth * $panels.length);
    }

    var $scroll = $('#slider .scroll').css('overflow', 'hidden');

    function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
    }

    $('#slider .navigation').find('a').click(selectNav);

    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();
    }

    var offset = parseInt((horizontal ? 
        $container.css('paddingTop') : 
        $container.css('paddingLeft')) 
        || 0) * -1;

    var scrollOptions = {
        target: $scroll,
        items: $panels,
        navigation: '.navigation a',
        prev: 'img.left', 
        next: 'img.right',
        axis: 'xy',
        onAfter: trigger,
        offset: offset,
        duration: 800,
        easing: 'swing'
    };

    $('#slider').serialScroll(scrollOptions);

    $.localScroll(scrollOptions);

    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);

    var $buttons = $('img.right').add('img.left').hide();

    cycleTimer = setInterval(function () {
       $scroll.trigger('next');
    }, 10000); 

    var $stopTriggers = $('#slider .navigation').find('a')
        .add('.scroll')
        .add('.stopscroll')
        .add('.navigation')
        .add("a[href^='#']");

    function stopCycle() {
       clearInterval(cycleTimer);
    }

    $stopTriggers.bind('click.cycle', stopCycle);

    var $startTriggers_start = $('#slider .navigation').find('a')
        .add('.startscroll');

    function startCycle() {
       $buttons.hide();
       $scroll.trigger('next');
       cycleTimer = setInterval(function () {
       $scroll.trigger('next');
       }, 5000); 
    }

    $startTriggers_start.bind('click.cycle', startCycle);
    // END CODA SLIDER
});

Any idea? Thanks