PDA

View Full Version : Resolved 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!!

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

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

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

vwphillips
06-22-2010, 10:37 AM
<!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
<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:

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

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? :confused:

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


<div class="frame" id="news" onMouseOver="clearInterval(IntervalID);" onMouseOut="simpleScroll('news', 100);">

I declared
var IntervalID = 0; right before the simpleScroll function and added
IntervalID = setInterval( s, period ); right after the line
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
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:

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

FretNoize
06-24-2010, 12:24 AM
Thank you so much! Your new code works perfectly! with the new code, I didn't need all the extra onMouseOver and onMouseOut in the DIV tag or the use of setInterval and clearInterval functions.

I appreciate all your help! Now I have to figure out how this code works... hmmm... let's see.....:)

Mike