I populate the DIV with an AJAX script and then call the scrolldiv_initScroll function but the scroll bar always seems to scroll the page the wrong way.
see
scrollable.js is unchanged except name of scrollable DIV
ASP Source code:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="simple.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
p{
margin-top:0px;
}
#dhtmlgoodies_scrolldiv{
/* The total width of the scrolling div including scrollbar */
width:760px;
height:500px; /* The height of the scrolling div */
z-index:11;background: #E9DFE6 ; border-left: solid; border-top: solid; border-right: solid;
}
#scrolldiv_parentContainer{
width:730px; /* Width of the scrolling text */
height:100%;
overflow: hidden;
border: 1px solid #BC8FBD;
float:left;
position:relative;
}
/*
CSS for the scrolling content
*/
#dvMAT{
padding: 5px;
position:relative;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size: 0.9em;
line-height:130%;
color: #333;
}
/*
The scrollbar slider
*/
#scrolldiv_slider{
width:15px;
margin-left:2px;
height:500px;
float:left;
}
/*
The scrollbar (The bar between the up and down arrow )
*/
#scrolldiv_scrollbar{
width:15px;
height:460px; /* Total height - 40 pixels */
border:1px solid #BC8FBD;
position:relative;
}
/*
The scrollbar handle
*/
#scrolldiv_theScroll{
margin:1px;
width:13px;
height:13px;
background-color:#BC8FBD;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
/*
Scroll buttons(The up and down arrows)
*/
#scrolldiv_scrollUp,#scrolldiv_scrollDown{
width:15px;
height:16px;
border:1px solid #BC8FBD;
color: #BC8FBD;
text-align:center;
font-size:16px;
line-height:16px;
cursor:pointer;
}
#scrolldiv_scrollUp{
margin-bottom:2px;
}
#scrolldiv_scrollDown{
margin-top:2px;
}
#scrolldiv_scrollDown span,#scrolldiv_scrollUp span{
font-family: Symbol;
}
</style>
<script type="text/javascript" src="scrollable.js">
</script>
<link rel="stylesheet" href="../rws.css" type="text/css">
</head >
<body onload="getMaterials('St')">
<div id="dhtmlgoodies_scrolldiv">
<div id="scrolldiv_parentContainer">
<div id="dvMAT">
</div>
</div>
<div id="scrolldiv_slider">
<div id="scrolldiv_scrollUp"><img src="images/arrow_up.gif"></div>
<div id="scrolldiv_scrollbar">
<div id="scrolldiv_theScroll"><span></span></div>
</div>
<div id="scrolldiv_scrollDown"><img src="images/arrow_down.gif"></div>
</div>
</div>
<script type="text/javascript">
scrolldiv_setColor('#317082'); // Setting border color of the scrolling content
setSliderBgColor('#E2EBED'); // Setting color of the slider div
setContentBgColor('#FFFFFF'); // Setting color of the scrolling content
setScrollButtonSpeed(1); // Setting speed of scrolling when someone clicks on the arrow or the slider
setScrollTimer(5); // speed of 1 and timer of 5 is the same as speed of 2 and timer on 10 - what's the difference? 1 and 5 will make the scroll move a little smoother.
scrolldiv_setWidth(760); // Setting total width of scrolling div
scrolldiv_setHeight(400); // Setting total height of scrolling div
scrolldiv_initScroll(); // Initialize javascript functions
</script>
</body>
</html>