jQuery Typewriter Revisited

Updated Version

If you are looking for a version of the jQuery Typewriter that is compatible with placing HTML inside the text, you can find it in my latest post about the ‘HTML Compatible jQuery Typewriter‘.

I wanted to improve on my last jQuery typewriter in a couple of ways, but the main way was how it took it’s information. Before I used the title attribute of a hyperlink. This time I’ve decided to go for a list element as it is a lot more versitile.

The above is what you can end up with. You can use it where ever you like to do pretty much anything, but I’ve made a feature out of it on the demo page. Why? Well because I’m doing science & I’m still alive… Ahem. Sorry about that.

Typewriter HTML

Okay. First let’s get to some HTML. It’s really simple. All you need is a list element with the text you want to be used in the typewriter. Each <li> will hold one line to be written inside the typewriter’s caption box. Your HTML could look like this:

Obviously your text would make a lot more sense, but you get the idea.

You also need an area for your typewriter to type in. It can be anything you like, although I do recommend a block element such as a <div> in my case this element will have the id of showCaption

Typewriter CSS

Next we need some CSS. There is only a little bit that is essential, the rest is up to you. As always I’m no designer so I’m only going to provide the bare minimum CSS required for the code to work.

Yes. That really is all the CSS you need. Now let’s move onto the tricky part. The jQuery.

Typewriter jQuery

Obviously, because this is jQuery, you need jQuery attached to your page. Assuming you’ve done that let’s take a look at the full code before we disect it.

As always we have a DOM ready. I’m going to assume you are familiar with that & just move straight on to the next part.

We first set some variables. ch is the character we have reached in the sentence. It obviously starts at zero. item is the list item we have reached. Again starts at zero. items is the total number of list items. time is the delay before the typewriter bursts into life on page load. delay is the delay between each letter being typed. Finally wait is the length of time to wait before typing the next list item.

This is our first function. What it does is trigger the typing of a list item, but first it checks to see if we need to move on to the next item, or if we are just typing another letter in the same list item. So we check to see if item (our current list item) is less than the total number of list items. If this is true we grab the text of the item using jQuery’s EQ selector & the current list item number. Then we fire off our typing function handing it the text we just collected. Setting the text to null is to help prevent a memory leak in earlier versions of IE. Then we set up a timeout to run this function again in the time we set earlier.

If we are out of list items we destroy out timeout to prevent any problems.

This is our typing function. We set our time back to our delay length just in case it had been altered for pausing (such as on page load or the end of a list item). Now we replace the HTML in our caption area with the text we collected earlier cut from the first character to whatever the variable ch is up to. We also increment ch at the same time to save space. Now we check if ch is longer than the current list item. If it is we have finished that item so we increment the variable item, set ch back to zero and change time to our end of item wait time.

This simply fires the first run of our function. Without this the typewriter will never be triggered.

I hope that all makes sense. It’s amazing how complicated making a jQuery typewriter really is. It’s not so much the code, it’s more the fact that it can get confusing because of the timeouts. As always though if you have any queries, or difficulties with the code in this tutorial please let me know & I’ll try to help you out as soon as I can.

If you haven’t guessed yet, lyrics are © Valve. Portal & Portal 2.

JavascriptjQueryTypewriter