Jquery Tools & Scrollable

Question

I have scrollable with the navigator plugin and history set to true. This is so that users can use id'd links to scroll to the selection of their choice in the scrollable list (about 50 items). I have circular set to true.

The items show in groups of 4. But the previous and next buttons only move by 1 item, whereas I want them to move by 4 items. How do I do this?

I can't group them in div pages since the indexed tab list then matches to these div pages rather than the contained items.

I tried creating a click handler with api.move(-2), but all kinds of strange things happen (doesn't pre-empt native scroll-by-one; rewinds instead of advancing, or advances and then rewinds in one sequence - not acceptable).

I'm obviously missing something basic. Pointers would be appreciated.

Thanks,

• Henrik

Answer 1

Here's what I ended up doing: I grabbed the api and replaced the next and prev functions; disabled circular; added first and last buttons. Sort of a workaround/semi-solution. You can see the result at http://cityrinks.ca/wiki/wiki.php?n=ListOfRinks.TableOfRinks

$(function() {
$(".scrollable")
     .scrollable({
        vertical: true, 
        mousewheel: true,
        circular:false 
     })
     .navigator({
    navi: "#rinktabs",
    naviItem: 'a',
    activeClass: 'current',
    history: false
      });
var api = $(".scrollable").data("scrollable");
api.next = function(time) {
index = this.getIndex();
size = this.getSize();
interval = size - index;
if (interval > 4) interval = 4;
return this.move(interval, time);
};
api.prev = function(time) {
index = this.getIndex();
if (index > 4) index = 4;
return this.move(-index, time);
};
$("#firstbutton").click(function() {
var api = $(".scrollable").data("scrollable");
return api.begin(api.speed);
});
$("#lastbutton").click(function() {
var api = $(".scrollable").data("scrollable");
return api.end(api.speed);
});
});