Question

I’m using jquery UI tools scrollable with a nav. I want it so that it autoplays automatically, which is fine, but the timing goes all funky whenever I interact with the nav.

I want it to stop when I click on any of the nav links. I can’t seem to get scrolling to stop!

Here’s the code that kicks it off:

HTML:

    <div id="flowpanes"> 
        <div class="items">
            <div>
                <h1>Content 1</h1>
            </div>
            <div>
                <h2>Content 2</h2>
            </div>
            <div>
                <h2>Content 3</h2>
            </div>
            <div>
                <h2>Content 4</h2>
            </div>
        </div>
    </div>
    <ul id="flowtabs" class="navi">
        <li><a href="#one" class="current"></a></li>
        <li><a href="#two"></a></li>
        <li><a href="#three"></a></li>
        <li><a href="#four"></a></li>
    </ul>

Jquery that activates it:

$(document).ready(function() {
    $("#flowpanes").scrollable({ circular: true, mousewheel: true }).autoscroll({autoplay: true,interval: 5000,steps: 1}).navigator({
        navi: ".navi",
        naviItem: 'a',
        activeClass: 'current',
        history: false,
    })
}); 

I tried this, but it didn’t work:

$(".navi a").click (function(){
    api.stop()
});

Then I tried adding js to the actual buttons, but I don’t think I’m specifying it correctly – does something like the below code need something else to pin point the scrollable area – the scrolling content is in a spearate div above ul.navi:

 <ul id="flowtabs" class="navi">
   <li><a href="#one" class="current" onclick="api.stop()"></a></li>
   <li><a href="#two" onclick="api.stop()"></a></li>
   <li><a href="#three" onclick="api.stop()"></a></li>
   <li><a href="#four" onclick="api.stop()"></a></li>
 </ul>

I also tried adding clickable: false to the navigator section under history: false, but that didn’t work either.

Can anyone help?

Answer 1

If you look the sourcecode of the jquery ui scroller example at jQuery Scrollable they use this instruction for assigning the api object to the current window:

// provide scrollable API for the action buttons
window.api = root.data("scrollable");

have you tried it?