jQuery Typewriter Revisited

/ jQuery / by Paul Robinson / 0 Comments

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.

23 Comments

Author’s gravatar

Thank you! I’m going to try it.

I have a related question. Could you write a post with some general rules about adapting jQuery to WordPress?

I know there are various tips elsewhere, but they’re not as clearly explained as it could be done by you. 😉

Reply
Author’s gravatar author

Thanks Sylwia.

I’m not sure what you mean by adapting jQuery to WordPress? Normally there is only one rule when using jQuery in WordPress & that is to remember it runs in no conflict mode by default meaning $() doesn’t work but jQuery() does.

Author’s gravatar

Thanks for the great code 😉 Here is something for that DOS cursor, but in the un-revisited version. I just haven’t fully visited the revisit yet.

Reply
Author’s gravatar author

Thanks for sharing that. 🙂

Looking forward to seeing the revised version when you get around to it. 😉

Author’s gravatar

Is there any way to put the output between tags so the text can be styled a bit more? Was specifically thinking about a css3 blinking cursor after the text.

Thanks for the great tutorial by the way!

Reply
Author’s gravatar author

Hi Aaron,

Maybe you could just wrap a element of some sort around the substr like this:

Is that what you meant or have I gotten the wrong end of the stick?

Author’s gravatar

Starting with your suggestion I did a bit of tinkering and think I figured it out. Sorry for the cryptic question, I’m pretty hopeless with javascript. Thanks!

Reply
Author’s gravatar author

No problem Aaron. Javascript is one of those languages I love to hate, lol.

Author’s gravatar

Peguei seu código, mas como queria que ele repetisse fiz uma pequena modificação, então acrescentei uma nova variável “repeat”, e quando ela está “1”, o texto fica repetindo.

Abraço!

Reply
Author’s gravatar

O código não foi todo, me pede por e-mail que te mando o código correto ok?

Abraço!

Author’s gravatar author

Hi Guilherme,

If you can send it to admin[at]return-true[dot]com I’ll replace the code that got garbled in your comment with the code you send me. 😉

Thanks.

Author’s gravatar

Hello,

Great script here – thanks.. But how could I alter this to work with <strong> words within the text?

Reply
Author’s gravatar author

Hi Nick,

I’m not sure how you could do that since during the typing you’d end up with only an opening tag for a little bit of the typing. I’ll keep looking for a solution though as it would be great if you could use HTML tags within the text.

Author’s gravatar

Hi, this effect along with the Twitter Stream code is exactly the kind of widget I was looking for. I’ve managed to implement the two together on my site (it’s a work in progress!!). Now, like Nick, I’d love to figure out how to format the text… do you have any idea how, or even if that would be possible?

Reply
Author’s gravatar author

Hi Amal,

Well I said to Nick that it might not be possible, but after a bit of thinking I may have come up with something. Keep checking back & I should have something by tomorrow. I’ll make it a new post though as it might take some explaining.

Author’s gravatar

Oh wow, that’s fantastic – I’ll be back for sure!
Thanks for your time and all the fantastic resources on your website! I’ll definitely donate a little something 🙂

Reply
Author’s gravatar author

Thanks Amal,

Just gotten done with the tutorial now, you can check it out here.

Anything you can donate is great, every little helps. If you don’t like to donate you could always buy me a present from my Amazon wishlist. 😉

Author’s gravatar

If I have only 1 , li tag, then the effect is seen only once and it stops, I want it to run continuously. Can you please help ? its bit urgent. Thanks a ton.

Reply
Author’s gravatar author

Hi,

you’d need to tell it to repeat once it runs out of li tags. You could try:

starting from line 08 of my original code. That should reset the counter & start the loop again.

Author’s gravatar

Hello Paul,
hey do you mind if i ask you for some phone number so that i could comfortably discuss my subject with you. I actually needed some technical info regarding jquery & css stuff …wont take ur time much.If not fine, then Id discuss it here only.
Thx in advance

Reply
Author’s gravatar author

Sorry I can’t give out my Phone number except to trusted clients. Feel free to send an email via the contact form though & I’ll try to help however I can.

Author’s gravatar

Great tutorial, thank you, and thanks Guilherme for the looping

Reply
Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more