0

I thought I'd write a simple script to animate my webpage a little.

The basic idea was to make a div grow bigger, when I push a button once and then shrink to it's original size, when I push it again. I handled the growing part well, but I can't get it to shrink again.

I'm including a complete example, could you help me fix it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Test</title>
        <meta http-equiv="Content-Language" content="Estonian" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
    </head>

    <body>
        <script type="text/javascript">
          var i;
          var increasing = new Boolean("true");
          var height;

          function testFunction() {
              height = parseInt(document.getElementById("testDiv").offsetHeight);
              if( increasing == true ) {
                  i = height + 4;
                  document.getElementById("testDiv").style.height = i + "px";
                  if( height >= 304 ) {
                      increasing = false;
                  }
                  else {
                      pause(30);
                  }
              }
              else {
                  i = height - 4;
                  document.getElementById("testDiv").style.height = i + "px";
                  if( height <= 104 ) {
                      increasing = true;
                  }
                  else {
                      pause(30);
                  }
              }
          }
          function pause(ms) {
              setTimeout("testFunction()", ms);
          } 
        </script>
        <button id="button" type="button" onclick="testFunction();">Do it!</button.
        <div id="testDiv" style="border: 2px solid black; width: 400px; height: 100px; text-align: center;">
           Hello!
        </div>
    </body>

</html>
3
  • Don't do this it is the root of all evil!
    – JonH
    Dec 2, 2009 at 13:31
  • 1
    Maybe you are doing this yourself as a learning exercise, but did you know there are libraries like Scriptaulous (script.aculo.us) which can do this?
    – Ben James
    Dec 2, 2009 at 13:35
  • This could be a typo but: Do it!</button. needs to be properly closed as </button>
    – Jonno_FTW
    Dec 2, 2009 at 14:01

1 Answer 1

2

Use a standard library like jQuery to do this, don't do it yourself as it won't be cross-browser for sure.

With jQuery, you can do things like this:

$("#div-id").animate({"height": 300}, 1000);

That'll change the div height to 300 px in 1000 ms = 1 second.

1
  • 1
    Thank you, that seems to be the most reasonable solution.
    – ehehhh
    Dec 2, 2009 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.