cannot get jscrollpane api for dynamic size to work

Question

I have been experimenting with jscrollpane to add custom scrollbars to some content. The data is being pulled in via ajax and the jscrollpane api works nicely for that.

But I'm trying to make the scrollpane have a height that is always, say, 70% of the height of the users browser window. The jscrollpane site says that I can use the following code to make it work, but i'm having no luck.

$(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();
            }
        });
    })

});

When I change the css to a percentage, the custom scrollbar fails entirely, and I get a default chrome scrollbar that is 100% of the height of the window.

http://jsfiddle.net/loren_hibbard/2yEsG/

Thank you very much!

Answer 1

It appears that there is some compatibility problem with the api for resize and jsfiddle. jscrollpane continues to be an amazing extension. thanks.