jScrollPane Scrollbar Problem

Question

I am working on a site using Wordpress as a CMS, and I wanted to use a custom scroll bar inside a div on my website. I've been trying to use the jScrollPane plugin, but I'm having trouble getting it to work.

the main code is in my header.php file, and there is a class .scroll-pane the relevant code in header.php is:

 <style type="text/css" id="page-css"> 
            .scroll-pane
                {
                    width: 100%;
                    height: 280px;
                    overflow: auto;
                }
        </style>
    <script src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>
    <link type="text/css" href="<?php bloginfo(template_url); ?>/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="<?php bloginfo(template_url); ?>/js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="<?php bloginfo(template_url); ?>/js/jquery.jscrollpane.min.js"></script>

        <script type="text/javascript"> 
            var $j = jQuery.noConflict();
            $j(document).ready(function()
            {   
                $('.scroll-pane').jScrollPane({showArrows: true});
            });
        </script> 

page.php:

< div id="sign-right">

< div class="newsBox-padding">

< div class="scroll-pane newsBox"> WP loop goes here </div></div>


CSS:
.newsBox{height:280px; overflow: auto;}

I get the following error (caught with firebug):

" $(".scroll-pane").jScrollPane is not a function
$('.scroll-pane').jScrollPane({showArrows: true}); "

I think the problem is in the function so I've tried a bunch of suggestions from various posts and forums including:

$function(){ jQuery('.scroll-pane').jScrollPane({showArrows: true});

$function(){ $('.scroll-pane').jScrollPane({showArrows: true}); });

I've checked all of my references to external files and made sure classes were named the same, they all seem to be right. And I've had a code savvy friend look at it too, to no avail.

I really appreciate your help!

Answer 1

I dont see that you include the latest jQuery, try adding it. To add the latest jQuery using google host:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />

And try using Chrome Developers Tools then Resources Tab, then you'll see which JS files the web actually loads.

you can see a nice post at my blog about those scroll bars: jQuery Scrollbars

Also like @kingjiv said, you use Conflict then '$'. Try removing he Conflict and only use:

<script type="text/javascript"> $(function () {
  $('.scroll-pane').jScrollPane();
 });
<script> 

If it still doesn't work, the jScrollPane prolly loads before the jQuery does. To fix this try those methods:

First moving you'r

<script type="text/javascript"> $(function () {
  $('.scroll-pane').jScrollPane();
 });
<script> 

To the end after the </body> Closing tag.

If still doesn't work try using When document ready

<script type="text/javascript">
    $(document).ready(function () {
        $('.scroll-pane').jScrollPane();
    });
<script>

It must work :)

Answer 2

I am tired of problems with this plugin. I worked for one day to get it to run. I found out, that it needs the:

http://code.jquery.com/jquery-migrate-1.2.0.min.js

... file, to run normally. So it is an old plugin and the support is not very good.

I have a very simple solution for my problem :) :

div.scrollBar {
  width: 200px;
  height: 200px;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

and

<div class="scrollBar">
<h3>Smooth</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

Here is the working example: http://jsfiddle.net/ghdcmsxx/

That´s great :D . And it´s even optimized for touch. Wow. No jquery, only litte css and html. I love it.

Answer 3

I had the same problem and it took me ages to work it out. I just couldn't find any solution.

Then I came across this plugin for Wordpress named: WP jScrollPane.
I downloaded and installed it. Followed the instructions and the custom scrollbar appeared.

So for me that was actually a very simple solution. I was so into that script, that I totally forgot that Wordpress has its own plugins as well.

Anyway, I don't know if this is useful for you, but it helped me a lot.

Answer 4

Maybe I'm missing something here, never used jscrollpane, but I don't see you including jquery itself. Also you call noconflict and then still use $ in your function.

Answer 5

I've had this problem because I was loading twice jquery.

Scrollpane does indeed work well when used in:

$(document).ready(function () {
    $('.scroll-pane').jScrollPane();
 });

Also don't forget to specify width and height in the div you're applying; ie.

<div class="scroll-pane" style="width: 200px; height: 100px;"></div>