Hi people of WD, first of all thanks in advance for any help.

I upload a test page so you can easily see the problem I'm having: http://granjalaaurora.com/test/test-jscrollpane.html

The thing is I'm trying to make jscrollpane* to load inside the about section (and in the other sections as well), I believe I have to reinitialize it after each .fadeIn(); in the site.js sript but I've tried several times with no success.

* http://jscrollpane.kelvinluck.com/#examples

As you can see in the test page jscrollpane is working right outside, but inside the about section It isn't.

This is the script (site.js) that i'm using for the menu:

PHP Code:
$(document).ready(function() {

// load all links in a new window
$('p a').each(function(){
    $(
this).attr('target','_blank');
});

// the currently loaded section
var curLoaded 'about';

// start by showing the about us section
$('#contentContainer').animate({
    
height350
},"slow", function(){
    
// fade in the content
    
$('#' curLoaded).fadeIn();
});

// navigation trigger
$('#navbar a').each(function() {
    var 
$this = $(this)
    var 
target $this.attr('href').split('#')[1];
    var 
$contentContainer = $('#contentContainer');
    var 
oldPos 60;
    var 
newPos 350;

    
// add a click handler to each A tag
    
$this.click(function(){
        
// if the container isn't open, then open it...duh!
        
if ($contentContainer.css('height') == '60px') {
            
// trigger the animation
            
$contentContainer.animate({
                
heightnewPos
            
},"slow", function(){
                
// fade in the content
                
$('#' target).fadeIn();
            });
        } else {
            if (
curLoaded == target) {
                
$contentContainer.animate({
                    
heightoldPos
                
},"slow", function(){
                    $(
'#content div').hide();
                });
            } else {
                
$contentContainer.animate({
                    
heightoldPos
                
},"slow", function(){
                    $(
'#content div').hide();
                    
$contentContainer.animate({
                        
heightnewPos
                    
},"slow", function(){
                        $(
'#' target).fadeIn();
                    });
                });
            }
        }

        
curLoaded target;

        return 
false;
    });

});

// remove the focus lines
$('a').focus( function() { $(this).blur(); } );

}); 
Oh one more thing I'm using a <h2> tag to load the jscrollpane inside the about section for a reason It's not a mistake. I can't use divs inside the content menu because all divs are hidden because of this: $('#content div').hide();

Also I'm using two versions of jquery because the "site.js" script doesn't work with any other jquery version, but I'm using no-conflict and I also checked if there was any conflict


Any help will be apreciated, thanks. Oh one more thing, I'm using a h2 tag to load the scrollpane for a reason It's not a mistake. I can't use divs inside the menu.