Horizontal Javascript SrollPane

1. Unzip horizontal--javascript-srollpane.3.0.zip

2. Open scrollpaneh.html and see example.

3. Usage:

Include the following files in the head of your page:

jQuery (I'm using 1.5.2 here) the mouse wheel plugin (if you want mouse wheel support) the jQEm plugin (if you want your scroll panes to automagically resize when the user changes text size) jScrollPaneH.js jScrollPaneH.css

<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="scripts/jquery.em.js"></script>
<script type="text/javascript" src="scripts/jScrollPaneH.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPaneH.css" />

Then you can use any query selector to select the elements you would like to apply jScrollPane and then initialize it. The following code runs when the document is ready and finds any element with a class of "scroll-pane" and then calls jScrollPane on them.

$(function()
{
    $('.scroll-pane').jScrollPaneH();
});

You can pass some optional parameters to the jScrollPane function. These take the form of an object with the following attributes:

// Height of the created scrollbar in pixels (defaults to 10)
scrollbarHeight [int]

// Margin to leave to the left of the scrollbar in pixels (defaults to 5)
scrollbarMargin [int]

// Scroll speed in pixels per wheel step (defaults to 18)
wheelSpeed [int]

// Show arrow navigation (defaults to false)
showArrows [boolean] 

// Height of the arrow navigation if showArrows=true (calculated from CSS if not provided)
arrowSize [int]

// Animate when calling scrollTo and scrollBy (defaults to false)
animateTo [boolean] 

// Drag bar minimum height (defaults to 0)
dragMinHeight [int] 

// Drag bar maximum height (defaults to 99999!)
dragMaxHeight [int] 

// Animation update interval in milliseconds (default 100)
animateInterval [int] 

// Number of steps to run animation through (default 3)
animateStep [int]

// Maintain position when content is changed (default true)
maintainPosition [boolean] 

// Scrollbar appears on top of the content (CSS should also reflects this)
scrollbarOnTop [boolean] 

// Automatically re-initialise  when any contained images are loaded (defaults to false)
reinitialiseOnImageLoad [boolean]