Solved

decrement a loop

Posted on 2006-11-21
16
1,652 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
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 30

Assisted Solution

by:callrs
callrs earned 200 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 200 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 150 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

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…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

790 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