$(function()
{
// this initialises the demo scollpanes on the page.
$('#pane1').jScrollPane();
$('#pane2').jScrollPane({showArrows:true});
$('#pane22').jScrollPane({showArrows:true});
$('#pane222').jScrollPane({showArrows:true});
$('#pane3, #pane4').jScrollPane({scrollbarWidth:20, scrollbarMargin:10});

// this allows you to click a link to add content to #pane4 and shows how to 
// reinitialise the scrollbars when you have done this.
$('#add-content').bind(
'click',
function()
{
$('#pane4').append($('<p></p>').html($('#intro').html())).jScrollPane({scrollbarWidth:20, scrollbarMargin:10});
}
);
// and this allows you to click the link to reduce the amount of content in
// #pane4 and reinitialise the scrollbars.
$('#remove-content').bind(
'click',
function()
{
$('#pane4').empty().append($('<p></p>').html($('#intro').html())).jScrollPane({scrollbarWidth:20, scrollbarMargin:10});
}
);
});