|
|
|
|
|||||
|
|
|
|
|
|
|||
| Welcome
to Tech Support Forum home to more then 136,000 problems solved. Issues
have included: Spyware, Malware, Virus Issues, Windows, Microsoft,
Linux, Networking, Security, Hardware, and Gaming Getting your
problem solved is as easy as: 1. Registering for a free account 2. Asking your question 3. Receiving an answer Registered members: * See fewer ads. * And much more..
|
| Want to know how to post a question? click here | Having problems with spyware and pop-ups? First Steps |
|
|||||||
| Web Design & Programming Discussion of web design, and server-side & client-side scripting |
 |
|
|
Thread Tools |
02-01-2006, 12:07 PM
|
#1 (permalink) |
|
Registered User
Join Date: Jan 2005
Posts: 10
OS: XP
|
How to change this vertical scroller into a horizontal one?
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 -> scrollLeft scrollTop-speed -> scrollLeft-speed scrollHeight -> scrollWidth offsetTop -> offsetLeft But I cannot get it working. Can anyone help? 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').getElement sByTagName('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> <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> <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> <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> <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> <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> <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> <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> |
|
     
|
|
| Thread Tools | |
|
|
