super fast js typewriter effect

FraserBrown · Apr 1, 2001

i'd like to use a typewriter effect to display large ammounts of text but haven't been able to get it to type quickly enough. i thought one solution would be to break the text up into an array and print each word out instead of character by character. here's the basic idea that i've tried.

var text_string = "blah blah blah blah blah blah blah blah blah blah blah blah blah ";
var text_array = text_string.split(" &quot

;

function typeWriter()
{
for (loop=0; loop < text_array.length; loop++)
{
document.writeln(text_array[loop] + " &quot

;
setTimeout('typeWriter()',50);
}
}

can anyone tell me why it isn't working or how i might do it better?

also, is this possible to print out to the page in a table or layer and not in a textarea?

thanks

grega · Apr 2, 2001

I've just been messing about with this, but you can try it out. It may at least give you some ideas!

Greg.

Code:

<html>
<head>
<title>Typewriter</title>
<script>

var textString = new String(&quot;This is an example text string to be printed in typewriter mode.&quot;); 

function typeWriter(charNo) { 
  var nextCall;
  // set the value of the textarea
  document.form1.area1.value=textString.substr(0,charNo);
  charNo++;
  nextCall=&quot;typeWriter(&quot; + charNo + &quot;)&quot;;
  setTimeout(nextCall,50)
} 

</script>
</head>
<body>
<a href=&quot;javascript:typeWriter(1);&quot;>Start Typewriter</a><br><br>
<form name=&quot;form1&quot;>
<textarea name=&quot;area1&quot; rows=&quot;5&quot; cols=&quot;50&quot;></textarea>
</form>
</body>
</html>

FraserBrown · Apr 2, 2001

thanks for your interest greg. my problem is that i want to display very large amounts of text... as it is, it's way too slow. any ideas on how i might print more than one char at a time?

cheers

grega · Apr 3, 2001

I'll have a think and maybe someone else can help. The code above is really only for small strings and as such is quite inefficient. How much text are you talking about here? When you say "superfast", I assume you want the text to appear on screen faster than the user can read it?

Greg.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

super fast js typewriter effect

FraserBrown

IS-IT--Management

grega

Programmer

FraserBrown

IS-IT--Management

grega

Programmer

Similar threads

Part and Inventory Search

Sponsor