JakeGriffin JakeGriffin - 1 year ago 167
Javascript Question

Javascript typing effect

The issue arises from the same issue as last time. My websites run off a static domain, so I want to be able to use this script on each site without making duplicate copies.

It functions as a typing text effect, I want to be able to define the text it prints out from the webpage itself and not the script.


var index = 0;
var text = 'Text';

function type()
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',100);

I've tried fiddling with the code and using them same method as my previous post, but I can't seem to get it to work.

Answer Source

Nice question, LMGTFY has often given me a giggle in the past. I think you may find the following to be pretty easy to throw around anywhere. It's just a few attributes added to your target container, along with a call to get the typewriter started.

Here, I run 4 of them simultaneously just for kicks. It's probably worth junking forEachNode in this example, instead using the few commented lines. If the result of getElementsByClassName was a true array, you could just call the .forEach method that arrays have. Unfortunately, a nodeList is similar but not the same - hence the need for such a function. I used it before realizing it probably clearer to do without it. In any case, it's a function I've found handy many times. I'll leave that in there as a thanks for such a fun question to consider.

<!DOCTYPE html>
function forEachNode(nodeList, func)
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
        func(nodeList[i], i, nodeList);

window.addEventListener('load', mInit, false);

function typeWriter(el)
    var myDelay = el.getAttribute('keyDelay');

    if (el.getAttribute('curIndex') == undefined)
        el.setAttribute('curIndex', 0);

    var curIndex = el.getAttribute('curIndex');
    var curStr = el.getAttribute('typewriterdata');
    el.innerHTML += curStr.charAt(curIndex);
    el.setAttribute('curIndex', curIndex);

    if (curIndex < curStr.length)
        setTimeout(callback, myDelay );
        if (el.getAttribute('nextline') != undefined)
            var nextTgt = el.getAttribute('nextline');
            typeWriter( document.getElementById(nextTgt) );

    function callback(){ typeWriter(el); }

function mInit()
    typeWriter( document.getElementById('line1') );

    var i, n, elementList;
    elementList = document.getElementsByClassName('autoType');
    forEachNode(elementList, typeWriter);
//  n = elementList.length;
//  for (i=0; i<n; i++)
//      typeWriter( elementList[i] );

    border: solid 2px #333333;
    width: 400px;
    <div class='autoType' typewriterdata='Enter this string letter by letter' keydelay='300'></div>
    <div class='autoType' typewriterdata='Enter this string letter by letter' keydelay='200'></div>
    <div class='autoType' typewriterdata='This is short but slooooow' keydelay='1000'></div>
    <div class='autoType' typewriterdata='The rain falls mainly on the plain in Spain' keydelay='100'></div>

    <div class='multi'>
        <div id='line1' typewriterdata='This is line 1' keydelay='300' nextline='line2'></div>
        <div id='line2' typewriterdata='This is line 2' keydelay='300' nextline='line3'></div>
        <div id='line3' typewriterdata='This is line 3' keydelay='300' nextline='line4'></div>
        <div id='line4' typewriterdata='This is line 4' keydelay='300' ></div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download