DHTML Code, JavaScript Code, Random Musings

DHTML Text Typing Effect

Use this simple function to achieve the effect of having text typed out onto your website. You can speed it up or slow it down by changing the number of millisecond of the interval.

Just replace the contents of this div with your own text


<div id="toType">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tempus elementum tellus. Vestibulum mattis condimentum velit. Proin nonummy massa nec neque. In enim purus, vestibulum a, interdum sed, lacinia sit amet, elit. Donec nonummy bibendum elit. Praesent iaculis metus vel augue.</div>

<script type="text/javascript">
interval = 80; // milliseconds to wait between typing characters

if(document.getElementById) {
	typeTextHolder = document.getElementById("toType");
	if(typeTextHolder.innerHTML) {
		typingBuffer = ""; // prevents stripping spaces
		i = 0;
		typeText = typeTextHolder.innerHTML;
		typeTextHolder.innerHTML = "";
		type();
	}
}

function type() {
	regex = /<(&#91;^<&#93;)*>/; //html markup to remove
	typeText = typeText.replace(regex, ""); 
	if(i < typeText.length) {
		typingBuffer += typeText.charAt(i);
		typeTextHolder.innerHTML = typingBuffer;
		i++;
		setTimeout("type()", interval);
	}
}
</script>
Share

2 Comments

  1. use "if(i" instead of "if(it"….

    maybe think about converting code into HTML chars….

    regards, zara

Leave a Reply

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

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image