Hi!

I'm using the following two scripts on a page:
- stepcarousel
- JScrollPane

I want the content of a div to be changed with every picture. This is possible with status variables from the carousel.
Code:
...
onslide:function(){
		 if(statusA=='1') {
		 	document.getElementById('right').innerHTML = '<p>It works!</p>';
		 }
		 else if(statusA=='2') {
		 	document.getElementById('right').innerHTML = '<p>You see the text to the 2nd picture</p>';
		 }
                 ...
                 ...
		 else {
		 	document.getElementById('right').innerHTML = '<p>default Text to be applied here!</p>';
		 }
   		}
The <div id="right" class="scroll-pane"> has a JScrollPane applied. Without dynamic change of the content it works perfectly. My problem is that JScrollPane won't re-initialize if the content changes. I tried the following:
Code:
function refreshNav() {
    var pane = jQuery('.scroll-pane').jScrollPane({});		
    var api = pane.data('jsp');
    api.reinitialise();
}
I have added an refreshNav(); in the if statements above where the innerHTML changes.
But the ScrollPane isn't shown. Only one exception: If I refresh the page the time an image with a longer text is shown the JScrollPane is loaded correctly. But if the next image appears and I go back again, there is no JScrollPane at all and the text is cut off.

I also tried the autoReinitialise, which is not so good in performance but I want it to work primary. Sadly without any effect.

What do I need to do to re-initialize JScrollPane if the picture and therefore the text changes?

All the JS code from the page:
HTML Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/stepcarousel.js">
    /***********************************************
    * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/   
    </script>   
    <script type="text/javascript">
    stepcarousel.setup({
        galleryid: 'mygallery', //id of carousel DIV
        beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
        panelclass: 'panel', //class of panel DIVs each holding content
        autostep: {enable:true, moveby:1, pause:6000},
        panelbehavior: {speed:1000, wraparound:true, wrapbehavior:'slide', persist:true},
        defaultbuttons: {enable: false, moveby: 1, leftnav: ['images/1329924344_monotone_arrow_left_small.png', -35, 80], rightnav: ['images/1329924326_monotone_arrow_right.png', -85, 80]},
        statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
        contenttype: ['inline'], //content setting ['inline'] or ['ajax', 'path_to_external_file']
		onslide:function(){
		 if(statusA=='1') {
		 	document.getElementById('right').innerHTML = '<p>It works!</p>';
		 }
		 else if(statusA=='2') {
		 	document.getElementById('right').innerHTML = '<p>You see the text to the 2nd picture</p>';
		 }
		 else if(statusA=='5') {
		 	document.getElementById('right').innerHTML = '<h3>Utah Teapot</h3><p>Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen. Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence.</p><p>Er hat diesen Copyblock weder gestaucht, gezerrt, noch in Versalien oder gar in 6 Punkt Eurostile Outline gesetzt. Er hat ihn ganz einfach lesbar gemacht. Offenbar sogar ziemlich gut, sonst hätten Sie wohl schon einige Zeilen zuvor die Leselust verloren.</p>';
			refreshNav();
		 }
		 else {
		 	document.getElementById('right').innerHTML = '<p>default Text to be applied here!</p>';
		 }
   		}
	
	})
    </script>
    <!--ENDE jQuery + Carousel Gallery --> 
    <!--START jScrollPane Scrollbalken -->
    	<!-- the mousewheel plugin - optional to provide mousewheel support -->
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    	<!-- the jScrollPane script -->
    	<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
        <script type="text/javascript" id="sourcecode">
			jQuery.noConflict();
			jQuery(function()
			{
				jQuery('.scroll-pane').jScrollPane(
					{
					verticalDragMinHeight: 40,
					verticalDragMaxHeight: 40,
					horizontalDragMinWidth: 10,
					horizontalDragMaxWidth: 10,
					contentWidth:220, /*Breite von #right*/
					maintainPosition: false
					}
				);
			});
			function refreshNav() {
	var pane = jQuery('.scroll-pane').jScrollPane({});		
    var api = pane.data('jsp');
    api.reinitialise();
}

		</script>
    <!--ENDE jScrollPane Scrollbalken -->   
Thanks for any suggestions!