decrement a loop

what ive managed to get working is a smooth open effect for a div layer by increment the height of the div layer.

but how can i decrement the height of the loop when user clicks close

<html>
<head>
<title>Test Page</title>
<style type="text/css">
<!--
#mainLayer {
      position:absolute;
      top:40px;
      left:10px;
      width:200px;
      height:200px;
      border:1px black solid;
}

#menuLayer {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:0px;
      border-bottom:1px black solid;
      overflow:hidden;
      background:#cccccc;
      padding:10px;
      visibility:hidden;
}
//-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function toggleMenu(elem) {
      var openHeight = 150;
      var closeHeight = 0;
      var duration = 1000;
      var timeout = 0;

      if(document.getElementById('menuLayer').style.height == openHeight)
            close(closeHeight,duration,timeout);
      else
            open(openHeight,duration,timeout);
}

function open(height,duration,timeout) {
      document.getElementById('menuTools').innerHTML = 'close';
      setTimeout('document.getElementById("menuLayer").style.visibility = "visible";', timeout);

      for(var i = 0; i < height; i++) {
            setTimeout('document.getElementById("menuLayer").style.height = "' + i + 'px";', timeout);
            timeout += duration / height;
      }
}

function close(height,duration,timeout) {
      document.getElementById('menuTools').innerHTML = 'open';
      setTimeout('document.getElementById("menuLayer").style.visibility = "visible";', timeout);

      for(var i = height; i > 0; i--) {
            setTimeout('document.getElementById("menuLayer").style.height = "' + (i-1) + 'px";', timeout);
            timeout += duration / height;
      }
}
//-->
</script>
</head>
<body>
<p><a href="#" id="menuTools" onclick="javascript:toggleMenu(this);">open</a></p>
<div id="mainLayer">
      <div id="menuLayer"></div>
</div>
</body>
</html>
LVL 16
ellandrdAsked:
Who is Participating?
 
tang_tzuchiConnect With a Mentor Commented:
please add below statement to close function....

function close(height,duration,timeout) {
     document.getElementById('menuTools').innerHTML = 'open';
     setTimeout('document.getElementById("menuLayer").style.visibility = "visible";',

timeout);

     for(var i = height; i > 0; i--) {
          setTimeout('document.getElementById("menuLayer").style.height = "' + (i-1) +

'px";', timeout);
          timeout += duration / height;
     }

setTimeout('document.getElementById("menuLayer").style.visibility = "hidden";',

timeout);  ////please add this, it will solve your problem

}

0
 
RoonaanConnect With a Mentor Commented:
After changing your if statement in toggleMenu, this works:

     if(document.getElementById('menuTools').innerHTML.match(/close/i))
          close(openHeight,duration,timeout);
     else
          open(openHeight,duration,timeout);

-r-
0
 
jawahar_prasadCommented:
<html>
<head>
<title>Test Page</title>
<style type="text/css">
<!--
#mainLayer {
     position:absolute;
     top:40px;
     left:10px;
     width:200px;
     height:200px;
     border:1px black solid;
}

#menuLayer {
     position:absolute;
     top:0px;
     left:0px;
     width:100%;
     height:0px;
     border-bottom:1px black solid;
     overflow:hidden;
     background:#cccccc;
     padding:10px;
     visibility:hidden;
}
//-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function toggleMenu(elem) {
     var openHeight = 150;
     var closeHeight = 0;
     var duration = 1000;
     var timeout = 0;

     if(document.getElementById('menuTools').innerHTML.match(/close/i))
          close(openHeight,duration,timeout);
     else
          open(openHeight,duration,timeout);

}

function open(height,duration,timeout) {
     document.getElementById('menuTools').innerHTML = 'close';
     setTimeout('document.getElementById("menuLayer").style.visibility = "visible";',

timeout);

     for(var i = 0; i < height; i++) {
          setTimeout('document.getElementById("menuLayer").style.height = "' + i + 'px";',

timeout);
          timeout += duration / height;
     }
}

function close(height,duration,timeout) {
     document.getElementById('menuTools').innerHTML = 'open';
     setTimeout('document.getElementById("menuLayer").style.visibility = "visible";',

timeout);

     for(var i = height; i > 0; i--) {
          setTimeout('document.getElementById("menuLayer").style.height = "' + (i-1) +

'px";', timeout);
          timeout += duration / height;
     }
}
//-->
</script>
</head>
<body>
<p><a href="#" id="menuTools" onclick="javascript:toggleMenu(this);">open</a></p>
<div id="mainLayer">
     <div id="menuLayer"></div>
</div>
</body>
</html>
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
callrsCommented:
Got it part working: http://www.sendspace.com/file/fgxdje divefade2.htm
0
 
callrsConnect With a Mentor Commented:
This statement: timeout += duration / height;
In the close function gives division by zero. I changed it to something like:
     for(var i = height; i >= 0; i--) {
          setTimeout('document.getElementById("menuLayer").style.height = "' + (i-1) + 'px";', timeout);
          timeout += duration / 150;
     }

Plus some other changes
0
 
ellandrdAuthor Commented:
they all close the div layer, but when it hits height = 0 it then jumps back to height = 150...
0
 
callrsCommented:
Mine doesn't. Try the demo
0
 
ellandrdAuthor Commented:
yes it does the exmaple i just downloaded jumps back to 150 when it closes...
0
 
ellandrdAuthor Commented:
2 secs - i'll put mine on FTP...
0
 
ellandrdAuthor Commented:
0
 
callrsConnect With a Mentor Commented:
One problem is this line which doesn't hide the div that started out as hidden.
    setTimeout('document.getElementById("menuLayer").style.visibility = "visible";', timeout);

You'll see the problem if you start the div out as visible by commenting out this line:
visibility:hidden; -> /* visibility:hidden;*/

Temporary fix: http://www.sendspace.com/file/ya43qs divfade2.htm
0
 
callrsCommented:
I g2g, but this works OK in FF, but a bit jerky in IE: http://www.sendspace.com/file/35o055
0
 
ellandrdAuthor Commented:
lol - its IE i need it perfect for - my users are all IE...
0
 
callrsCommented:
Been working on this since you posted Q_22067951 over an hour ago lol. G2g; Back later today.
0
 
ellandrdAuthor Commented:
tang_tzuchi

it worked!

splitting points guys...

cheers roonaan and callrs for the easier / cleaner code and all the help you provided!

and cheers tang_tzuchi for that last push over the line... ;-)

ellandrd
0
 
ellandrdAuthor Commented:
FINAL SOLUTION THAT WORKS REALLY WELL FOR IE ONLY

<html>
<head>
<title>Test Page</title>
<style type="text/css">
<!--
#mainLayer {
      position:absolute;
      top:0px;
      left:10px;
      width:200px;
      height:200px;
      border:1px black solid;
}

#menuLayer {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:0px;
      border-bottom:1px black solid;
      overflow:hidden;
      background:#cccccc;
      padding:10px;
      visibility:hidden;
}
//-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function toggleMenu()
{
      var openHeight = 150;
      var closeHeight = 0;
      var duration = 1000;
      var timeout = 0;

       if(document.getElementById('menuLayer').style.height == (openHeight+"px"))
        {
              close(openHeight,duration,timeout);
           }
           else
        {
              open(openHeight,duration,timeout);
      }
}

function open(height,duration,timeout)
{
      document.getElementById('menuTools').innerHTML = 'close';
      setTimeout('document.getElementById("menuLayer").style.visibility = "visible";', timeout);
      
      for(var i = 0; i < height+1; i++)
      {
            setTimeout('document.getElementById("menuLayer").style.height = "' + i + 'px";', timeout);
            timeout += duration / height;
      }
}

function close(height,duration,timeout)
{
     document.getElementById('menuTools').innerHTML = 'open';
     setTimeout('document.getElementById("menuLayer").style.visibility = "visible";',timeout);

     for(var i = height; i > 0; i--)
     {
          setTimeout('document.getElementById("menuLayer").style.height = "' + (i-1) +'px";', timeout);
          timeout += duration / height;
     }
      setTimeout('document.getElementById("menuLayer").style.visibility = "hidden";',timeout);
}
//-->
</script>
</head>
<body>
<div id="mainLayer">
      <div id="menuLayer"></div>
</div>
<p style="margin-top:200px;"><a href="#" id="menuTools" onclick="javascript:toggleMenu();return false;">open</a></p>
</body>
</html>
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.

All Courses

From novice to tech pro — start learning today.