Solved

decrement a loop

Posted on 2006-11-21
16
1,644 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

920 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

16 Experts available now in Live!

Get 1:1 Help Now