I am having trouble getting jScrollPane to work. Test environment is XP/Firefox with developer plugins. Here's my code (taken from view source, abbreviated for easier reading) (Links to all JavaScript and styles have been tested OK for my site):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- STUFF LEFT OUT HERE -->
<script type="text/javascript" src="js/MM.js"></script>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<!--<script type="text/javascript" src="js/cycle.lite.min.js"></script>-->
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<script type="text/javascript" src="js/email.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<!-- STUFF LEFT OUT HERE -->
<body onLoad="MM_preloadImages('images/components/srch-btn-sw.gif')">
<!-- STUFF LEFT OUT HERE -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript">
$(function()
{
$("#pane1").jScrollPane({showArrows:true, scrollbarWidth:20, scrollbarMargin:10});
});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="styles/jScrollPane.css" />
<!-- STUFF LEFT OUT HERE -->
<div id="caty-t1">
<div id="bdy1">
<div id="pane1" class="scroll-pane">
<ul>
<li><a href="index.php?p=line&id=638">Split pins</a></li>
<li><a href="index.php?p=line&id=639">Rubber O rings</a></li>
<li><a href="index.php?p=line&id=640">Spring & internal star washers</a></li>
<li><a href="index.php?p=line&id=641">Aluminium blind rivets</a></li>
<li><a href="index.php?p=line&id=642">Flat steel washers</a></li>
<li><a href="index.php?p=line&id=643">Phillips head self tappers</a></li>
<li><a href="index.php?p=line&id=644">Phillips head screws</a></li>
<li><a href="index.php?p=line&id=645">Nylon self lock nuts</a></li>
<li><a href="index.php?p=line&id=646">Hexagon nuts</a></li>
<li><a href="index.php?p=line&id=647">Hexagon bolts</a></li>
<li><a href="index.php?p=line&id=648">Particle board screws</a></li>
<li><a href="index.php?p=line&id=649">Plasterboard screws</a></li>
<li><a href="index.php?p=line&id=650">Self drilling metal screws</a></li>
<li><a href="index.php?p=line&id=651">Auto fuses</a></li>
<li><a href="index.php?p=line&id=652">Treated pine screws</a></li>
<li><a href="index.php?p=line&id=653">Chipboard screws</a></li>
<li><a href="index.php?p=line&id=654">Wall anchor fittings</a></li>
<li><a href="index.php?p=line&id=655">Machine screws & hexagon nuts</a></li>
<li><a href="index.php?p=line&id=656">Socket head cap screws</a></li>
<li><a href="index.php?p=line&id=657">Self drilling metal screws</a></li>
<li><a href="index.php?p=line&id=658">U-clip & phillips head screws</a></li>
<li><a href="index.php?p=line&id=659">Clevis pins</a></li>
<li><a href="index.php?p=line&id=660">R-clips</a></li>
<li><a href="index.php?p=line&id=661">Hi-tensile bolt & nuts</a></li>
<li><a href="index.php?p=line&id=662">Internal & external circlips</a></li>
<li><a href="index.php?p=line&id=663">Grease nipples</a></li>
<li><a href="index.php?p=line&id=664">Roll pins</a></li>
<li><a href="index.php?p=line&id=665">Hexagon flange nuts</a></li>
<li><a href="index.php?p=line&id=666">Screwdriver bits</a></li>
<li><a href="index.php?p=line&id=667">Wiring grommets</a></li>
<li><a href="index.php?p=line&id=668">Blanking grommets</a></li>
<li><a href="index.php?p=line&id=669">Electical crimp terminals</a></li>
<li><a href="index.php?p=line&id=670">Trade pack handystand</a></li>
</ul>
</div><!--END pane1-->
</div><!--END bdy1-->
Here is my CSS for the relevant element:
#pane1 {
height:378px;
overflow:auto;
}
That's the end of the static source. Here is the generated source from developer tools (unchanged stuff left out):
<div id="caty-t1">
<div id="bdy1">
<div tabindex="0" style="height: 378px; width: 201px;" class="jScrollPaneContainer"><div style="padding: 0px; overflow: hidden; height: 378px; width: 201px;" id="pane1" class="scroll-pane">
<ul>
<li><a href="index.php?p=line&id=638">Split pins</a></li>
<li><a href="index.php?p=line&id=639">Rubber O rings</a></li>
<li><a href="index.php?p=line&id=640">Spring & internal star washers</a></li>
<li><a href="index.php?p=line&id=641">Aluminium blind rivets</a></li>
<li><a href="index.php?p=line&id=642">Flat steel washers</a></li>
<li><a href="index.php?p=line&id=643">Phillips head self tappers</a></li>
<li><a href="index.php?p=line&id=644">Phillips head screws</a></li>
<li><a href="index.php?p=line&id=645">Nylon self lock nuts</a></li>
<li><a href="index.php?p=line&id=646">Hexagon nuts</a></li>
<li><a href="index.php?p=line&id=647">Hexagon bolts</a></li>
<li><a href="index.php?p=line&id=648">Particle board screws</a></li>
<li><a href="index.php?p=line&id=649">Plasterboard screws</a></li>
<li><a href="index.php?p=line&id=650">Self drilling metal screws</a></li>
<li><a href="index.php?p=line&id=651">Auto fuses</a></li>
<li><a href="index.php?p=line&id=652">Treated pine screws</a></li>
<li><a href="index.php?p=line&id=653">Chipboard screws</a></li>
<li><a href="index.php?p=line&id=654">Wall anchor fittings</a></li>
<li><a href="index.php?p=line&id=655">Machine screws & hexagon nuts</a></li>
<li><a href="index.php?p=line&id=656">Socket head cap screws</a></li>
<li><a href="index.php?p=line&id=657">Self drilling metal screws</a></li>
<li><a href="index.php?p=line&id=658">U-clip & phillips head screws</a></li>
<li><a href="index.php?p=line&id=659">Clevis pins</a></li>
<li><a href="index.php?p=line&id=660">R-clips</a></li>
<li><a href="index.php?p=line&id=661">Hi-tensile bolt & nuts</a></li>
<li><a href="index.php?p=line&id=662">Internal & external circlips</a></li>
<li><a href="index.php?p=line&id=663">Grease nipples</a></li>
<li><a href="index.php?p=line&id=664">Roll pins</a></li>
<li><a href="index.php?p=line&id=665">Hexagon flange nuts</a></li>
<li><a href="index.php?p=line&id=666">Screwdriver bits</a></li>
<li><a href="index.php?p=line&id=667">Wiring grommets</a></li>
<li><a href="index.php?p=line&id=668">Blanking grommets</a></li>
<li><a href="index.php?p=line&id=669">Electical crimp terminals</a></li>
<li><a href="index.php?p=line&id=670">Trade pack handystand</a></li>
</ul>
</div><!--END pane1-->
</div><!--END bdy1-->
Compared to online examples, what seems to be missing is the class "jScrollPaneScrollable" and in the next div, the in-line style overflow is "hidden" where it should be "visible".
Sorry, site is not online anywhere to show, but it simply looks like the styles say, the overflow is hidden and no scroll bars appear.
Can anyone suggest what is going wrong here, please?
Yerfdoggy