Typewriter Text

Part 2 : Obtain the Script

The typewriter text script comes in three parts. There is a small piece of HTML, a slightly larger piece of CSS, and of courese the JavaScript.

Let's start by looking at the HTML. As we are going to use an unobtrusive JavaScript, all we need are a script and link tag in the head of the page and a div in the body where the typewriter text is to appear. Here's the code to go in the head of your page:

And here's what you need in the body where you want the typewriter text to appear:

If you like you can put text in that div that will be what appears when JavaScript is disabled.

Next you need to copy the following stylesheet code and save it as tt.css. You will almost certainly need to change the height to suite your script content. You can change whatever other values in the stylesheet you want in order to give the text the appearance you want.

The final step is to copy the following JavaScript and save it as tt.js. You will need to change the content field to contain the content you want it to type, the brk field to indicate which character you want to act as a line break, and resetTime if you want it to reset and start typing again if the person stays on your page for more than a specified number of seconds.