ansaurus

Question

Answer 1

A:

Try removing all the nodes from the textbox element then running your script again with different text:

([edit] here's a full html file which should work; try starting from there)

<html>
<head>
<title>Test</title>
<script type="text/javascript">
var a = 0, speed = 85, text = [], story = "bla bla... text";
function tickertext(){
  obj = document.getElementById("textbox");
  text[a] = document.createTextNode(story.charAt(a));
  obj.appendChild(text[a]);
  a++;
  a != story.length && setTimeout(function(){tickertext()}, speed)
}
/*if(window.addEventListener) {
window.addEventListener("click", tickertext, false)}
else{window.attachEvent && window.attachEvent("onclick", tickertext)};*/
function clrtext(){
var tbox = document.getElementById("textbox");

if ( tbox.hasChildNodes() )
{
    while ( tbox.childNodes.length >= 1 )
    {
        tbox.removeChild( tbox.firstChild );       
    } 
}
a=0;
}
</script>
</head>
<body>
<button onClick="tickertext()">Next</button>
<button onClick="clrtext()">Clear</button>

  <table>
    <tr>
      <td>
        <div id="image">
          <img src="img/background1.jpg" width="600" height="400"><br>
          <br>
          <br>
          <p id="textbox" style="padding-left:25px; width:550px;"><br></p>
          <canvas id="mycanvas" width="600" height="400"></canvas>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

(source for clearing child nodes)

NickAldwin 2010-07-29 19:24:49

Thanks for your answer but unfortunately adding this piece of code to my javascript file removes not only the text (I'm not even able to start the text-animation anymore) but also the canvas I put under the text.

hdr 2010-07-29 19:50:53

@hdr I don't see why it would remove the canvas...it's not a child of textbox in the HTML you show above.

NickAldwin 2010-07-29 20:59:21

I'm not too sure myself. Maybe it would help if I tell you what extra plugins I'm using... maybe there is a conflict.I am using "scriptaculous" with another button to hide the text and the canvas to make only the background visible then there is also jquery and prototype (needed for scriptaculous).The code for the other buttons:<button onClick="Effect.Fade('textbox');Effect.Fade('mycanvas')">Hide</button><button onClick="Effect.Appear('textbox');Effect.Appear('mycanvas')">Show</button>But I can't imagine that this would influence the animation... or does it?

hdr 2010-07-29 21:14:18

ps: sorry of course I mean the canvas (and it's disappearing) and not "the animation"

hdr 2010-07-29 21:40:43

I tried running this, and to get it to work properly I had to temporarily comment out the part where you make it trigger the ticker upon window click. But see my edit. You might be able to start from there.

NickAldwin 2010-07-30 13:25:39

Answer 2

A:

Great, many thanks! Unfortunately I cannot mark this as answered because I asked this while being unregistered and the whole thing timed out over night but it works and I'm happy about it. :)

hdr 2010-07-30 14:52:31

ansaurus

tags:

views:

answers:

javascript text animation and replacing

related questions