javascript scrolling [Archive]

View Full Version : javascript scrolling

Cyber

March 28th, 2004, 10:41

I have this javascript below, which when I put my mouse over the link, it scrolls up, but it causes my browser to hang. Is there any way for this to work, so when I put my mouse over, it goes, but when I leave the link, it stops?

<html>
<head><title>Scrolling a DIV with JavaScript</title>

<script language='javascript'>
var l = 1;

function move_up() {
do {
document.getElementById('scroll_clipper').scrollTop = document.getElementById('scroll_clipper').scrollTop-5;
} while(l==1)
}

function stopscroll() {
l = 0;
}
</script>

</head>
<body>

<a href='#' onmouseover="move_up()" onmouseout="stopscroll()" >Move UP</a>

<p>

<div id='scroll_clipper' style='position:absolute; width:150px; height: 150px; overflow:auto'>
<div id='scroll_text' style='background-color:yellow'>
Here is some content that can be scrolled.
<p>It uses two divs:<ul>
<li>scroll_clipper, and
<li>scroll_text
</ul>

scroll_clipper defines the scroll area while scroll_text
defines the text to be scrolled.

</div>
</div>

</body>
</html>

Decker

March 28th, 2004, 10:49

Not sure what you mean - does (is it meant to) it scroll an area round and which browser is it hanging?

Cyber

March 28th, 2004, 10:53

It's supposed to scroll the div (id="scroll_clipper"), but it hangs in all browsers. It scrolls to the top, but then hangs, since I can't get the do{}while loop to stop.

Decker

March 28th, 2004, 10:55

Got a link ??

Cyber

March 28th, 2004, 11:02

sure: http://www.jbeffects.com/jbmini/test2.html

Decker

March 28th, 2004, 11:41

See what you mean - that ones a -----, can't find anything wrong really but it hangs after one go.

Cyber

March 28th, 2004, 15:02

Exactly. I found some other scrolling code I may use, but I kind of wanted to use my own.

bloodyveins

March 29th, 2004, 07:13

hmmm, wrong algorithm i think.

from your function, l will always set to 1, no matter where the scroller position is. this results in browser hang because browser keeps on scrolling for the loop condition is always true.

i propose position condition. so, first you have to get the top position of your div element, then count its height (to determine scroller availability status), and finally create the scroller link and function.

don't forget to review browser compliance since not all browsers has the same method.

Cyber

March 29th, 2004, 14:54

Thanks. I got help elsewhere, and now it's working perfectly.

Decker

March 29th, 2004, 15:23

Phew - fancy posting the fix, that was a sod of a one.

Cyber

March 29th, 2004, 16:33

Quite a bit of change actually. [please don't steal!]

-- now to figure out how to make a BAR to make it a real scroller! --

// (c) 2003 JBEffects
// Feel free to use this code, with proper credit
// Stealing code is bad!

var o, timer, change = 1;
window.onload=function(){
o=document.getElementById('textbody');
o.scrollTop=0;

var up=document.getElementById('arrowup');
up.onmousedown=function(){timer=setInterval(moveup, 2);};
up.onmouseup=stopmove;
up.onmouseout=stopmove;
up.onclick=function(){return false;};

var down=document.getElementById('arrowdn');
down.onmousedown=function(){timer=setInterval(movedown, 2);};
down.onmouseup=stopmove;
down.onmouseout=stopmove;
down.onclick=function(){return false;};
}
function moveup() { o.scrollTop>0 ? o.scrollTop-=5 : stopmove(); }
function movedown() {
var init=o.scrollTop;
if (change==0) {
stopmove(); return;
} else {
o.scrollTop+=5; change=o.scrollTop-init;
}
}
function stopmove() { clearInterval(timer); change=1; }

bloodyveins

March 30th, 2004, 04:40