Log in

View Full Version : 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?


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



<!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