views:

12

answers:

0

I'm using the horizontal coda slider on my page to show featured content, and it's working just about right. The only problem I'm having is when I click any other link on the page that is linking to an id (e.g. <a href="#top">Top</a>), it is causing the slider to animate.

You can see an example of this here - Click one of the coda slider navigational tabs, and then try clicking either the 'callcredit news' or the 'press association' links in the right sidebar, or alternatively click the 'ipsum dolor' link in the main body copy.

Username: demo Password: demo

Anybody have any idea why it would be doing this? The jQuery is as follows:

//CODA SLIDER
    if ($('div#slider').length) {
        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('#slider ul.navigation: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 == 'plan') {
            trigger({ id : window.location.hash.substr(1) });
        } else {
            $('#slider ul.navigation a:first').click();
        }

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

        var scrollOptions = {
            target: $scroll,
            items: $panels,
            navigation: '#slider ul.navigation a',
            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