Resizing Drag Handle in jScrollPane

Question

I'm implementing a horizontal image slider using jScrollPane, and am trying to set a minimum width of 63 for the drag handle (.jspDrag) using the horizontalDragMinWidth setting.

Unfortunately it's just not working and I have no idea why. I'd really appreciate some help.

The problem is viewable at http://tmcdomains.com/jScrollPane/static.html.

The following script is in my footer, just above the tag:

<script type="text/javascript">
$(function () {
$("img").wrap('<div class="item" />');
var $conveyor = $("#conveyor");
var $item = $(".item", $conveyor);
var $viewer = $("#viewer");
var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp");

var imagesWidth = 0;
$($item).each(function (index, image) {
    var $image = $(image);
    imagesWidth += $image.outerWidth() + parseInt($item.css("margin-right"), 10);
});
$($conveyor).width(imagesWidth);

function scrollByItem(direction) {
    var xPos = api.getContentPositionX();
    var viewerHalfWidth = $viewer.width() / 2;
    var pixels = 0;
    $($item).each(function (i) {
        pixels += $(this).outerWidth(true);
        if (pixels >= (xPos + viewerHalfWidth)) {
            if (direction == "right" && $item[i + 1]) {
                api.scrollToX(($($item[i + 1]).outerWidth(true) / 2) + pixels - viewerHalfWidth, true);
            } else {
                if (direction == "left" && $item[i - 1]) {
                    api.scrollToX(pixels - $(this).outerWidth(true) - viewerHalfWidth - ($($item[i - 1]).outerWidth(true) / 2), true);
                }
            }
            return false;
        }
    });
    return false;
}
$("#prev").click(function () {
    scrollByItem("left");
});
$("#next").click(function () {
    scrollByItem("right");
});

$viewer.each(
    function()
    {
        $(this).jScrollPane();
        var api = $(this).data('jsp');
        var throttleTimeout;
        $(window).bind(
            'resize',
            function()
            {
                if ($.browser.msie) {
                    // IE fires multiple resize events while you are dragging the browser window which
                    // causes it to crash if you try to update the scrollpane on every one. So we need
                    // to throttle it to fire a maximum of once every 50 milliseconds...
                    if (!throttleTimeout) {
                        throttleTimeout = setTimeout(
                            function()
                            {
                                api.reinitialise();
                                throttleTimeout = null;
                            },
                            50
                        );
                    }
                } else {
                    api.reinitialise();
                }
            }
        );
    }
);    

});
</script>

Answer 1

I dont quite understand why you are initializing jScrollPane twice:

first time:

var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp"); 

second time:

$(this).jScrollPane(); 

But after I debugged it. jScrollPane did get initialized twice (line 448 to line 453 of jScrollPane.js run twice). At the second time, when it is initialized, no horizontalDragMinWidth has been specified as a part of settings, so horizontalDragMinWidth is 0 by default. My hunch is that this is the problem.