Jquery Tools Scrollable: Make it stop at last item

Question

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.

Answer 1

I know it's a bit old question. I came across this situation and the link suggested above did not help in my case. The solution described in the link above works well in case of fixed number of items displayed.

But what if the number of items displayed can vary? My task involved showing bunch of scrollable links that would scroll one link at a time. Invariably, the text of links would vary in length. I had no ways of knowing how many items will be displayed at one point.

Here is the plug-in solution I came up with:

    $.fn.restrictScroll = function () {

    var api = $(this).data("scrollable");
    var container = this;

    Init();

    // Initialization method.
    function Init() {
        // Subscribe to events we are interested in.
        api.onBeforeSeek(function (event, index) {
            return isScrollable(index);
        });
        api.onSeek(function (event, index) {
            changeNavButtonState(index);
        });
        $(window).resize(function () {
            var index = api.getIndex();
            changeNavButtonState(index);
        });

        // set up initial state of the nav button
        var index = api.getIndex();
        changeNavButtonState(index);
    }

    function changeNavButtonState(index) {
        var conf = api.getConf();
        $(conf.next).toggleClass(conf.disabledClass, !isScrollable(index));
    }

    function isScrollable(index) {

        var answer = false;
        var currentIndex = api.getIndex();

        if (index < currentIndex) { // if navigating back, always allow scroll.
            answer = true;
        }
        else {
            var items = api.getItems();
            var itemsWidth = 0;

            for (var i = currentIndex; i < items.length; i++) {
                itemsWidth += $(items[i]).width();
            }

            answer = itemsWidth > $(container).width();
        }

        return answer;
    }
}

And here is how to use this plug-in:

$("#scrollable").scrollable().restrictScroll();

Sample HTML:

    <div class="slidingTabs">
    <!-- "previous page" action -->
    <a class="prev browse left"></a>

    <div class="scrollable" id="scrollable">

        <!-- root element for the items -->
        <div class="items"">
            <div><a href="#">1 | Some small text</a></div>
            <div><a href="#">2 | Some long tab name</a></div>
            <div><a href="#">3 | Three is a crowd</a></div>
            <div><a href="#">4 | quick brown fox jumps</a></div>
            <div><a href="#">5 | Bollywood music is awesome</a></div>
            <div><a href="#">6 | Nicky Minaz is weird looking</a></div>
            <div><a href="#">7 | Tab number 7</a></div>
            <div><a href="#">8 | Tab number 8</a></div>
            <div><a href="#">9 | This one has real long name</a></div>
        </div>
    </div>

    <!-- "next page" action -->
    <a class="next browse right"></a>
</div>

Answer 2

I was looking for something else when I came upon this question, and I realize this is a bit late, but I had a similar problem a few months ago, and found this answer by René Schubert. The proposed solution worked very well for me:

jQuery Tools Scrollable: 3 Items on screen but scroll one at a time

Cheers

Answer 3

I recently had this same problem. The solution in this blog post below seems to work well for me in jQuery Tools 1.2.6

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