Snap Builder HTML5 CSS3 Free Public Codes Library


<!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>
Code Snippet </> Info
