Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Autoscroll Div help

  1. #1
    Join Date
    Jun 2010
    Location
    USA, FL.
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Autoscroll Div help

    Hello everyone,
    I'm not totally new to JavaScript but definitely not proficient
    I'm trying to make a <div> autoscroll up and down. I've found this script here originally posted by MBurt and it works great.

    I'll try and explain the best I can: I need to tweak it so once the scroll reaches the bottom of the div it reverses. Basically scroll to the bottom once it reaches the bottom scroll back up, once it reaches the top scroll back down, etc.. Just constantly scrolling... Know what I mean? I greatly appreciate any input!!
    Code:
    <script language="javascript">
    	i = 0
    	var speed = 1
    	function scroll() {
    		          i = i + speed
    		          var div = document.getElementById("news")
    		          div.scrollTop = i
    		          if (i > div.scrollHeight - 160) {i = 0}
    		          t1=setTimeout("scroll()",100)
    	                  }
    </script>
    Thanks!
    John
    Last edited by mastermynd; 06-22-2010 at 07:31 PM.

  2. #2
    Join Date
    Jun 2010
    Location
    USA, FL.
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok I figured some stuff out, just need help putting it into a loop. Any input/help is MUCH appreciated...

    I can tell if I'm at the bottom of the scrollable area with:
    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:
    Code:
    document.getElementById(id).scrollTop = 0
    psuedo:
    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) 
    }
    
    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)
    }

  3. #3
    Join Date
    Jun 2010
    Location
    USA, FL.
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

    HTML 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)


  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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); },100)
    }
    
    
    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>
    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/

  5. #5
    Join Date
    Jun 2010
    Location
    USA, FL.
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Resolved

    Thanks so much vwphillips!
    I'm going to check over this code and see why you did what you did. It works flawlessly and you changed it up quite abit.
    Thanks again man!!!!

  6. #6
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Code:
    <script type='text/javascript'>
    
    function simpleScroll( id, period )
    {
     var d = { elem:document.getElementById( id ), vD:1, hD:1, lastX:-1, lastY:-1 };
      
     function s( /*284329636C756566756C28444429*/ )
     {     
      d.lastX = d.elem.scrollLeft += d.hD;
      d.lastY = d.elem.scrollTop += d.vD;
      
      if( d.lastX != d.elem.scrollLeft )
       d.hD = -d.hD;
       
      if( d.lastY != d.elem.scrollTop )
       d.vD = -d.vD;  
     }
    
     delete d;
     
     d.elem ? setInterval( s, period ) 
            : alert('Element with ID "' + id +'" not found.\n\n( Code must be initialised AFTER the target element has been rendered )');    
    }
    
    simpleScroll( 'myDiv', 100);
    
    simpleScroll( 'myOtherDiv', 100);
    
    </script>
    Last edited by clueful; 06-23-2010 at 12:40 AM. Reason: Idiot proofing

  7. The Following User Says Thank You to clueful For This Useful Post:

    FretNoize (06-23-2010)

  8. #7
    Join Date
    Jun 2010
    Location
    USA, FL.
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey Clueful,
    Not sure what ya got there? Looks complicated, if it worked then I would have to look further but because it's broken it makes me want to leave it be...
    Error's:
    Code:
    d.elem is null or not an object
    Thanks for the input though, maybe you could take another look...

  9. #8
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by mastermynd View Post
    Hey Clueful,
    Not sure what ya got there? Looks complicated, if it worked then I would have to look further but because it's broken it makes me want to leave it be...
    Error's:
    Code:
    d.elem is null or not an object
    Thanks for the input though, maybe you could take another look...
    I wouldn't post a routine that complex without testing it. Show your implementation; I'm guessing you initialised it above the div instead of below. I've dumbed it down now.
    Last edited by clueful; 06-23-2010 at 12:41 AM.

  10. #9
    Join Date
    Jun 2010
    Location
    The suburbs...
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question How to pause autoscrolling correctly

    Hi Clueful,

    I really like your javascript autoscroll code. I'm still trying to figure out how it works exactly but I love it since it's so small yet does the job very well. I just have a couple of questions:

    1) What exactly is the purpose of the comment string inside function s() ??

    2) I tried to modify your code using setInterval and clearInterval so that onMouseOver of the div, the autoscrolling pauses and then continues onMouseOut. But the onMouseOut does not work right. Can you please help me out?

    This is the line of code I use as the div tag:

    Code:
    <div class="frame" id="news" onMouseOver="clearInterval(IntervalID);" onMouseOut="simpleScroll('news', 100);">
    I declared
    Code:
    var IntervalID = 0;
    right before the simpleScroll function and added
    Code:
     IntervalID = setInterval( s, period );
    right after the line
    Code:
    delete d;
    To recreate the problem do this:

    While autoscrolling downwards, place mouse on the div, the autoscrolling stops as it should. But when the mouse is removed, the scrolling reverses direction instead of continuing to autoscroll downwards.

    What's wrong with the onMouseOut? How to fix it? Please help, I'm just starting in Javascript.

    Thanks for the great piece of code!

    Mike

  11. #10
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by FretNoize View Post

    1) What exactly is the purpose of the comment string inside function s() ??
    A comment like any other.

    While autoscrolling downwards, place mouse on the div, the autoscrolling stops as it should. But when the mouse is removed, the scrolling reverses direction instead of continuing to autoscroll downwards.
    This is a modified version that pauses on mouseover and changes direction with the scrollbars:
    Code:
    <script type='text/javascript'>
    
    function simpleScroll( id, period )
    {
     var d = { elem:document.getElementById( id ), vD:1, hD:1, lastX:0, lastY:0, diff:0, canScroll:true };
    
     d.elem.onmouseover=function(){ d.canScroll = false; }
     d.elem.onmouseout=function(){ d.canScroll = true; }
    
     function s( /*28432953637269707465726C61746976652E636F6D*/ )
     {
      if( d.canScroll )
      {
       if( (d.hD < 0 && d.elem.scrollLeft >= d.lastX ) || (d.hD > 0 &&  d.elem.scrollLeft <= d.lastX ) )
        d.hD = -d.hD;
    
       if( (d.vD < 0 && d.elem.scrollTop >= d.lastY ) || (d.vD > 0 &&  d.elem.scrollTop <= d.lastY ) )
        d.vD = -d.vD;
    
       d.elem.scrollLeft = ( d.lastX = d.elem.scrollLeft ) + d.hD;
    
       d.elem.scrollTop = ( d.lastY = d.elem.scrollTop ) + d.vD;
      }
     }
    
     d.elem ? setInterval( s, period )
            : alert('Element with ID "' + id +'" not found.\n\n( Code must be initialised AFTER the target element has been rendered )');
    
     delete d, s;
    }
    
    simpleScroll( 'myDiv', 100);
    
    simpleScroll( 'myOtherDiv', 100);
    
    </script>

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
  •