JScrollPane not working properly with hidden content

Question

I installed jScrollPane on my website and can't make it work.

My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:

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

Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.

I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.

Can anyone help me?

Thanks

EDIT:

I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).

Update:

I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).

Answer 1

Check this demo provided by the developer of the plugin

http://jscrollpane.kelvinluck.com/examples/invisibles.html

When the element is first shown you simply have to (re)initialise the scrollpane (or you could even use autoReinitialise if you like) and its width and height will be calculated correctly.

All that you need is

$(function(){
    $('.scroll-pane').jScrollPane({autoReinitialise: true});
});

and may be the recent version of the plugin

Answer 2

I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.

If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.

var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
    wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
    wrapper.slideDown(1000);
} else {
    wrapper.slideUp(1000);
}