Jquery Tools Slideshow and tabs question

Question

Hi,

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

Answer 2

Add an ID to each of the 'tabs' (which are displayed as the dots) and you'll be able to find the corresponding headline element from it. From there it's just a matter of making sure it's the only one with the class current.

<!-- the tabs --> 
<div class="slidetabs"> 
    <a id="tab_0" class="current" href="#"></a> 
    <a id="tab_1" href="#"></a> 
    <a id="tab_2" href="#"></a> 
</div> 

...

$(".slidetabs a").mouseover(function() {
    $(".headline-list li a").removeClass("current");
    var id = $(this).attr("id").substr(4);
    $(".headline_"+id).addClass("current");
})

You might want to make the headline_X classes ids - unless actually do expect to have multiple of each, but they seem more like unique identifiers that classes of elements that behave the same.