jQuery custom content scroller not display when div have parameter hide

Question

I have jQuery custom content scroller on my website inside of a div. The div content has the parameter ("#content").hide(). The div is visible when the page loads and the jQuery custom content scroller works perfectly.

But if the div content is not visible when the page loads, the jQuery custom content scroller is not visible and does not work. I noticed that when you shrink or enlarge the window, the scroller displays. I have small example on this URL: http://www.frantatoulen.wz.cz/

Where might the problem be?

Answer 1

The problem is that when #content is hidden, the plugin script cannot calculate content length (hidden element has zero dimensions). Because of that, the script assumes that content does not need a scrollbar.

Solution A:

You need to call the update method of the plugin after your content toggles and becomes visible (plugin homepage has info and examples on using methods and parameters). Inside your click function, add the following at the end:

$("#tlacitko").click(function(){
    $("#content").toggle();
    $("#content").mCustomScrollbar("update");
});

Note: The scrollbar does work when you resize the browser because it auto-calls the update method on window resize event.

Solution B:

You can simply set the updateOnContentResize option parameter to true. This auto-calls the update method each time your content length changes:

$("#content").mCustomScrollbar({
    advanced:{
        updateOnContentResize:true
    }
});