WordPress and jScrollPane

Some notes for getting WordPress and jScrollPane working.

I wasn’t interested in the plugin because it is out of date and seems to carry a log of baggage.

These links were helpful:

http://jscrollpane.kelvinluck.com/

http://jscrollpane.kelvinluck.com/dynamic_width.html

http://matthewruddy.com/using-jquery-with-wordpress/

My code in an add_action function to wp_head:

<?php
add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
    wp_enqueue_script( 'jquery' );
    }
?>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="wp-content/themes/some path.../jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="wp-content/themes/some path.../jquery.jscrollpane.min.js"></script>

<script type="text/javascript" src="wp-content/themes/some path.../resize.js"></script>

<script type="text/javascript" id="sourcecode">
    jQuery(document).ready(function($) {
        // Code here will be executed on document ready. Use $ as normal.
        $('.scroll-pane').jScrollPane({mouseWheelSpeed: 30});
        });
</script>

I had to set the mouse wheel speed; it was way too slow, default is 3.

resize.js didn’t work without modification.

(function($) {
// added outer stuff to get resize working with js wordpress way 2013-05-13
$(function()
{
    $('.scroll-pane').each(
        function()
        {
            $(this).jScrollPane(
                {
                    showArrows: $(this).is('.arrow')
                }
            );
            var api = $(this).data('jsp');
            var throttleTimeout;
            $(window).bind(
                'resize load', //added load 2013-04-30 so the images would fit on android
                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();
                    }
                }
            );
        }
    )

});
})(jQuery);

The containing anonymous function was needed to get this working with WordPress. I added load because this prevents panes with photos loaded from a third party site from being incorrectly rendered. Without it the space they take up is not accounted for.