»
EnglishFrenchVietnamese

Print - Simple JavaScript Typing Text onClick - JavaScriptBank.com

Full version: jsB@nk » Text » Writting » Simple JavaScript Typing Text onClick
URL: http://www.javascriptbank.com/simple-javascript-typing-text-onclick.html

Simple JavaScript Typing Text onClick © JavaScriptBank.comWith 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 strings: add to existing text, replace it completely and repeat text if you like. Very easy to implement and use!This is just a JavaScript effect, if you need to find typing test JavaScript, let try JavaScript Typing Test.

Full version: jsB@nk » Text » Writting » Simple JavaScript Typing Text onClick
URL: http://www.javascriptbank.com/simple-javascript-typing-text-onclick.html



JavaScript
<script type="text/javascript">// Created by: Ilya Gerasimenko | http://www.gerasimenko.com// This script downloaded from www.JavaScriptBank.com// Text to typevar 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.';// Animationvar textHolder;var textTarget;var letter;var index;var printing;var waiting = false;// StartspellString = function (oId,str) { if (waiting == false) {  index = 0;  waiting = true;  textTarget = document.getElementById(oId);  textTarget.innerHTML = '';  textHolder = str.split('');  sendToPrint(); }}// AnimationsendToPrint = 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);  }  });</script>


HTML
<!--/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.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>