javascript text animation and replacing

Question

I have the following problem:

I try to animate text so that it shows up letter by letter. This works for me like this:

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)};

the html part looks like this:

<button onClick="tickertext()">Next</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>

What I get is some text (in this case coming from a variable but in the end it is supposed to come from a xml file) that is displayed bit by bit. The goal is to start displaying the first part of the text after clicking on the button and then remove that whole text again after clicking on the button again and replacing it with other text that gets animated in the same way as the first part. That should be possible over and over again with different pieces of text (it's planned to get that text all from one xml file one part after the other).

The script you see here was pre-made and I am actually not that good with javascript. I tried some stuff with jquery and just normal javascript to remove the text again but it just didn't work out for me... but then again my knowledge about javascript is limited.

I would be happy about any solution.

Answer 1

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 )

javascript text animation and replacing

Question

1 answers

solution1
0 2010-07-29 19:24:49

javascript text animation and replacing

Question

1 answers

solution1 0 2010-07-29 19:24:49

solution1
0 2010-07-29 19:24:49