Question

I asked this over at the jQuery Tools official forum last week, but it’s definitely not as active as stackoverflow, so thought I would ask over here as well.

On our project detail pages, we’re dynamically loading content in that uses a vertical scroller to navigate through. Problem is that the height of the vertical scroller always seems to be one item too tall. I cannot find any way to affect this programmatically.

If I set it circular to true, it seems to have the correct height, but we don’t want it to be continuous/circular.

Example here:
http://www.centerline.net/projects/detail/?p=21

Unminified JS is here:
http://www.centerline.net/lib/js/site-unmin.js

Any ideas?

Here’s the view of what it should look like when scrolled to the last item (down arrow disappears, and does not allow a blank area below the last thumbnail.

Answer 1

The solution above looked like it would have worked, but also found a solution here:

http://www.jasoncarr.com/technology/jquery-tools-scrollable-stop-scrolling-past-the-end

Actual code for my site was as such:

$(function() {
  // Initialize the Scrollable control
  $(".scroll").scrollable({vertical:true, mousewheel:true, keyboard:true });

  // Get the Scrollable control
  var scrollable = jQuery(".scroll").data("scrollable");

  // Set to the number of visible items
  var size = 2;
  // Handle the Scrollable control's onSeek event
  scrollable.onSeek(function(event, index) {

    // Check to see if we're at the end
    if (this.getIndex() >= this.getSize() - size) {

      // Disable the Next link
      jQuery("a.next").addClass("disabled");
    }
  });

  // Handle the Scrollable control's onBeforeSeek event
  scrollable.onBeforeSeek(function(event, index) {

    // Check to see if we're at the end
    if (this.getIndex() >= this.getSize() - size) {

      // Check to see if we're trying to move forward
      if (index > this.getIndex()) {
        // Cancel navigation
        return false;
      }
    }
  });

});