I actually had to do something similar with a project and was delighted to find the jquery tools scrollable plugin. Like you though, I had a autoscrolling feature, but it had to stop upon any user interaction (let the user navigation through the panels on their own), and to carry it one step further, after a given amount of inactivity, continue the autoscrolling. The given time limits might be: 10 seconds per panel, with auto resume happening after 30 seconds of inactivity, but I'm using smaller values so that it is easier to debug.
What you want to accomplish can be done through the api property. You construct an event listener on the panel (or anything else) for a click perhaps, and on click, call api.pause(); To take it further again, I'm using a javascript timeout which calls api.play() in a given time frame, if the user does not click again (you must also be sure to clear out any old timouts before refreshing with a new one.
I'm using all of the plugins which aren't really necessary, the key things you want to follow are the variables at the top for setting time limits, the fact that I'm catching the return value from .scrollable() into window.api, and then referencing it below in the click event listener. Hope this helps, good luck!
The code follows:
// execute your scripts when the DOM is ready. this is a good habit
$(document).ready(function() {
var hovertime = 3; // time in seconds to stay on each panel
var idletime = 10; // time in seconds that user is idle before cycle begins again
var idletimer = 0; // store our idle timer id so we can keep refreshing it
// initialize scrollable, setup plugins and params
window.api = $("div.scrollable").scrollable({
size:1
})
.circular()
.navigator()
.autoscroll({
steps: 1,
interval: hovertime*1000,
autopause: false,
api: true
});
// if the user clicks the panel
$('div.scrollable').click(function() {
// pause the autoplay to let them navigate manually
api.pause();
// everytime they click we want to refresh our timer, so we must delete the old one
if (idletimer) {window.clearTimeout(idletimer);}
// set a timer which will return the panel to autoplay after no activity
idletimer = window.setTimeout(function() {
api.play();
}, idletime*1000);
});
});
