Solved

decrement a loop

Posted on 2006-11-21
16
1,640 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
16 Comments
 
LVL 49

Assisted Solution

by:Roonaan
Roonaan earned 150 total points
Comment Utility
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
Comment Utility
<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
Comment Utility
Got it part working: http://www.sendspace.com/file/fgxdje divefade2.htm
0
 
LVL 30

Assisted Solution

by:callrs
callrs earned 200 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Mine doesn't. Try the demo
0
 
LVL 16

Author Comment

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

Author Comment

by:ellandrd
Comment Utility
2 secs - i'll put mine on FTP...
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 16

Author Comment

by:ellandrd
Comment Utility
0
 
LVL 30

Assisted Solution

by:callrs
callrs earned 200 total points
Comment Utility
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
Comment Utility
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
Comment Utility
lol - its IE i need it perfect for - my users are all IE...
0
 
LVL 30

Expert Comment

by:callrs
Comment Utility
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 150 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now