Anyone have any luck getting JScrollPane to work with JQuery?
I'm following the instructions to the letter and all that happens is that when the page loads, the call just hides the browser's scroll bar but doesn't render the custom scroll bar.
Files included in test HTML page:
http://70.85.188.226/_assets/css/jscrollpane.css
http://70.85.188.226/_assets/js/jquery-1.2.3.min.js
http://70.85.188.226/_assets/js/jscrollpane.js
HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="/_assets/css/jscrollpane.css" media="screen,projection,print" />
<script type="text/javascript" src="/_assets/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/_assets/js/jscrollpane.js"></script>
<style type="text/css">
#test
{
width:400px;
height:300px;
overflow:auto;
background-color:#2b2b2b;
color:#ffffff;
}
</style>
<script type="text/javascript">
$(function()
{
$('#test').jScrollPane();
});
</script>
</head>
<body>
<div id="test">
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST</div>
<div style="clear:both;"></div>
<div style="height:36px;">TEST12</div>
<div style="clear:both;"></div>
</div>
</body>
</html>