?
Solved

decrement a loop

Posted on 2006-11-21
16
Medium Priority
?
1,668 Views
Last Modified: 2008-01-09
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>
0
Comment
Question by:ellandrd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
16 Comments
 
LVL 49

Assisted Solution

by:Roonaan
Roonaan earned 600 total points
ID: 17986466
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
 
LVL 8

Expert Comment

by:jawahar_prasad
ID: 17986488
<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
 
LVL 30

Expert Comment

by:callrs
ID: 17986491
Got it part working: http://www.sendspace.com/file/fgxdje divefade2.htm
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Assisted Solution

by:callrs
callrs earned 800 total points
ID: 17986512
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
 
LVL 16

Author Comment

by:ellandrd
ID: 17986525
they all close the div layer, but when it hits height = 0 it then jumps back to height = 150...
0
 
LVL 30

Expert Comment

by:callrs
ID: 17986531
Mine doesn't. Try the demo
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17986536
yes it does the exmaple i just downloaded jumps back to 150 when it closes...
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17986537
2 secs - i'll put mine on FTP...
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17986591
0
 
LVL 30

Assisted Solution

by:callrs
callrs earned 800 total points
ID: 17986601
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
 
LVL 30

Expert Comment

by:callrs
ID: 17986652
I g2g, but this works OK in FF, but a bit jerky in IE: http://www.sendspace.com/file/35o055
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17986678
lol - its IE i need it perfect for - my users are all IE...
0
 
LVL 30

Expert Comment

by:callrs
ID: 17986710
Been working on this since you posted Q_22067951 over an hour ago lol. G2g; Back later today.
0
 
LVL 3

Accepted Solution

by:
tang_tzuchi earned 600 total points
ID: 17986715
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
 
LVL 16

Author Comment

by:ellandrd
ID: 17986727
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
 
LVL 16

Author Comment

by:ellandrd
ID: 17986744
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

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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

752 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