• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2444
  • Last Modified:

Problem with auto scrolling div going too fast

Hi All,

I'm having a problem with an auto scrolling div script and was wondering if anyone might be able to shed some light on it.

The script scrolls the div down to the bottom and then scrolls back to the top (and loops and does it again).

The problem happens when you move the mouse over the div (which pauses the scrolling). As soon as you move the mouse off the div it starts to scroll at super fast speed! It looks truly funny and is really annoying :)

I was wondering if anyone could please point out what i need to change in this script to get the div to always scroll at the same speed:

<script type="text/javascript">

var JuFlag = null;

var JdFlag = null;

var num=0;

var toTop = null;

  var up=0;

if(document.all){

   var move=20;

   }

else{

   var move=50;

  }

function Jup(){

toTop = false;

  if(up == 0){

    JuFlag=false;

    JdFlag=true;

    setTimeout('Jdown()',1000);

  }

  else{

        up += 1;

        document.getElementById('JscrollBox').style.top=up+"px";

  }

 if ( JuFlag) setTimeout('Jup()',move);

}

function Jdown(){

toTop = false;

  var topA = document.getElementById('JscrollBox').offsetHeight;

  var topB = document.getElementById('container').offsetHeight;

  var botHeight = topB - topA;

  if((up == botHeight) || (up == botHeight-1)){

       JdFlag=false;

       JuFlag = true;

       setTimeout('Jup()',1000);

  }

  else{

        up -= 1;

      if(document.all){

          document.getElementById('JscrollBox').style.top=up+"px";

      }

      else{

        document.getElementById('JscrollBox').style.top=up+"px";

      }

  }

  if (JdFlag) setTimeout('Jdown()',move);

}

function stopIt(){

  if(JdFlag){

     JdFlag=false;

     num=0;

  }

  else if(JuFlag){

     JuFlag=false;

     num=1;

  }

}

function go(){

  if(num == 0){

     if(toTop){        

         document.getElementById('JscrollBox').style.top = '0px';

         up=0;

     }

     JdFlag=true;

     setTimeout('Jdown()',800);

  }

  else{

     if(toTop){        

         document.getElementById('JscrollBox').style.top = '0px';

         JdFlag=true;

         up=0;

         setTimeout('Jdown()',800);

     }

     else{

         JuFlag=true;

         setTimeout('Jup()',800);

     }

  }

}

function reset(){

    JdFlag = false;

    JuFlag = false;

    toTop = true;

    up=0;

    document.getElementById('JscrollBox').style.top = '0px';

}

</script>

<div id="container" style="position:relative;width: 172px; height: 232px; z-index:4; overflow:hidden;" onmouseover="stopIt();" onmouseout="go();" onscroll="reset();">

<div id="JscrollBox" style="position:relative;left:0px;top:0px;width: 150px; z-index:1;text-align:justify; padding:10px;" onmouseover="stopIt();" onmouseout="go();">

<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>

</div>
</div>
0
bradderick
Asked:
bradderick
1 Solution
 
Michel PlungjanIT ExpertCommented:
You need to use a variable for the setTimeout and use clearTimeout

Something like this:

<script type="text/javascript">
var tId = "";
var JuFlag = null;
var JdFlag = null;
var num=0;
var toTop = null;
  var up=0;
if(document.all){
   var move=20;
   }
else{
   var move=50;
  }
function Jup(){
toTop = false;
  if(up == 0){
    JuFlag=false;
    JdFlag=true;
    tId=setTimeout('Jdown()',1000);
  }
  else{
        up += 1;
        document.getElementById('JscrollBox').style.top=up+"px";
  }
 if ( JuFlag) setTimeout('Jup()',move);
}
function Jdown(){
toTop = false;
  var topA = document.getElementById('JscrollBox').offsetHeight;
  var topB = document.getElementById('container').offsetHeight;
  var botHeight = topB - topA;
  if((up == botHeight) || (up == botHeight-1)){
       JdFlag=false;
       JuFlag = true;
       tId=setTimeout('Jup()',1000);
  }
  else{
        up -= 1;
      if(document.all){
          document.getElementById('JscrollBox').style.top=up+"px";
      }
      else{
        document.getElementById('JscrollBox').style.top=up+"px";
      }
  }
  if (JdFlag) tId=setTimeout('Jdown()',move);
}
function stopIt(){
  clearTimeout(tId); // remove all pending requests
  if(JdFlag){
     JdFlag=false;
     num=0;
  }
  else if(JuFlag){
     JuFlag=false;
     num=1;
  }
}
function go(){
  clearTimeout(tId); // remove all pending requests
  if(num == 0){
     if(toTop){        
         document.getElementById('JscrollBox').style.top = '0px';
         up=0;
     }
     JdFlag=true;
     tId=setTimeout('Jdown()',800);
  }
  else{
     if(toTop){        
         document.getElementById('JscrollBox').style.top = '0px';
         JdFlag=true;
         up=0;
         tId=setTimeout('Jdown()',800);
     }
     else{
         JuFlag=true;
         tId=setTimeout('Jup()',800);
     }
  }
}
function reset(){
    JdFlag = false;
    JuFlag = false;
    toTop = true;
    up=0;
    document.getElementById('JscrollBox').style.top = '0px';
}
</script>
0
 
bradderickAuthor Commented:
Thank you very, very much! That has worked a charm!!

All the best.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now