Hello, I have a jQuery scrollbar in a static html page. The code works fine when it is standalone, but when placed inside a div in my webpage, it doesnt work properly.
When you go to click and drag the scrollbar it doesn't select the scrollbar and it doesn't even let you drag and scroll. However, the up and down arrows allow you to scroll. Occasionally after multiple clicks it will allow you to drag the scroll bar.
Any ideas!?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jScrollPane example skins (operating system style scrollbars)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function()
{
// this initialises the demo scollpanes on the page.
$('#pane1').jScrollPane({showArrows:true, scrollbarWidth: 17});
$('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
$('#pane3').jScrollPane();
+ $('#pane4').jScrollPane({scrollbarOnLeft:true});
});
</script>
<script src="/mint/?js" type="text/javascript"></script>
</head>
<body>
<h3>#pane5 (normal OS provided)</h3>
<div id="pane4" class="scroll-pane">
<p>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimecelerisque. Vestibulum tellus dolor, porta quis, facilisis nec, convallis vitae, quam. Quisque nisi. Nunc vitae nulla vel turpis mollis molestie. Etiam vitae massa.<</p>
</div>
</div>
</body>
</html>
#pane1, #pane2, #pane3, #pane4 {
height:200px;
}
jScrollPane.css (line 67)
.scroll-pane {
background-color:#FFFFFF;
float:left;
height:538px;
left:0;
overflow:auto;
padding-left:2px;
position:absolute;
top:0;
width:635px;
}
stylesheet.css (line 181)
html, div, map, dt, isindex, form {
display:block;
}