PDA

Click to See Complete Forum and Search --> : changing scrollbar sides?

JavaHead Jonnie
01-26-2004, 12:31 PM
is it possible to put the scrollbars of a scrolling div on the left side instead of the right?

Thanks
crh3675
01-26-2004, 01:12 PM
Try this:

Create your div with the content

Create a second div with the same content.

Modify the width of the left div to only show the scrollbar. Create an onscroll event in the left div to scroll the right div at the same rate.
<html>
<script type="text/javascript">
<!--

function catchScroll(obj){
x=obj.scrollTop;
document.getElementById("data").scrollTop=x;
}

//-->
</script>
<body>
<div style="position:absolute;overflow:auto;left:-150px;width:175px;height:150px;" onscroll="catchScroll(this)">
this is my content
this is my content
this is my content
this is my contentthis is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
</div>
<div style="position:absolute;left:28px;overflow:auto;width:175px;height:150px;" id="data">
this is my content
this is my content
this is my content
this is my contentthis is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
</div>
</body>
</html>

Tested in IE6 only.
--Craig
JavaHead Jonnie
01-26-2004, 01:15 PM
i tried that but it didn't seem to work :(
crh3675
01-26-2004, 01:17 PM
<html>
<script type="text/javascript">
<!--

function catchScroll(obj){
x=obj.scrollTop;
document.getElementById("data").scrollTop=x;
}

//-->
</script>
<body>
<div style="position:absolute;overflow:auto;left:-180px;width:200px;height:150px;color:white" onscroll="catchScroll(this)">
this is my content
this is my content
this is my content
this is my contentthis is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
</div>
<div style="position:absolute;left:28px;overflow-y:hidden;width:175px;height:150px;" id="data">
this is my content
this is my content
this is my content
this is my contentthis is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
</div>
</body>
</html>
JavaHead Jonnie
01-26-2004, 01:18 PM
sorry, no, it does work, sort of, thanks
crh3675
01-26-2004, 01:21 PM
What browser are you using?
JavaHead Jonnie
01-26-2004, 01:25 PM
mozilla 1.5

b.t.w. second version works very well, thanks! ;)

but you wouldn't be able to show me how to do it 130px heigh and wide could you?
crh3675
01-26-2004, 01:47 PM
<html>
<script type="text/javascript">
<!--

function catchScroll(obj){
x=obj.scrollTop;
document.getElementById("data").scrollTop=x;
}

//-->
</script>
<body>
<div style="position:absolute;overflow:auto;left:-125px;width:144px;height:130px;color:white" onscroll="catchScroll(this)">
this is my content
this is my content
this is my content
this is my contentthis is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
</div>
<div style="position:absolute;left:28px;overflow-y:hidden;width:130px;height:130px;border:1px solid #C0C0C0" id="data">
this is my content
this is my content
this is my content
this is my contentthis is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
this is my contentv
this is my contentv
this is my content
this is my contentthis is my content
</div>
</body>
</html>

The key is, your first DIV must be the width you want plus 16 for the scollbar. The left position will push the content off the viewable screen area. If you are adding borders to your display (as I did for this example), you must reduce the width of the first one by 2 pixels (width of left and right borders)