Thread: Simple JavaScript Typing Text onClick

With this JavaScript typing text script, you can use to spell out a string of text, letter by letter. This JavaScript code example provides 3 ways to type our st... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/text/simple-javascript-typing-text-onclick.jpg[/IMG]
Demo: JavaScript Simple JavaScript Typing Text onClick

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<script type="text/javascript">
// Created by: Ilya Gerasimenko | hxxp ://w w w.gerasimenko. com
// This script downloaded from w w w.JavaScriptBank. 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 | hxxp ://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);
  		}
  }
);
</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML

Code:

<!--
/*
     This script downloaded from w w w.JavaScriptBank. com
     Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
*/
-->
<div style="text-align: left; width: 70%;">

<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>
</div>

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider