SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setInterval question

    Hello,

    I'm trying to use setInterval to make a movement effect for a div. Here's the code:
    Code:
    onload=function() {
      nowIDheight=document.getElementById("t").style.height;
      nowIDheight=nowIDheight.substr(0, nowIDheight.length-2); //to remove px
      for (i=0; i<=100; i++)
        setInterval(function(){document.getElementById("t").style.height=i+"px"}, 1000);
    }
    ...
    <div style="height: 100px;border: 1px solid red" id="t">bla</div>
    But that doesn't do the trick.
    What's wrong here?
    /(bb|[^b]{2})/ - Shakespeare.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Experiment with this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>animateHeight</title>
    <style type='text/css'>
    #div1 {
      position: absolute;
      width: 120px;
      border: 1px solid red;
    }
    #dnBtn, #upBtn {
      border-bottom: 1px dotted red;
      cursor: pointer;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      document.getElementById('div1').style.height = '30px';
      document.getElementById('dnBtn').onclick = function() {
        animateHeight('div1', 300, 4);
      };
      document.getElementById('upBtn').onclick = function() {
        animateHeight('div1', 30, -4);
      };
    }
    function animateHeight(sId, hTarget, hInc)
    {
      var ele = document.getElementById(sId);
      var h = parseInt(ele.style.height) + hInc;
      if ((hInc < 0 && h > hTarget) || (hInc > 0 && h < hTarget)) {
        setTimeout("animateHeight('" + sId + "'," + hTarget + "," + hInc + ")", 10);
      }
      else h = hTarget;
      ele.style.height = h + 'px';
    }
    </script>
    </head>
    <body>
    <div id="div1"><span id='dnBtn'>Down</span> &nbsp; | &nbsp; <span id='upBtn'>Up</span></div>
    </body>
    </html>


Bookmarks

Posting Permissions

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