views:

111

answers:

6

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

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

It would seem, after long debugging, that the subtraction in JavaScript just isn't working. Basically, it seems, that this line isn't working: i = height - 4;, the value i stays the same.

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <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>

EDIT: tags were producing HTML, had to change > to .

A: 

It honestly looks fine, but you'd get better milage out of learning to use jQuery to do this. (press run).

dlamblin
+1  A: 

height = parseInt(document.getElementById("testDiv").offsetHeight);

This is probably not the problem, but you should always specify the base when using parseInt. It will interpret strings as base 8 if they start with 0

parseInt("011")     // 9
parseInt("011", 10) // 11
nickf
+1  A: 

Your problem is that when you do increasing=false; you don't call pause(30) again.

Just change your code like this :

if( height >= 304 ) { increasing = false; pause(30); }

this will work, I tested it :)

Edit: As stated by dlamblin, these kind of thing are easily done using JQuery, if your goal is the animation itself and not "how" it works, you should consider JQuery.

Soufiane Hassou
+1  A: 

It appears from your code, that once the DIV reaches the maximum height, "increasing" is set to false, but you don't call pause() again, so testFunction() never actually fires with "increasing" set to false.

richardtallent
A: 

I have changed your code and this works fine for me

Replace

height = parseInt(document.getElementById("testDiv").offsetHeight);

with

height = parseInt(document.getElementById("testDiv").style.height , 10);

and

if( height >= 304 ) {
                increasing = false;
        }

with

if( height >= 304 ) {
                increasing = false;
                pause(30);
        }

if( height <= 104 ) {
                increasing = true;
        }

with

if( height <= 104 ) {
                increasing = true;
                pause(30);
        }

Working Demo

rahul
A: 

You can also combine the IF loop and ELSE loop. Use:
i = height + (increasing) ? 4 : -4;
and then later on: `if (height<105 || height>303) increasing = !increasing;'

This way if you change a parameter, such as rate, then you only need to change it once.
--Dave

the Hampster
Thank you everyone for your answers, I think I'm going to use jQuery :)
ehehhh