Search code examples
jqueryhtmlcssjscrollpane

Trying to get JScrollPane to work with div element

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>
Solution

  • It might be because you're missing the required class declaration for your test div.

    To apply jScrollPane you have to set the class for the test div to "scroll-pane".