jscrollpane doesn't display anything

Question

I'm using jscrollpane for customize scrollbars, but it doesn't display anything. I'm in chrome browser. I have this:

$(div).jScrollPane({showArrows: true});

Previously, I include the files:

<script src="/js/jquery-1.4.4.js" type="text/javascript"></script>
<script src="/js/jquery.mousewheel.js"></script>
<script src="/js/jquery.jscrollpane.js"></script>

And after load the website, I can see, with elements inspector:

<div style="overflow: hidden; padding: 0px; width: 500px; position: absolute; background-
color: rgb(100, 25, 100); -webkit-transition: all 5000ms linear; transition: all 5000ms linear; left: 200px; top: 50px; height: 500px; opacity: 1;" draggable="false" id="0">

<div class="jspContainer" style="width: 0px; height: 0px;">
<div class="jspPane" style="top: 0px; left: 0px; width: 0px;">
<img draggable="false" src="http://localhost:8080/TestApps/application/resources/Desert.jpg" id="0.1" style="position: absolute; -webkit-transition: none; transition: none; left: 0px; top: 0px; width: 80px; height: 80px; opacity: 1;">
<img draggable="false" src="http://localhost:8080/TestApps/application/resources/paisaje.jpg" id="0.2" style="position: absolute; -webkit-transition: all 5000ms linear; transition: all 5000ms linear; left: 200px; top: 80px; width: 320px; height: 480px; opacity: 1;">

</div>
</div>
</div>

Anyone can help me,please? thanks in advance

Answer 1

I got it showing in all the browsers, have a look at the sample.

The problem might be including all the necessary scripts between the head tags.

The minimal scripts required for the jScrollpane to function:

    <!-- latest jQuery direct from google's CDN -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- the mousewheel plugin -->
    <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
    <!-- the jScrollPane script -->
    <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

And to show the scrollbar and the arrows on load:

      $(function()
        {
            $('.scroll-pane-split').jScrollPane(
                {       
                    autoReinitialise: true,
                    showArrows: true,
                    verticalArrowPositions: 'split',
                    horizontalArrowPositions: 'split'
                }
            );
        });

HTML:

  <div class="scroll-pane-split">
   <!--- Your Content -->
  </div>

CSS:

  .scroll-pane-split
        {
            width: 100%;
            height: 400px;  /* Got to be set so the jScrollpane can function */
            overflow: auto;
        }

Have a look and see if this helps. And let me know if you need further help.