Basically I’m trying to fix the Jquery Tools 1.2.6 Scrollable’s strange habit of scrolling

Question

0

Asked: May 26, 20262026-05-26T17:58:02+00:00 2026-05-26T17:58:02+00:00

Basically I’m trying to fix the Jquery Tools 1.2.6 Scrollable’s strange habit of scrolling

0

Basically I’m trying to fix the Jquery Tools 1.2.6 Scrollable’s strange habit of scrolling past the last item if the number of items is not evenly divided by the scroll size.

In other words if I have a widget that contains 11 items and it is set to display 2 at a time and each time the next button is clicked to scroll to the next 2 items, when it comes to the eleventh item it will scroll so the eleventh displays but with an empty space to the right where the twelfth item would be were there one. Essentially scrolling the next 2 into the view despite the absence of the second item

Here I have a jsFiddle that demonstrates my fix: http://jsfiddle.net/natepers/6kmuE/21/

I managed to get it to stop at the last item by resetting the scroll-size to the remaining number of items less than the scroll-size;

Problem is I can’t get it back to the first item.

Here’s the javascript:

var scrollable = $(".scrollable").data("scrollable");
var size = scrollable.getConf().size;

// Catch any requests for items at the end of the list
scrollable.onSeek(function(event, index) {

    var self_size = this.getSize();

    // Last vsisible item
    var last = index + size;

    // How many to the last item
    var difference = self_size - last;

     // How many more than the scroll size
    var remainder = index%size;

    //reset scroll size for each request
    scrollable.getConf().size = size;


    // If next request has items but less than the scroll size
    if ( remainder == 0 && difference < size && difference > 0 ) {

            // Set the scroll size to th enumber of items left
           scrollable.getConf().size = difference;
    }
    //If we're at the end
    if (index++ === self_size - size) {

            // Set disabled style on next button
             $("a.next").addClass("disabled");   
    }
    //If the items are not evenly divided by the scroll size we know we're at the end
    if (remainder != 0) {

            // Set scroll size to the what's left 
            scrollable.getConf().size = remainder;        
    }
});

// Stop scrolling at last item
scrollable.onBeforeSeek(function(event, index) {
  var self_index = this.getIndex();
  var self_size = this.getSize();
  var last = self_index + size;
    //If the last visible item is the last item
  if (last == self_size) {
      // If the next requested item is >= the last item do nothing
      if (index > self_index) { return false; }
  }
});

Thanks for any suggestions or help.