JScrollpane will not style scrollbar

Question

I have a div that I need to be able to scroll. Unfortunately the default browsers are very ugly, an ordeal I am trying to use JScrollpane to get around.

It doesn't seem to cooperate with me however: I have added the necessary links, along with JQuery ofcourse

<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />

Which are corresponding to my file structure, and have called the script using

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider(); 
        $('.work-description').jScrollPane();
    });
  </script>

My div also seems to be in place:

<div class="workdescription" id="Plumbing">
                    <div id="shop">
                    <div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
                        <p><button class="add-to-cart" type="button">Add</button></p>
                        <p class="itemPrice">This is about the longest sentence you'll get</p>
                    </div>


            </div>   

With a CSS value of overflow:auto;

I've also tried overflow:hidden; but that hasn't worked either. I am still stuck with the ugly scrollbars. I've received no JScript errors. What's up with this?

Answer 1

I've used jScrollPane before and you basically need a container, a paragraph which will be used as a wrapper, and then a call to jScrollPane which you also need to reinitialize if the container that will have a scrollbar is from an ajax response.

Based from your code I'll assume that your html look something like this:

<div class="workdescription" id="Plumbing">
<p>
                    <div id="shop">
                    <div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
                        <p><button class="add-to-cart" type="button">Add</button></p>
                        <p class="itemPrice">This is about the longest sentence you'll get</p>
                    </div>
                    </div>
</p>
</div> 

Then your selector, just include the script after the html so you won't need to wrap your script on window.load().

<script>
$('.workdescription').jScrollPane({autoReinitialise: true});
</script>

Answer 2

The class name is "workdescription" in you HTML, but you used ".work-description" as your selector. It seems that's the problem ;)