Question

I am using jScrollPane (which is a great plugin) and created several scrollbars in a page.

I also added hover events – fading the scrollbars in and out.

The problem is that I want to hide all scrollbars when the page loads and reveal them only when hovering over them.

So I used

$(document).ready({

$(".jspVerticalBar").hide();

});

which is not working.

Surprisingly, when invoking that line of code in a different context (say inside some event function) it executes successfully.

What am I doing wrong here?

Thanks a lot.

Answer 1

A logical explanation is that jScrollPane waits your images to be loaded before it calculates the element height and so applying it to the scrollbar handler.

So you can try:

$(window).load(function(){
  $(".jspVerticalBar").hide();
});