First of all, I have looked for some time and could not locate an answer which has labored for me personally.

I am creating a website for any client. I'm using jScrollPane jQuery wordpress plugin but it is not showing. I had been in the beginning concerned that maybe another jQuery Plug ins were effecting it, however when I apply the .scroll-pane class to something it stretches the peak from the div to exhibit all of the content without scrollbars. I'm not sure, it might have something related to it, I can not tell. I can not show the website when i sign non-disclosure contracts with all of my clients, however i can display the appropriate code.

Fundamental essentials script links during my header:

<link rel="stylesheet" href="css/global.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/supersized.3.1.3.min.js"></script> 
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>

This is actually the relevant HTML using the nested DIVs:

<!--INFO TAB-->

<div id="infocontainer"> 
    <div id="infobox"> 
    </div>
    <div id="infomenu"> 
    </div>
    <div id="inforule"> 
    </div>
    <div id="infocontent" class="scroll-pane">
        TEXTTEXTT EXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTT EXTTEXTTEXTT EXTTEXT TEXTTEXTTEXTTEXTT EXTTEXTT EXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTTEX TTEXTTEXTTEXTTEXTTEXTTEXTTE XTTE XTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    </div>
</div>

This is actually the script that calls the function right before the finish from the body:

<script>
$(function()
{
    $('.scroll-pane').jScrollPane();
});
</script>

Relevant CSS:

#infocontainer {

    position:absolute;
    top:30px;
    left:350px;
    height:385px;
    width:625px;
    z-index:1;

}

#infobox {
    background-color:#f4f4f4;
    position:absolute;
    height:100%;
    width:100%;
    z-index:-1;

}

#infomenu {

    padding-top:44px;
    padding-left:49px;
    text-align:left;
    z-index:1;

}

#inforule {

    margin-left:239px;
    margin-top:-175px;
    z-index:5;

}

#infocontent {

    line-height:18px;
    margin-left:290px;
    margin-top:-287px;
    height:284px;
    overflow:auto;
    width:270px;
    text-align:left;
    z-index:1;

}

The DIVs opacity is initially and more custom javascript I authored brings these to 100% once the page loads. I'm also while using Supersize jQuery that creates full screen fit background images.

I've no clue why it's really no working, I have attempted turning other javascript and jQuery use served by just the jScrollPane on also it still does't work much better or worse. Any help could be greatly appreciated.

Enclose this content from the Div within the

tag like

<p>
TEXTTEXTT EXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTT EXTTEXTTEXTT EXTTEXT TEXTTEXTTEXTTEXTT EXTTEXTT EXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTTEX TTEXTTEXTTEXTTEXTTEXTTEXTTE XTTE XTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
</p>

for kicks, attempt to revert your jquery to some previous version, like 1.5.2. look at this: code.google.com/p/jscrollpane/issues/detail?id=207#c2 – julie p