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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Autoscroll div up/down loop

    Hello everyone,
    What I'm trying to do just doesn't seem like it should be that difficult but I'm sure struggling with lacking skills I should say.
    I'm trying to automatically scroll a div up and down. For say if div.scrollTop = 0 then scroll to the bottom once it reaches the bottom scroll back up and so forth not stopping in a loop with say a timeout of 10.. Just need help putting it all together. Any input is much appreciated!!

    I've figured some stuff out:
    I can tell if I'm at the bottom of the scrollable area with:
    PHP Code:
    (document.getElementById(id).clientHeight document.getElementById(id).scrollTop) - document.getElementById(id).scrollHeight 
    Or if I'm at the top of the scrollable area if:
    PHP Code:
    document.getElementById(id).scrollTop 
    psuedo:
    PHP Code:
    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 scrollMe(id){
    var 
    iScrollHeight document.getElementById(id).scrollHeight
    var iScrollTop document.getElementById(id).scrollTop
    var iClientHeight document.getElementById(id).clientHeight
    var iPOS = (iClientHeight iScrollTop) - iScrollHeight
    if (iPOS 0)
    {
        
    scrollDivDown(id)
    }
    else if (
    iPOS 0)
    {
        
    scrollDivUp(id)

    Last edited by jmshep; 06-22-2010 at 02:08 PM. Reason: Resolved

  • #2
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok I seem to be figuring this out on my own
    But there has got to be a better way than this, I'm almost embarrassed to post this code (but it works).. Can anyone help with cleaning it up or giving me some ideas on improving it?? Thanks!

    Code:
    <html>
    	<head>
    	<script type="text/javascript" src="scrolldiv.js"></script>   
    	<style type="text/css">
    		.frame {
    			font:12px arial;
    			width:200;
    			height:200;
    			border:none;
    			overflow:scroll;
    			overflow-y:hidden;
    			overflow-x:hidden;
    			padding:5;
    		}
    	</style>
    	</head>
    	<body onload="scrollMe('news')">
    		<div class="frame" id="news">
    			NEWS
    			<br><hr>
    			<br>Segment 1
    			<br>Segment 2
    			<br>Segment 3
    			<br>Segment 4
    			<br>Segment 5
    			<br>Segment 6
    			<br>Segment 7
    			<br>Segment 8
    			<br>Segment 9
    			<br>Segment 10
    			<br>Segment 11
    			<br>Segment 12
    			<br>Segment 13
    			<br>Segment 14
    			<br>Segment 15
    			<br>Segment 16
    			<br>Segment 17
    			<br>Segment 18
    			<br>Segment 19
    		</div>
    		<br><br>
    		<a href="#null" onmousedown="scrollDivDown('news')" onmouseup="stopMe()">ScrollDown</a>   
    		<a href="#null" onmousedown="scrollDivUp('news')"  onmouseup="stopMe()">Scroll Up</a>  
    		<a href="#null" onmousedown="getSpecs('news')">Scroll Height</a> 
    		
    	</body>
    </html>
    PHP Code:
    defaultStep=1  
    step
    =defaultStep  

    function scrollDivDown(id){ 
    var 
    iScrollHeight document.getElementById(id).scrollHeight
    var iScrollTop document.getElementById(id).scrollTop
    var iClientHeight document.getElementById(id).clientHeight
    var iPOS = (iClientHeight iScrollTop) - iScrollHeight
    if (iPOS==0
    {
        
    //alert("reached bottom")
        
    return scrollDivUp(id)
    }
    clearTimeout(timerDown)  
    document.getElementById(id).scrollTop+=step 
    timerDown
    =setTimeout("scrollDivDown('"+id+"')",100
    }  

    function 
    scrollDivUp(id){
    var 
    iScrollTop document.getElementById(id).scrollTop

    if (iScrollTop == 0
    {
        
    //alert("reached top")
        
    return scrollDivDown(id)
        }
    else {
        
    clearTimeout(timerUp
        
    document.getElementById(id).scrollTop-=step  
        timerUp
    =setTimeout("scrollDivUp('"+id+"')",100
        }
        } 

    timerDown=""  
    timerUp=""
    timerScroll=""  

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


    function 
    getSpecs(id){
    var 
    iScrollHeight document.getElementById(id).scrollHeight
    var iScrollTop document.getElementById(id).scrollTop
    var iClientHeight document.getElementById(id).clientHeight
    var iPOS = (iClientHeight iScrollTop) - iScrollHeight
    alert
    ("The value of scrollHeight is:" iScrollHeight "px" "\nScrollTop is:" iScrollTop "\nViewable height:" iClientHeight "\nLeft:" iPOS)
    }

    function 
    scrollMe(id){
    scrollDivDown(id)


  • #3
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    Quote Originally Posted by jmshep View Post
    Ok I seem to be figuring this out on my own
    But there has got to be a better way than this, I'm almost embarrassed to post this code (but it works).. Can anyone help with cleaning it up or giving me some ideas on improving it?? Thanks!
    The easiest way to detect the end of travel is simply by comparing the current displacement to the last. If the expected change did not occur, it's time to switch direction without ever reading element.scrollHeight etc.

    http://scripterlative.com/files/autodivscroll.htm

  • Users who have thanked randomuser773 for this post:

    jmshep (06-22-2010)

  • #4
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up Resolved

    Thanks for your help... Thought I'd post the end result incase anyone else was looking for the same thing in the future...

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

    <
    html>
        <
    head>
        <
    script type="text/javascript" >

    var 
    defaultStep=1;
    var 
    step=defaultStep;
    var 
    timer;

    function 
    scrollDiv(id,s){
     var 
    obj=document.getElementById(id);
     var 
    iScrollTop obj.scrollTop;
     
    step=s||step;
     if (
    iScrollTop == 0){
      
    step=defaultStep;
     }
     else if (
    obj.clientHeight iScrollTop obj.scrollHeight==0){
      
    step=-defaultStep;
     }
     
    clearTimeout(timer);
     
    obj.scrollTop+=step;
     
    timer=setTimeout(function(){ scrollDiv(id); },10)
    }


    function 
    stopMe(){
     
    clearTimeout(timer);
    }

    function 
    getSpecs(id){
     var 
    obj=document.getElementById(id);
     var 
    iScrollHeight obj.scrollHeight;
     var 
    iScrollTop obj.scrollTop;
     var 
    iClientHeight obj.clientHeight;
     var 
    iPOS = (iClientHeight iScrollTop) - iScrollHeight;
     
    alert("The value of scrollHeight is:" iScrollHeight "px" "\nScrollTop is:" iScrollTop "\nViewable height:" iClientHeight "\nLeft:" iPOS)
    }

    function 
    scrollMe(id){
     
    scrollDiv(id)
    }

    </script>
        <style type="text/css">
            .frame {
                font:12px arial;
                width:200;
                height:200;
                border:none;
                overflow:scroll;
                overflow-y:hidden;
                overflow-x:hidden;
                padding:5;
            }
        </style>
        </head>
        <body onload="scrollMe('news')">
            <div class="frame" id="news">
                NEWS
                <br><hr>
                <br>Segment 1
                <br>Segment 2
                <br>Segment 3
                <br>Segment 4
                <br>Segment 5
                <br>Segment 6
                <br>Segment 7
                <br>Segment 8
                <br>Segment 9
                <br>Segment 10
                <br>Segment 11
                <br>Segment 12
                <br>Segment 13
                <br>Segment 14
                <br>Segment 15
                <br>Segment 16
                <br>Segment 17
                <br>Segment 18
                <br>Segment 19
            </div>
            <br><br>
            <a href="#null" onmousedown="scrollDiv('news',1)" onmouseup="stopMe()">ScrollDown</a>
            <a href="#null" onmousedown="scrollDiv('news',-1)"  onmouseup="stopMe()">Scroll Up</a>
            <a href="#null" onmousedown="getSpecs('news')">Scroll Height</a>

        </body>
    </html> 


  •  

    Posting Permissions

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