Using jQuery To Make The Typewriter Effect

Posted 1 week, 1 day ago at 2:16 pm. 3 comments

Ok, so it’s an old effect that has been done in javascript probably a million times, but I’ve seen it used on a few sites quite effectively. By typewriter effect I mean the sentence types itself onto the screen rather than just appearing.

It’s really simple so let’s get going. If you want to follow along you’ll need a blank html page with jQuery attached in the head. You will also need two divs on the page one with an id of ‘images’, another with the id of ‘caption’. The caption to show will be held in the links title attribute.

Ok let’s get on with the jQuery. First we will make the showCaption() function that will tell the code what caption it should show and then tell it to do it using the typing effect.

var char = 0;
var caption = "";
var standby;
 
function showCaption(obj) {
	caption = obj.attr('title');
	if(caption)
		type();
}

Nearly forgot the three variables in the start of the code must be set before anything else. The showCaption() is quite simple. We pass through the object we wish to take the caption from, we assign the caption to the variable we made called caption using the attr() function. We then check to make sure caption wasn’t empty if it wasn’t we run type().

function hideCaption(obj) {
	caption = "";
	char = 0;
	$('#caption').html("");
}

hideCaption() is just as simple. We will show the caption on mouseover and hide it on mouseout. All it does is clear the caption and set char counter we use later to 0. Then it clears the caption box.

function type() {	
	$('#caption').html(caption.substr(0, char++));
	if(char < caption.length+1)
		setTimeout("type()", 28);
	else {
		char = 0;
		caption = "";
	}	
}

This is the main animation function. All it really does is use substr to cut the caption one letter further each time using a counter variable named char. So if the caption is ‘I am an image’ it would show ‘I’ then ‘I ‘ then ‘I a’ and so on until it completes the whole caption. It writes one letter ever 28 milliseconds which is quite a good speed but it can be slowed down by increasing the number. Remember there’s 1000 milliseconds per second although methinks 1 second would be extremely slow, lol.

$(function() {
	$('#images a').each(function() {
		$(this).mouseover(function() {
			showCaption($(this));
		}).mouseout(function() {
			hideCaption($(this));
		})
	});
});

This part of the code just makes any links in the images div have the typewriter effect applied to them on mouse over and removes the caption on mouse out. I called the div images because this effect is usually used for images but it can be used on anything that you can apply a mouse over to.

Ok so that’s it. You should now have a working typewriter effect. It could be improved and over time I might add a few things such as the flashing underscore that a dos prompt usually has.

Anyway here is an example of the code working:

The jumping is caused by Wordpress so don’t worry, as long as your css styling is correct it shouldn’t cause any problems.

Hope you enjoyed this tutorial. Any questions please just leave a comment.

My Computer Hardware

Posted 2 weeks, 1 day ago at 1:52 pm. 2 comments

I dunno why but I’ve never made a post about what hardware I have in my computer. This being a tech & coding blog I thought I had better share with you guys & gals what I actually run under the hood of my little beast.

I took some piccies too but first let’s start with what I am running:

• ASUS P5N32-E SLI Motherboard
• Intel Core 2 Quad Q6600 2.4Ghz - Running cool and stable @ 2.6Ghz
• 1x 2GB DDR2 800Mhz @ 12-4-4-4-T2 I forget which brand it is
• BFG GeForce 8800GTS 640MB OC
• Creative X-Fi XtremeMusic
• Leadtek/Winfast DTV2000 H hybrid capture card
• 3 HDDs
  • 1 Western Digital 340GB
  • 1 Seagate 300GB
  • 1 Maxtor 300GB
• Asus 19″ Monitor @ 1440×900x75Hz
• Samsung HDTV 1080i Connected thru secondary DVI to HDMI
• 5.1 Creative Surround Sound Speakers
• Samsung Lightscribe DVD-R/RW DL
• Pioneer 111D DVD-R/RW DL

I think that’s it… I did have Corsair ram but when I was having all the troubles I swapped it with my sisters ram to make sure it wasn’t causing the problems. Turns out it wasn’t but I forgot to swap it back and the latency is actually better.

This post was really just for a little bit of fun on my part. Coming up are some pics of the inside of my Thermaltake Kandalf case. If you have some nice computer hardware why not leave a comment and link to a pic.