Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to change this vertical scroller to 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. 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>
    Last edited by kippie; 01-30-2006 at 04:13 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •