Problems with jquery tools scrollable API

Question

I'm using the jQuery Tools scrollable plugin and have been trying to make use of its API to create custom controls. However, I can't get them to work no matter what I do!

I have an autoscrolling, vertical slideshow and want to be able to pause it (or restart it, or move it to a particular place) using my own bespoke elements. Using the code below I am getting a "Uncaught TypeError: Object # has no method 'pause'" error when I click the pause button. What am I doing wrong?

$('document').ready(function() {
        $("#scrollable .items").cycle();
        $("#tabs").tabs("div.panes > div");         

        window.api = $("#sideScrollable").scrollable({
            vertical: true, 
            items: "ul", 
            size: 1,
            speed: 4000, 
            mousewheel: false, 
            keyboard: false, 
            circular: true}).navigator().autoscroll(0,{ 
                api: true,
                autoplay: true });

        $('.pause').click(function() {
            api.pause();            
            return false;
        });         

});

Thanks so much for your help.

Answer 1

I realize this is fairly old (and I'd assume you have this corrected by now), however, I've been trying to clear through all unanswered jQuery questions to help out the community. So, here goes: instead of using window.api, try using a global variable, like so:

var myAPI;
$('document').ready(function() {
    $("#scrollable .items").cycle();
    $("#tabs").tabs("div.panes > div");         

    myAPI = $("#sideScrollable").scrollable({
        vertical: true, 
        items: "ul", 
        size: 1,
        speed: 4000, 
        mousewheel: false, 
        keyboard: false, 
        circular: true
    }).navigator().autoscroll(0,{ 
        api: true,
        autoplay: true
    });

    $('.pause').click(function() {
        myAPI.pause();            
        return false;
    });         

});