...

View Full Version : Resolved Autoscroll div up/down loop



jmshep
06-22-2010, 01:05 AM
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:

(document.getElementById(id).clientHeight + document.getElementById(id).scrollTop) - document.getElementById(id).scrollHeight

Or if I'm at the top of the scrollable area if:

document.getElementById(id).scrollTop = 0

psuedo:

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

jmshep
06-22-2010, 02:49 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>
<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>


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

randomuser773
06-22-2010, 05:37 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!

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

jmshep
06-22-2010, 01:02 PM
Thanks for your help... Thought I'd post the end result incase anyone else was looking for the same thing in the future...


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum