Autoscroll Div help

**mastermynd** · 06-18-2010, 06:28 PM

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

**mastermynd** · 06-21-2010, 08:09 PM

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

**mastermynd** · 06-22-2010, 01:48 AM

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)

}

**vwphillips** · 06-22-2010, 10:37 AM

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>

**mastermynd** · 06-22-2010, 07:30 PM

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!!!!

**clueful** · 06-22-2010, 08:43 PM

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>

**mastermynd** · 06-22-2010, 11:58 PM

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...

**clueful** · 06-23-2010, 12:18 AM

Originally Posted by mastermynd

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.

**FretNoize** · 06-23-2010, 07:28 PM

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

**clueful** · 06-23-2010, 11:47 PM

Originally Posted by FretNoize

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>