--


How to

by

 
In the html below I use a script for a vertical scroller. The links move the scroller up and down to the correct part of the text. Now I would like to change the scrolling to the horizontal direction, moving to the left or the right to the correct part. I would think I have to change scrollTop and scrollHeight into scrollLeft and scrollWidth, but cannot figure out how I should do that. If someone could help me with it I would be very grateful.

This is the script for the vertical scroller I have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<script language="JavaScript" type="text/javascript">
<!--
function move_up1(){
document.getElementById('layertext2').scrollTop=0;
}

var timer;
var speed=20;

function Scroll(lnk){
clearTimeout(timer);
p=document.getElementById('layertext2');
c=document.getElementById('layertext2').getElementsByTagName('a')[lnk];

if (c.offsetTop<p.scrollTop-speed){
p.scrollTop=p.scrollTop-speed;
timer=setTimeout('Scroll('+lnk+')',1);
}

else if (c.offsetTop>p.scrollTop+speed){
p.scrollTop=p.scrollTop+speed;
timer=setTimeout('Scroll('+lnk+')',1);
}

else{
p.scrollTop=c.offsetTop;
clearTimeout(timer);
}

if (p.scrollTop+p.offsetHeight==p.scrollHeight){
clearTimeout(timer);
}

}
//-->
</script>


</head>

<body>

<div id="layertext2" style="position: relative; z-index: 15; top: 300px; left: 0px; height: 150px; overflow-x: none; overflow-y: auto;">


Welcome Days


<div class="tekst">
kleuren bezieling en emotionele intelligentie
Orange1
Orange2
Orange3
Orange4
Orange5






</div>

Spelen met geld


<div class="tekst">
ABN1
ABN2
ABN3
ABN4
ABN5


</div>

Spelen met situaties


<div class="tekst">
Min1
Min2
Min3
Min4
Min5


</div>

Spelen met zand


<div class="tekst">
Met WHZ1
Met WHZ2
Met WHZ3
Met WHZ4
Met WHZ5


</div>

Spelen met Kleur


<div class="tekst">
Politie1
Politie2
Politie3
Politie4
Politie5


</div>

Bernhezer Zesstrijd


<div class="tekst">
Rabo1
Rabo2
Rabo3
Rabo4


</div>

Creatief Denken en Doen


<div class="tekst">
Albert1
Albert2
Albert3
Albert4
Albert5
Albert6



</div>

Parade Festival "Rite de Passage"



</div>




<div id="layermenu1" style="position: absolute; z-index: 35; top: 20px; left: 20px;">
<div class="tekst">Make your choice:

</div>
Orange
ING
Min
WHZ
Politie
Rabo
Albert Heijn
</div>
</body>
</html>



Posted on Feb 1, 2006, 10:16 AM

Respond to this message

Goto Forum Home
Responses

Find more forums on JavaCreate your own forum at Network54
 Copyright © 1999-2009 Network54. All rights reserved.   Terms of Use   Privacy Statement