Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expanding Div Animation w/ setTimeout

    I want to create a div that will increase its height attribute by 200 pixels when a button is pressed. The problem is that I want it to look as though it is animated. I've started with a button and a div that's 300px wide and 100px high. When the button is clicked a function increases the height value then setTimeout launches the same function after 30 milliseconds again and again until the div has a height of 300px. Thanks for your help! Here's the css:

    Code:
    #move
    { 
    position: absolute;
    background-color: #000;
    left: 40px;
    top: 40px;
    width: 300px;
    height: 100px;
    }
    and also in the head is the function:

    Code:
    function expand()
    {
    var x = x++;
    document.getElementById("move").style.height=100+x+"px";
    if (x>200) { 
    clearTimeout(t);
    var t = 0;}
    else { 
    var t = setTimeout("expand()",30); }
    }
    and in the body:

    Code:
    <div id="move"></div>
    <button onClick="expand()">test</button>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,721
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there Templar,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    <script type="text/javascript">
    <!--
      var x=100;
    function expand() {
       document.getElementById("move").style.height=x+'px';
    if(x>200) { 
       clearTimeout(t);
       return;
    }
       x++;
    t=setTimeout('expand()',30); 
     }
    //-->
    </script>
    coothead

  • #3
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, your script works perfectly!
    (though I don't see why mine didn't work too)

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,721
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there Templar,
    though I don't see why mine didn't work too
    If you are having problems with a script make use of the 'alert' it may help you pinpoint problems...
    Code:
    <script type="text/javascript">
    <!--
      var x=x++;
      alert(x);
    //-->
    </script>
    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •