• Howdy! Welcome to our community of more than 130.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net
managed wordpress hosting

javascript scrolling

C

Cyber

[...]
NLC
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?

Code: 
<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>
 
Not sure what you mean - does (is it meant to) it scroll an area round and which browser is it hanging?
 
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.
 
See what you mean - that ones a bitch, can't find anything wrong really but it hangs after one go.
 
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.
 
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! --

Code: 
// (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; }
 
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;
}
}
Click to expand...

You did it!!! :applaudin The bolded text is what i meant "position condition". Congrats!!
 
Last edited:
You must log in or register to reply here.
Back
Top