Jquery – jScrollPane Scrollbar Problem

jqueryjquery-pluginsjscrollpanescrollbarWordpress

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!

Best Answer

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.

Related Topic