Results 1 to 3 of 3

Thread: How to "hand scroll" within a window

  1. #1
    Join Date
    Aug 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to "hand scroll" within a window

    Hello Forum-

    Forgive me if I'm in the wrong forum....but what is the code for "hand scrolling" (left to right and/or up and down) within a window?

    thanks!

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    There is something good here:
    http://dynamicdrive.com/dynamicindex2/pagescroller.htm

    You could also have some div, set it's height and width and have overflow property set to auto

    ...This will show the scrollbars within the div

    ..Or you might find this script useful:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    body {
        color:#000;
        margin:10px;
    	font-family:Tahoma;
    	font-size:10pt;
     }
    #container {
        width:488px;    
    	border:1px solid #222;
        margin:auto;
     }
    #box {
        width:486px;
        border:1px solid #003;
        overflow:auto;
        height:300px;
     }
    #content {
        margin:30px;
        background-color:inherit;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:1em;
        color:#336;
        text-align:justify;
    }
    #button {
        width:504px;
        margin:auto;
     }
    .hide{
        display:none;
     }
    #goupward,#godownward {
        width:30px;
        height:25px; 
        float:right;
        margin:15px 8px;
     }
     #goupward:hover,#godownward:hover
     {
     text-decoration:underline;
     cursor:pointer;
     }
    </style>
    
    <script type="text/javascript">
      var margin=30; //this is the 'content' margin
      var borderwidth=1;   // this is the 'box' border-width x 2
      var up;
      var down;
    
    window.onload=function() {
      document.getElementById('box').style.overflow="hidden";
      document.getElementById('button').className='';
      bh=document.getElementById('box').offsetHeight-(margin+borderwidth);
      obj=document.getElementById('content');
      ch=obj.offsetHeight;
    
    document.getElementById('goupward').onmouseover=function() {
       goUp();
     }
    document.getElementById('goupward').onmouseout=function() {   
       clearTimeout(up);
       return;
     }
    document.getElementById('godownward').onmouseover=function() {
       goDown();
     }
    document.getElementById('godownward').onmouseout=function() {
       clearTimeout(down);0
        return;
     }
    }
    
    function goUp() {
    clearTimeout(down);
       obj.style.marginTop=margin +'px'
       margin--;
    if(margin+ch<=borderwidth){
       margin=borderwidth-ch;
       clearTimeout(up);
       return;
     }
       up=setTimeout('goUp()',20);
     }
    
    function goDown() {
    clearTimeout(up);
       obj.style.marginTop=margin +'px'
       margin++;
    if(margin>=30){
       margin=30;
       clearTimeout(down);
       return;
     }
       down=setTimeout('goDown()',20);
     }
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="box">
    <p id="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium, 
    est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa. 
    In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec 
    erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
    Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis 
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet 
    semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor 
    tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla 
    feugiat. Cras mauris.
    </p>
    </div>
    
    </div>
    
    <div id="button" class="hide">
    <span id="goupward">UP</span>
    <span id="godownward">DOWN</span>
    </div>
    </body>
    </html>
    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Aug 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for the help!

Bookmarks

Posting Permissions

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