...

View Full Version : How to change this vertical scroller to a horizontal one?



kippie
01-30-2006, 03:06 PM
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. Would such a thing be possible?

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;">

<a name="top"></a><a name="orange"></a><br>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src="http://www.inspiration-company.nl/pijl-omhoogklein2opt.jpg" width="16" height="16" border="0" align="right"></a><img src="dotwhite.gif" width="1" height="1"><h3>Welcome Days</h3>
<div class="tekst">
<img width="33%" src="http://www.inspiration-company.nl/tbsingersopt.jpg" alt="kleuren bezieling en emotionele intelligentie" title="" style="float:left; margin-right:20; margin-bottom:10; margin-top: 5;">
Orange1<br>
Orange2<br>
Orange3<br>
Orange4<br>
Orange5<br>

<br>

<br><a name="geld"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src="http://www.inspiration-company.nl/pijl-omhoogklein2opt.jpg" width="16" height="16" border="0" align="right"></a><h3>Spelen met geld</h3>
<div class="tekst">
ABN1<br>
ABN2<br>
ABN3<br>
ABN4<br>
ABN5<br>
<br><a name="ocw"></a><br>
</div>

<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src="http://www.inspiration-company.nl/pijl-omhoogklein2opt.jpg" width="16" height="16" border="0" align="right"></a><h3>Spelen met situaties</h3>
<div class="tekst">
Min1<br>
Min2<br>
Min3<br>
Min4<br>
Min5<br>
<br><a name="zand"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src="http://www.inspiration-company.nl/pijl-omhoogklein2opt.jpg" width="16" height="16" border="0" align="right"></a><h3>Spelen met zand</h3>
<div class="tekst">
Met WHZ1<br>
Met WHZ2<br>
Met WHZ3<br>
Met WHZ4<br>
Met WHZ5<br>
<br><a name="kleur"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src="http://www.inspiration-company.nl/pijl-omhoogklein2opt.jpg" width="16" height="16" border="0" align="right"></a><h3>Spelen met Kleur</h3>
<div class="tekst">
Politie1<br>
Politie2<br>
Politie3<br>
Politie4<br>
Politie5<br>
<br><a name="bernheze"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src="http://www.inspiration-company.nl/pijl-omhoogklein2opt.jpg" width="16" height="16" border="0" align="right"></a><h3>Bernhezer Zesstrijd</h3>
<div class="tekst">
Rabo1<br>
Rabo2<br>
Rabo3<br>
Rabo4<br>
<br><a name="ah"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src="http://www.inspiration-company.nl/pijl-omhoogklein2opt.jpg" width="16" height="16" border="0" align="right"></a><h3>Creatief Denken en Doen</h3>
<div class="tekst">
Albert1<br>
Albert2<br>
Albert3<br>
Albert4<br>
Albert5<br>
Albert6<br>

<br><a name="parade"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src="http://www.inspiration-company.nl/pijl-omhoogklein2opt.jpg" width="16" height="16" border="0" align="right"></a><h3>Parade Festival "Rite de Passage"</h3>

</div>




<div id="layermenu1" style="position: absolute; z-index: 35; top: 20px; left: 20px;">
<div class="tekst"><b>Make your choice:</b><br><br></div>
<a href='javascript:Scroll(0)' class="link5" onfocus="this.blur();">Orange</a><br>
<a href='javascript:Scroll(3)' class="link5" onfocus="this.blur();">ING</a><br>
<a href='javascript:Scroll(6)' class="link5" onfocus="this.blur();">Min</a><br>
<img src="dotwhite.gif" width="1" height="1"><a href='javascript:Scroll(9)' class="link5" onfocus="this.blur();">WHZ </a><br>
<a href='javascript:Scroll(12)' class="link5" onfocus="this.blur();">Politie</a><br>
<a href='javascript:Scroll(14)' class="link5"onfocus="this.blur();">Rabo</a><br>
<a href='javascript:Scroll(16)' class="link5" onfocus="this.blur();">Albert Heijn</a><br>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum