We help IT Professionals succeed at work.

Use setTimout / setInterval to 'slide' DIV

Iain Hosking
Iain Hosking asked
on
2,759 Views
Last Modified: 2010-05-18
Hi all,
I've always had trouble getting my head around the setTimeout / setInterval functions in JavaScript. In the example below, I'm trying to create a box that can have the content portion slide down to appear, and slide up to the header to disappear. Actually, it's the same effect when using the left-hand tool boxes in Windows Explorer (on XP).

I can make the box disappear, but can't make it slide... and I know it's because there are issues with my implementation of setTimeout...

here's the code:

#### slide.htm ######################################

<html>
<head>
      <style>
            body{font-family:Verdana; font-size:0.8em}
            div.box{position:relative; width:400px; height:200px; background-color:#F1FCFE; border:1px solid #17A2C2}
            div.box h1{margin-top:0px; margin-bottom:0px; height:26px; padding-top:4px; padding-left:8px; font-size:1em; color:#FFFFFF; background-color:#6CACD9}
            div.box a{margin-left:20px}
            div.box h1 span{display:none}
            div.box p{padding:6px}
      </style>
      <script>
            function slideUp(objCross){
                  var objBox = objCross.parentNode.parentNode;
                  var objHead = objCross.parentNode;
                  var objCont = objCross.parentNode.nextSibling;
                  var objOrig = objCross.parentNode.lastChild;
                  
                  objCont.style.display = 'none';
                  var intBox = objBox.offsetHeight;
                  var intHead = objHead.offsetHeight;
                  objOrig.appendChild(document.createTextNode(intBox));
                  var x = intBox;
                  while(x > intHead){
                        setTimeout(function(){objBox.style.height = x}, 200);
                        x--;
                  }
            }

            function slideDown(objCross){
                  var objBox = objCross.parentNode.parentNode;
                  var objHead = objCross.parentNode;
                  var objCont = objCross.parentNode.nextSibling;
                  var objOrig = objCross.parentNode.lastChild;
                  
                  var intBox = objOrig.firstChild.nodeValue;
                  var intHead = objHead.offsetHeight;
                  objOrig.removeChild(objOrig.firstChild);
                  var x = 0;
                  while(x < intBox){
                        setTimeout(function(){objBox.style.height = x}, 200);
                        x++;
                  }
                  objCont.style.display = 'block';
            }
      </script>
</head>
<body>
      <div class="box">
            <h1>The Heading
                  <a href="#" onclick="slideUp(this)">U</a>
                  <a href="#" onclick="slideDown(this)">D</a>
                  <span class="oHeight"></span>
            </h1>
            <div class="contents">
                  <p>A paragraph of text</p>
            </div>
      </div>
</body>
</html>

#################################################
Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Spot on, thanks Basilisci.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
And do not forget to return false on the onClick
<a href="#" onclick="slideUp(this); return false">U</a>
<a href="#" onclick="slideDown(this); return false">D</a>

to stop the page from reloading
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.