Question

I have created the following example to illustrate a problem I have with a jquery tools slideshow. I want the list of headlines at the bottom to highlight as I scroll over the navigation dots below the content pane.

http://testing.lukem.co.uk/slider/slideshow.htm

It’s a while since I’ve done any javascript or jquery so any pointers gratefully received!

I think I may be able to acheive it using the API and / or the tab index.

Many thanks,

Answer 1

It’s not pretty, but I hacked this together quickly:

$(".slidetabs a").mouseover(function() {
    // clear styles from the other elements
    $(".headline-list a").removeClass("current");
    // find the corresponding headline and highlight it
    $(".headline-list a:eq(" + $(this).index() + ")").addClass("current");
});

Hope it helps.

Also, you really should wrap all your DOM-referencing code in a handler that you pass to the document.ready() function, which will ensure that it runs only after the DOM has been fully generated. If you don’t, it’s kind of a pot-shot as to whether the elements you reference in your script (“.slidetabs”, for instance) will actually exist on the page when you try to query for them. Here’s an example of using document.ready() with your code:

$(document).ready(function() {
    // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready

    var api = $(".slidetabs").tabs(".images > div",{api: true});

    api.onClick(function (tabIndex) {
        console.log(tabIndex);
      if (tabIndex === 0) {
        $("headline-list > li > a.current").hide();
      }
    });

    // removed the shorthand $(function() { }); part
    // since the whole thing is inside the more readable document.ready handler now

    $(".slidetabs,.headline-list").tabs(".images > div", {event:'mouseover'},{

        // enable "cross-fading" effect
        effect: 'fade',
        fadeOutSpeed: "slow",

        // start from the beginning after the last tab
        rotate: true

    }).slideshow();
});