Quick Question...How Would You Reverse This small Function?

**tedteeter** · 03-11-2014, 12:18 AM

Greetings, March 10th 2014

The below is a function the scrolls down a div and it works great, however, I have attempted several ways to reverse the scroll downwards to return the div to it's original position and erratic numbers are generated even after clearing the variables, intervals etc. I even set different variables and attempted a setinterval for the flydown function and a TimeOut for the flyup function but I am still getting erratic numbers?? Any ideas? ## An UPDATE ## I now have the functions reverse and it works great, however, now that I use CSS display block it flashes off an on as it appears that the clearIntervals aren't working correctly..again any ideas?

Code:

function flyDown(){
	     y=k++;
	 var x=document.getElementById('dmenudiv');
  if(y>300){
  	       //alert('here in clear');
		   stopexpand();
		   document.getElementById('opaque').style.display='block';
            }else{
  	               x.style.visibility='visible';
  	               x.style.height = y+'px';
				    if(y<150){
						x.style.top = y+'px';
					    }
			       x.style.zIndex='100';		
                   expandInterval = setInterval(function(){flyDown()}, 75);
	             }	    
}

**vwphillips** · 03-11-2014, 02:10 PM

use setTimeout not setInterval

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<input type="button" name="" value="Fly Down" onclick="flyDown('dmenudiv',1,300);"/><input type="button" name="" value="Fly Up" onclick="flyDown('dmenudiv',-1,100);"/>
<div id="dmenudiv" style="height:100px;width:400px;background-Color:red;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
function flyDown(id,ud,e){
  var x=document.getElementById(id);
  if (x){
   clearTimeout(x.to);
   var y=parseInt(x.style.height)+ud;
   if((ud>0&&y<e)||(ud<0&&y>e)){
  	x.style.visibility='visible';
  	x.style.height = y+'px';
	if(y<150){
	 x.style.top = y+'px';
	}
	x.style.zIndex='100';
    x.to = setTimeout(function(){flyDown(id,ud,e)}, 75);
   }
   else{
  	x.style.height = e+'px';
  	       alert('here in clear');
//		   stopexpand();
//		   document.getElementById('opaque').style.display='block';
   }
  }
}
/*]]>*/
</script>
</body>

</html>

**tedteeter** · 03-11-2014, 10:37 PM

Greetings vwphillips, March 11th 2014

Well the above works magnificently :-) very much appreciated any idea how to speed the process up..would steps work? That is why I felt restricted to setintervals...I'll tweak it a bit an see if I can get more speed out it....Great Work!!! Thanks!

Appreciatively,
Ted

Thread: Quick Question...How Would You Reverse This small Function?

Thread Tools

Search Thread

Quick Question...How Would You Reverse This small Function?

Similar Threads

Need Reverse Date Function

quick question

Amend javascript function for new site (Quick job)

New at php...quick question

Bookmarks

Bookmarks

Posting Permissions