Javascript typing effect

Question

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.

Answer 1

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.

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);
  curIndex++;
  el.setAttribute('curIndex', curIndex);

  if (curIndex < curStr.length)
    setTimeout(callback, myDelay);
  else {
    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

.multi {
  border: solid 2px #333333;
  width: 400px;
}