jScrollPane resize

Question

I have a div which has 100% width of the window, which is a container for the jScrollPane div.

When the window resizes, the scroll pane does not move. Is there any way to make jScrollPane resize with the window?

Thanks!

Answer 1

You can use the API call reinitialise() to do this. It is covered in one of the example pages here. http://jscrollpane.kelvinluck.com/dynamic_height.html
http://jscrollpane.kelvinluck.com/dynamic_width.html

$(function()
{
$('.scroll-pane').each(
    function()
    {
        $(this).jScrollPane(
            {
                showArrows: $(this).is('.arrow')
            }
        );
        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();
                }
            }
        );
    }
)

});

Answer 2

I prefer something like this:

$(window).resize(function(){
    $.each( $('.scrollcont'), function(){
            var api = $(this).data('jsp');
            api.reinitialise();
    });
});

Where '.scrollcont' is the scroll container.

This script is usefull also if u have to resize the size of the scroll container during the action.