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

Pirog

If scrollbar doesn't appear when you show the hidden content, you won't be able to scroll. The problem must come from the HTML. Do your HTML elements have a "position" or a "float" that make them out of the HTML flow ? – International

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

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

Minatory

Thanks, I actually used that piece of code later, but then I discovered some other bug. Anyway thanks, that should have done the work :). – Pirog

It's work if .scroll-pane block has height. What if this block has only max-height ? – Cerography

@Bohdan I do not think that it might be a problem, as height and width, typically, calculated based on an actual dimensions of the parent element. Can you show me an example? – Minatory

@Minatory Here is examples with minicart in internet shop: exempl 1 - minicart without jsp; exempl 2 - minicart with jsp initialized when minicart is hiden; example 3 - minicart with jsp initialized when minicart is opened. First time open - OK. Second time open - Fail:(. – Cerography

@Minatory example 4 - Same as example 3, but with latest jScrollPane css and script. – Cerography

@Bohdan The problem is related to the slideUp effect as the height of the .jspContainer is set to 0px after cart disappears. If you create a new instance of jsp on hover, it works. Так что, вот пример ) jsfiddle.net/pqYs2/5 – Minatory

@Minatory So the problem of my example 4 is parameter autoReinitialise: true. Дякую! Дійсно працює:) – Cerography

Beautiful, wish I'd checked Stackoverflow before wasting 2 hours on this earlier... – Disenthrall

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

Lupus