Hi all,

I'm relatively new to javaScript and the Jquery library, I'm trying to add some functionality to a site that's notreally working for me.

The page that's giving me the most trouble is: http://thirdworldcanada.ca/about.php#. If I click the different list items, the scroll bar does not adjust to the height of the div with the content. The content is being loaded with JQuery load(). So there is a situation where the user can't view all the content without clicking the associated list item twice to allow the scrollbar to resize, is there an elegant solution to this problem?

Here's my somewhat inelegant attempt:

// Reinitialize JScrollpane

reinitialiseScrollPane = function()
{
$('#film').jScrollPane();
}


// Loads the content for the About Page

$("#film").load('ajax/aboutContent.php #about','', reinitialiseScrollPane).hide().fadeIn('slow').jScrollPane();


$('.film').bind('click', function() {
$('#film').load('ajax/aboutContent.php #about','', reinitialiseScrollPane).fadeIn('slow').jScrollPane();
});


$('.filmmaker').bind('click', function() {
$('#film').load('ajax/aboutContent.php #filmmaker','', reinitialiseScrollPane).fadeIn('slow').jScrollPane();
});


$('.contact').bind('click', function() {
$('#film').load('ajax/aboutContent.php #contact','', reinitialiseScrollPane).hide().fadeIn('slow').jScrollPane();
});

An easier way of doing this would be great too!