clearInterval - Problem

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • emerson
    #1

    clearInterval - Problem

    To all,

    I posted this question in svg group twice already - and got no answer.

    Q: why does the animation not stop when a height of 10 is reached ?




    <?xml version="1.0"?>
    <svg width="1280" height="800">
    <script type="text/javascript">

    <![CDATA[

    var height = 0;
    var timer1;

    function startAction()
    {
    timer1 = setInterval("do Ipl()",500 )
    }

    function doIpl()
    {
    obj = svgDocument.get ElementById( "rect11" );
    obj.setAttribut e("height", height);
    height = height + 1

    if ( height == 10 )
    {
    stop();
    }

    }

    function stop()
    {
    clearInterval(t imer1);
    alert(height);
    }




    ]]>
    </script>

    <g>

    <rect id="rect12" x="190" y="55" width="100" height="65"
    fill="lightgrey "
    stroke-width="1" stroke="black" />
    <text x="200" y="70" font-size="12">SAG_B CPII</text>

    <rect id="rect11" x="190" y="55" width="100" height="65" fill="pink"
    stroke-width="1" stroke="black" />
    <text x="200" y="70" font-size="12">SAG_B CPII</text>


    <!--*************** *************** *************** *************** *******
    -->


    <rect onclick="startA ction()" x="100" y="450" width="10" height="10"
    fill="pink" stroke-width="1" stroke="black" />
    <text x="110" y="475" text-anchor="middle" >Start</text>

    <rect onclick="stop() " x="65" y="450" width="10" height="10"
    fill="pink" stroke-width="1" stroke="black" />
    <text x="65" y="475" text-anchor="middle" >Stop</text>





    </g>
    </svg>
    Tags: None
    • mscir
      #2
      Re: clearInterval - Problem

      emerson wrote:[color=blue]
      > <?xml version="1.0"?>
      > <svg width="1280" height="800">
      > <script type="text/javascript">
      > <![CDATA[
      > var height = 0;
      > var timer1;
      > function startAction() {
      > timer1 = setInterval("do Ipl()",500 )
      > }
      > function doIpl() {
      > obj = svgDocument.get ElementById( "rect11" );
      > obj.setAttribut e("height", height);
      > height = height + 1
      > if ( height == 10 ) {
      > stop();
      > }
      > }
      > function stop() {
      > clearInterval(t imer1);
      > alert(height);
      > }
      > ]]>
      > </script>
      > <g>[/color]
      <snip>[color=blue]
      > </g>
      > </svg>[/color]

      Does your animation run at all?
      Does it continue to run after height has exceeded 10?
      If it does run, what happens when you click stop?
      Post details.

      The code below worked for me in IE6. I modified it to set the width of a
      textbox in html because I don't know xml or svg.

      I added a line setting newheight to 0 each time you start the code in
      case you want to run it more than once.

      I don't think it's wise to name variables the same as properties so I
      renamed "height" to "newheight" .

      I used document.getEle mentById, window.setInter val, window.clearInt erval.

      Does this code work correctly for you in IE6? If so, maybe make the
      changes I mentioned above and see if that makes any differrence.

      <html>
      <head>
      <script type="text/javascript">
      var newheight;
      var timer1;
      function startAction(){
      newheight = 0;
      timer1 = window.setInter val("doIpl()",5 00);
      }
      function doIpl(){
      myobj = document.getEle mentById("rect1 1");
      //obj.setAttribut e("height", height);
      myobj.width=new height*11;
      newheight += 1;
      if ( newheight == 10 )
      stop();
      }
      function stop(){
      window.clearInt erval(timer1);
      alert('now in function stop(), newheight = '+newheight);
      }
      </script>
      </head>
      <body>
      <input type="text" id="rect12" name="rect12"> rect12
      <p>
      <input type="text" id="rect11" name="rect11"> rect11
      <p>
      <input type="button" onclick="startA ction()" value="Start">
      <p>
      <input type="button" onclick="stop() " value="Stop">
      </body>
      </html>

      Good Luck,
      Mike

        Comment

        Previous template Next
        Working...