TypewriterSeptember 9, 2011

Type Messages

Introduction

The Typewriter object provides a type() method which "types" the text onto a web page. The millisecond pauses before and after each character typed can be specified in a timing array to make the typing appear more natural. When the typing is complete, a function you specify can be executed or the browser can be redirected to another url.

This version does not use any other outside JavaScript libraries or frameworks. There is another version of this program thats intended to be used as a jQuery addon named typeThis.

Demo

You can test the typewriter function by entering your html text into the input box below and pressing the "Type It" button.

Examples

Example 1

The following is the simplest use of the typewriter program. It types out "This is a test" into the document element with the id of "typewriter_display".

Copy

<script>(new Typewriter('typewriter_display').type("This is a test");</script>

Example 2

The next example is just like the one above with the additional functionality of redirecting the browser to the url "http://company.com/target/path" after it is done typing and pausing for 5 seconds. You could have also specified a function to run instead of the url to redirect to.

Copy

<script>
var ondone = 'http://company.com/target/path';
var t = new Typewriter('typewriter_display',ondone);
t.ondone_pause = 5000;	// milliseconds
t.type("This is a test");
</script>

Example 3

The following example is the script that runs the first demo above.

Copy

<script></script>