Jonathan wrote:
I'm trying to build a scrollable div with "up" and "down" buttons to
replicate the action of a scroll bar. The reason I'm not just using
"overflow:auto" is because I want to position the scroll buttons on the
LEFT side of the box.
Don't ask why, I'm not the client ;)
Anyway, I've managed to get this working on some browsers by modifying
the scrollTop property of the div object, but it seems that this is
actually supposed to be read-only, and is inconsistent in any event.
Any ideas for how to do this cleanly?
-J
If you put the contents inside two div tags you can use CSS to clip the
outer div and "scroll" the inner div by scripting its CSS "top" value, thus:
<html><head><style>
#contents{ position: relative; top: 0; left: 0; width: 100px; height: auto;}
#scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;}
</style>
<script>
var t = 0;
function up()
{
t += 10;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
function down()
{
t -= 10;
with(document.getElementById("contents"))
{
if(t < -clientHeight)
t = -clientHeight;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
</script></head>
<body><table><tr><td><a href="javascript
:void(0)"
onclick="up()">up</a></td><td rowspan="2"><div id="scrollable"><div
id="contents">scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
</div></div></td></tr><tr><td><a href="javascript
:void(0)"
onclick="down()">down</a></td></tr></table>
</body></html>
