Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> Text >> JavaScript Typewriter


Code Snippet </> Info


Snippet Name: JavaScript Typewriter

Description: Give your text a typewriter effect using this snippet.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: Mozilla Developer Network

Last Modified: 2014-05-25 05:45:38

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <html> <head> <script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>JavaScript Typewriter</title> <script type="text/javascript"> <!-- // Begin JavaScript Typewriter // == This Script Free To Use Providing This Notice Remains == // // == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == // // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == // // == Created by: Mozilla Developer Network : https://developer.mozilla.org : Creative Commons License == // --> function Typewriter (sSelector, nRate) { function clean () { clearInterval(nIntervId); bTyping = false; bStart = true; oCurrent = null; aSheets.length = nIdx = 0; } function scroll (oSheet, nPos, bEraseAndStop) { if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; } var oRel, bExit = false; if (aMap.length === nPos) { aMap.push(0); } while (aMap[nPos] < oSheet.parts.length) { oRel = oSheet.parts[aMap[nPos]]; scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true; if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { bExit = true; oCurrent = oRel.ref; sPart = oCurrent.nodeValue; oCurrent.nodeValue = ""; } oSheet.ref.appendChild(oRel.ref); if (bExit) { return false; } } aMap.length--; return true; } function typewrite () { if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } oCurrent.nodeValue += sPart.charAt(0); sPart = sPart.slice(1); } function Sheet (oNode) { this.ref = oNode; if (!oNode.hasChildNodes()) { return; } this.parts = Array.prototype.slice.call(oNode.childNodes); for (var nChild = 0; nChild < this.parts.length; nChild++) { oNode.removeChild(this.parts[nChild]); this.parts[nChild] = new Sheet(this.parts[nChild]); } } var nIntervId, oCurrent = null, bTyping = false, bStart = true, nIdx = 0, sPart = "", aSheets = [], aMap = []; this.rate = nRate || 100; this.play = function () { if (bTyping) { return; } if (bStart) { var aItems = document.querySelectorAll(sSelector); if (aItems.length === 0) { return; } for (var nItem = 0; nItem < aItems.length; nItem++) { aSheets.push(new Sheet(aItems[nItem])); /* Uncomment the following line if you have previously hidden your elements via CSS: */ // aItems[nItem].style.visibility = "visible"; } bStart = false; } nIntervId = setInterval(typewrite, this.rate); bTyping = true; }; this.pause = function () { clearInterval(nIntervId); bTyping = false; }; this.terminate = function () { oCurrent.nodeValue += sPart; sPart = ""; for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false)); clean(); }; } /* usage: */ var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15); /* default frame rate is 100: */ var oTWExample2 = new Typewriter("#controls"); /* you can also change the frame rate value modifying the "rate" property; for example: */ // oTWExample2.rate = 150; onload = function () { oTWExample1.play(); oTWExample2.play(); }; </script> <style type="text/css"> span.intLink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"> CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_new">Mozilla Developer Network</a> </p> <p id="controls" style="text-align: center;"> [&nbsp;<span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span> | <span class="intLink" onclick="oTWExample1.terminate();"> Terminate</span>&nbsp;] </p> <div id="info"> This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. </div> <h1>JavaScript Typewriter</h1> <div id="article"> <p> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> </p> <form name="myForm"> <p>JavaScript Typewriter: <input type="text" name="email" /><br /> <textarea name="comment" style="width: 400px; height: 200px;">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</textarea></p> <p><input type="submit" value="Send" /> </form> <p> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling text placed here to provide enough text for this codes demonstration purpose.<br /> </p> <p> [ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=177">JavaScript Typewriter Code Snippet</a> page. ] </p> </div> <script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.src=(("http:"===document.location.protocol)?"http:":"https:")+"//"+"js-agent.newrelic.com/nr-100.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrfj","beacon-3.newrelic.com","42869b6ed3","3172075","b1QHMUtVDRdSW0YKXVYeIxBXVxcNXFYdFFtTWEsTUFEUFwlKUxRtXlgJAA==",1,23,new Date().getTime(),"","","","",""]);</script> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library