Text Effects : Type Text

By Ilya Gerasimenko on Jan 28, 2008

General

Use this script to spell out a string of text, letter by letter. You can add to existing text, or replace it completely. You can even use it to repeat text, if you like. Easy to implement.

» Click here to replace this text …

Can be used in several… » (click here to read more)

» Click (and keep clicking) here to retype this text over and over.

Notes

Created by: Ilya Gerasimenko
Web Site: http://www.gerasimenko.com
Posted: January 28, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: typeText.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Ilya Gerasimenko | http://www.gerasimenko.com */

// Text to type
var stringOfText1 = ‘… with a new string of text. Convenient for those “read more…” links.’;
var stringOfText2 = ‘ spots on the same page; the animations will be consecutive.’;
var stringOfText3 = ‘Click (and keep clicking) here to retype this text over and over. You don’t have to, but you can.’;

// Animation
var textHolder;
var textTarget;
var letter;
var index;
var printing;
var waiting = false;

// Start

spellString = function (oId,str) {
 	if (waiting == false) {
  		index = 0;
  		waiting = true;
  		textTarget = document.getElementById(oId);
  		textTarget.innerHTML = ”;
  		textHolder = str.split(”);
  		sendToPrint();
 	}
}

// Animation

sendToPrint = function () {
 	if (index<textHolder.length) {
 		 printing = window.setTimeout(
    	 function () {
 					  getLetter(textTarget,index); 
 			},	1);
 	} else {
 		 waiting = false;
 	}
}

getLetter = function (textTarget,index) {
 	letter = document.createTextNode(textHolder[index]);
 	if (letter.value == ‘\’) letter.value = ”;
 	printLetter(textTarget,letter);
}

printLetter = function (textTarget,letter) {
 	textTarget.appendChild(letter);
	 window.clearTimeout(printing);
	 index++;
	 sendToPrint();
}


// Created by: Simon Willison | http://simon.incutio.com/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != ‘function’) {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
	
addLoadEvent(	function () {
		document.getElementById(‘clickhere1’).onclick = function () {
		  		spellString(‘typehere1’,stringOfText1);
  		}
		document.getElementById(‘clickhere2’).onclick = function () {
				  spellString(‘typehere2’,stringOfText2);
  		}
		document.getElementById(‘keepclicking’).onclick = function () {
		  		spellString(‘keepclicking’,stringOfText3);
  		}
  }
);

Head

Paste this code into the HEAD section of your HTML document.


<script type=”text/javascript” src=”typeText.js”></script>

Body

Paste this code into the BODY section of your HTML document


<p id=”typehere1″><span id=”clickhere1″>Click here to <em>replace</em> this text …</span></p>
<p>Can be used in several<span id=”typehere2″>… <span id=”clickhere2″>(click here to <em>read more</em>)</span></span></p>
<p id=”keepclicking”>Click (and keep clicking) here to <em>retype this text over and over</em>.</p>