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).

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).

• javascript
• jscrollpane
• jquery-jscrollpane

• If scrollbar doesn't appear when you show the hidden content, you won't be able to scroll. The problem must e from the HTML. Do your HTML elements have a "position" or a "float" that make them out of the HTML flow ? – dievardump Commented Jan 28, 2012 at 11:13
• No not really, they are alle position: relative in my CSS, relative to the main wrapper. It's very strange, if it doesn't scroll because the scrollbar is not appearing maybe is some sort of CSS issue. I'll give a check to the CSS file (the one I imported + the one I already had). – Masiar Commented Jan 28, 2012 at 11:18

2 Answers 2

Check this demo provided by the developer of the plugin

http://jscrollpane.kelvinluck./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

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);
}