Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Problem with auto scrolling div going too fast

Posted on 2007-10-15
2
Medium Priority
?
2,441 Views
Last Modified: 2012-08-14
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
Comment
Question by:bradderick
2 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20083510
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
 

Author Comment

by:bradderick
ID: 20083642
Thank you very, very much! That has worked a charm!!

All the best.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question