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 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts

    Scrolling a DIV with Javascript

    I have been previously scrolling an IFRAME with Javascript, but now I would like to scroll a DIV, by clicking on buttons in a HTML document. onclick starts the scrolling, on mouseup stops it. Something like here: http://www.dyn-web.com/dhtml/iframes/scroll-v.html except using clicks rather than mouseovers (not a big deal, I just change the events). I would also like a function to scroll directly to a point (vertically) eg. (0,150).

    Note that in both instances, I only want to scroll vertically.

    The current code I am using for IFRAMEs (which I would like to change to DIV):
    Code:
    var timer;
    function scroll_iframe(frm,inc) {
      if (timer) clearTimeout(timer);
      if (window.frames[frm]) {
        window.frames[frm].scrollBy(0, inc);
        timer = setTimeout("scroll_iframe('" + frm + "'," + inc + ")", 20);
      }
    }
    function focus_iframe(frm,inc) {
      if (window.frames[frm]) {
        window.frames[frm].scrollTo(0, inc);
        }
    }
    function stop_iframe() { 
      if (timer) clearTimeout(timer);
    }
    Any help would be appreciated; thanks.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's a few functions for you to try out

    PHP Code:
    <script type="text/javascript">
    <!--
    function 
    toTop(id){
    document.getElementById(id).scrollTop=0
    }

    defaultStep=1
    step
    =defaultStep
    function scrollDivDown(id){
    document.getElementById(id).scrollTop+=step
    timerDown
    =setTimeout("scrollDivDown('"+id+"')",10)
    }

    function 
    scrollDivUp(id){
    document.getElementById(id).scrollTop-=step
    timerUp
    =setTimeout("scrollDivUp('"+id+"')",10)
    }

    function 
    toBottom(id){
    document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
    }

    function 
    toPoint(id){
    document.getElementById(id).scrollTop=100
    }
    // -->
    </script> 

    <a href="#null" onclick="toTop('div1')">Top</a> 
    <a href="#null" onmousedown="scrollDivDown('div1')" onmouseup="clearTimeout(timerDown)">ScrollDown</a> 
    <a href="#null" onmousedown="scrollDivUp('div1')" onmouseup="clearTimeout(timerUp)">Scroll Up</a>
    <a href="#null" onclick="toBottom('div1')">Bottom</a> 
    <a href="#null" onclick="toPoint('div1')">Point</a> 
    <BR><BR>
    <div id="div1" style="width:200px; height:300px; overflow:auto">
    <b>LAYER CONTENTS</b>
    <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT
    <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT
    <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT
    <P>Some Text<P>SOME TEXT<P>Some Text<P>End
    </div> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Thanks, that was a big help!

  • #4
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    I've encountered a problem. When using the functions you provided, when I click on Scroll Down/Up and then move the mouse off the button and let go, the DIV keeps scrolling to the bottom and then it can't be scrolled up again until the page is refreshed.

    On the IFRAME version I had, it also kept scrolling when the mouse button was moved off the link, but it was possible to scroll it back up when it hit the bottom.

    Is there any solution to this problem?

  • #5
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Could anyone help provide a solution to this problem?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Add this function, see if it cures that problem


    PHP Code:

    timerDown
    =""
    timerUp=""

    function getElementType(e){
    obj=(!e?event.srcElement:e.target)
    if(
    obj.nodeName=="BODY"){
    clearTimeout(timerDown)
    clearTimeout(timerUp)
    step=1
    }
    }

    document.onmousemove=getElementType 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Weird, but that function only appears to work if the Javascript is within the body, but not if it is in the head or in an external *.js file.

    Why is this? And is there any solution, so I could place the Javascript in an external file?

  • #9
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Can anyone help me?

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give this a try

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>
    <
    script type="text/javascript" src="scrolldiv.js"></script>  
    </HEAD>
    <BODY>
    <P></P>

    <div id="div1" style="width:200px; height:300px; overflow:auto"> 
    <b>LAYER CONTENTS</b> 
    <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT 
    <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT 
    <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT 
    <P>Some Text<P>SOME TEXT<P>Some Text<P>End 
    </div> 
    <P></P>

    <a href="#null" onmousedown="scrollDivDown('div1')" onmouseup="stopMe()">ScrollDown</a>  
    <a href="#null" onmousedown="scrollDivUp('div1')"  onmouseup="stopMe()">Scroll Up</a> 

    </BODY>
    </HTML> 
    scrolldiv.js
    PHP Code:
    defaultStep=
    step
    =defaultStep 

    function scrollDivDown(id){
    clearTimeout(timerDown
    document.getElementById(id).scrollTop+=step 
    timerDown
    =setTimeout("scrollDivDown('"+id+"')",10)



    function 
    scrollDivUp(id){
    clearTimeout(timerUp)
    document.getElementById(id).scrollTop-=step 
    timerUp
    =setTimeout("scrollDivUp('"+id+"')",10)


    timerDown="" 
    timerUp="" 

    function stopMe(){
    clearTimeout(timerDown
    clearTimeout(timerUp)
    }

    document.onmousemove=function(){stopMe()} 
    Last edited by Mr J; 09-02-2006 at 12:26 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var zxcTO;
    
    function Scroll(id,dis,pos){
     var obj=document.getElementById(id)
     obj.scrollTop=obj.scrollTop+dis;
     if (pos){obj.scrollTop=pos; }
     else {zxcTO=setTimeout( function(){ Scroll(id,dis); },10); }
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <input type="button" name="" value="Sroll Up" onmouseover="Scroll('Tst1',-1);" onmouseout="clearTimeout(zxcTO);" >
    <input type="button" name="" value="Sroll Down" onmouseover="Scroll('Tst1',1);" onmouseout="clearTimeout(zxcTO);" >
    <input type="button" name="" value="Sroll to 50" onmouseover="Scroll('Tst1',0,50);" onmouseout="clearTimeout(zxcTO);" >
    <input type="button" name="" value="Sroll to 75" onmouseover="Scroll('Tst1',0,75);" onmouseout="clearTimeout(zxcTO);" >
    <div id="Tst1" style="position:relative;overflow:auto;width:200px;height:100px;border:solid black 1px;" >
    0 Line<br>
    1 Line<br>
    2 Line<br>
    3 Line<br>
    4 Line<br>
    5 Line<br>
    6 Line<br>
    7 Line<br>
    8 Line<br>
    9 Line<br>
    
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    This is weird.. I tried to adapt the code so that the mouse would be clicked down to start scrolling, and stop scrolling when the mouse was released. For some reason, though, it's not working. It doesn't stop scrolling when the mouse button is released.

    Even so, I suspect the code will still have the same problem, in that it will continue scrolling if I hold the mouse down and move it off the button.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    zxcTO;

    function 
    Scroll(id,dis,pos){
     var 
    obj=document.getElementById(id)
     
    obj.scrollTop=obj.scrollTop+dis;
     if (
    pos){obj.scrollTop=pos; }
     else {
    zxcTO=setTimeout( function(){ Scroll(id,dis); },10); }
    }
    //-->
    </script>
    </head>

    <body>

    <input type="button" name="" value="Sroll Up" onmousedown="Scroll('Tst1',-1);" onmouseup="clearTimeout(zxcTO);">
    <input type="button" name="" value="Sroll Down" onmousedown="Scroll('Tst1',1);" onmouseup="clearTimeout(zxcTO);" >
    <input type="button" name="" value="Sroll to 50" onmousedown="Scroll('Tst1',0,50);" onmouseup="clearTimeout(zxcTO);" >
    <input type="button" name="" value="Sroll to 75" onmousedown="Scroll('Tst1',0,75);" onmouseup="clearTimeout(zxcTO);" >
    <div id="Tst1" style="position:relative;overflow:auto;width:200px;height:100px;border:solid black 1px;" >
    0 Line<br>
    1 Line<br>
    2 Line<br>
    3 Line<br>
    4 Line<br>
    5 Line<br>
    6 Line<br>
    7 Line<br>
    8 Line<br>
    9 Line<br>

    </div>
    </body>

    </html> 

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Please try the code in my last post
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #14
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Great, thanks Mr J, that works nicely! Sorry, I didn't notice your post before.


  •  

    Posting Permissions

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