jscrollpane not working, probably jquery conflict?

Question

I want to do .jscrollpane scrollbars but they are not showing up, and firebug is not picking up any errors. I'm doing cufon font replacement, a prettyPhoto lightbox, and a simple portfolio filter that sorts ul's. I've looked into jQuery noConflict mode but can't figure out if this is the issue, and if it were, how to use it in my case.

Here's how I'm calling in scripts in the header:

<link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script src="scripts/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
        <script src="scripts/cufon-yui.js" type="text/javascript"></script>
        <script src="scripts/trajan.font.js" type="text/javascript"></script>
        <script type='text/javascript' src="scripts/jscrollpane-1.2.1.js"></script>
        <script type='text/javascript' src="scripts/mousewheel.js"></script>
        <script type='text/javascript' src="scripts/mwheelintent.js"></script>

And then I use $(document).ready(function(){ to run the prettyPhoto, the portfolio filter, and the jscrollpane scripts before the end of the head. The PrettyPhoto and portfolioFilter work, but the jscrollpane doesn't render any changes, but Firebug doesn't detect any errors either.

The jscrollpane is being applied (using class="scroll-pane") to a div id called #box with these attributes:

#box {
width:auto;
height:600px!important;
position:absolute;
margin-top:10px;

I've included the jscrollpane CSS directly from the source, and have the selector class styled like this:

.scroll-pane {
overflow-y:auto!important;
position:relative;
display:block;
}

The issue can be seen live at http:ricardojattan.com/portfolio.html

Answer 1

You need to update to the latest version of jScrollPane.