5
I found code close to this somewhere yesterday for a vertical scrollbar and I modified it for a horizontal scroll bar. It seems to work in IE 7 and Netscape 7, but it isn't working for the FF I have 1.5 and 2.0. It is not getting the correct docW which is the full document size. Any suggestions are more than welcome. Thanks.
<style type="text/css">
#container {
position : absolute;
top : 10px;
left : 10px;
width : 100%;
height : 120px;
overflow : hidden;
}
#content {
position : relative;
}
p {
font : normal 10px/14px arial,helevetica,san-serif;
}
#scrollArea {
position : absolute;
left : 0px;
top : 130px;
height : 10px;
width : 100%;
border : 1px solid #666;
overflow : hidden;
}
#scroller {
position : absolute;
top : -1px;
width : 10px;
height : 10px;
background : #AAA;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
}
</style>
<script type="text/javascript" src="dom-drag.js"></script>
</head>
<body bgcolor="#464646" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript">
//We wrap all the code in an object so that it doesn't interfere with any other code
var scroller = {
init: function() {
//collect the variables
scroller.docW = document.getElementById("content").offsetWidth;
scroller.contW = document.getElementById("container").offsetWidth;
scroller.scrollAreaW = document.getElementById("scrollArea").offsetWidth;
//alert(scroller.docW+" "+scroller.contW+" "+scroller.scrollAreaW);
//calculate Width of scroller and resize the scroller div
//(however, we make sure that it isn't to small for long pages)
scroller.scrollW = (scroller.contW * scroller.scrollAreaW) / scroller.docW;
if(scroller.scrollW < 15) scroller.scrollW = 15;
document.getElementById("scroller").style.width = Math.round(scroller.scrollW) + "px";
//what is the effective scroll distance once the scoller's Width has been taken into account
scroller.scrollDist = Math.round(scroller.scrollAreaW-scroller.scrollW);
//make the scroller div draggable
Drag.init(document.getElementById("scroller"),null ,-1,scroller.scrollDist,0,0);
//add ondrag function
document.getElementById("scroller").onDrag = function (x,y) {
var scrollX = parseInt(document.getElementById("scroller").style .left);
var docX = 0 - (scrollX * (scroller.docW - scroller.contW) / scroller.scrollDist);
document.getElementById("content").style.left = docX + "px";
}
}
}
onload = scroller.init;
</script>
<div id="container">
<div id="content">
<?= $thumbText ?>
</div>
</div>
<div id="scrollArea">
<div id="scroller"></div>
</div>
