Strange question I know. I am trying to get a word to load letter by letter on a page with a small delay. Yes this is what I think about sometimes when I am coding at work. I have tried numerous methods with absolutely no success. The best I got was an alert box with the following code but I want to do it with the html on the page. Is this even possible?

<script type="text/javascript">

var foo = "foo bar";
 foo = foo.length ;
for(i= 1; i<=foo; i++){
    var hello = "FOO BAR";
    hello = hello.substring(0, i);      
    alert(hello);

}

</script>

I am assuming there has to be some type of set time out with a hide show and a div to load it into?

Strange question I know. I am trying to get a word to load letter by letter on a page with a small delay. Yes this is what I think about sometimes when I am coding at work. I have tried numerous methods with absolutely no success. The best I got was an alert box with the following code but I want to do it with the html on the page. Is this even possible?

<script type="text/javascript">

var foo = "foo bar";
 foo = foo.length ;
for(i= 1; i<=foo; i++){
    var hello = "FOO BAR";
    hello = hello.substring(0, i);      
    alert(hello);

}

</script>

I am assuming there has to be some type of set time out with a hide show and a div to load it into?

• javascript
• jquery

• Can you include your html as well? – jbranchaud Commented Dec 3, 2011 at 2:47
• well in this example i didnt put any. I want to make this spell out in a div tag lets say inside the html. so something like <div id='bar'> </div> and attach the word spelling in the innerhtml here – Martin Brody Commented Dec 3, 2011 at 2:49

4 Answers 4

You can try something like this:

  var word = "Hello World";

   function nextChar(i){
      $("#word").text("The Word is: [" + i + "]" + word.substring(0, i));
      if(i < word.length){
        setTimeout("nextChar(" + (i + 1) + ")", 1000);   
      }
   }

  $(document).ready(function(){
    nextChar(0);
  });

And the HTML:

  <div id="word"></div>

Let's say you want to load "foo bar" into this div, one character at a time, with a 1 second delay in between.

<div id="destination" />

$(function () {
    loadWord("foo bar", 0);
});

function loadWord(word, index) {
   if (index == word.length) return;
   $("#destination").text($("#destination").text() + word[index]);
   setTimeout(function() { loadWord(word, index + 1); }, 1000);
}

A bit more jQuery-ish answer

Major differences from others (beside being jQuery and general):
1) animation
2) DOM manipulation on load only
3) preset width (will not push other things)

Here's a fancier version that makes a jQuery plug-in for adding text to any object and it fades in each successive letter. You can see it work here: http://jsfiddle/jfriend00/yMJsc/.

You call it like this:

$(".myClass").revealText("The quick brown fox jumped over the fence.", 500);

And, here's the code to implement the jQuery plugin.

$.fn.revealText = function(text, duration) {
    duration = duration || 250;
    for (var i = 0; i < this.length; i++) {
        showNextChar(this[i], 0);
    }
    function showNextChar(item, len) {
        var base = text.substr(0, len);
        var nextChar = text[len];
        // don't fade in a space since it wouldn't be visible
        var aheadChar = text[len + 1];
        if (aheadChar == " ") {
            nextChar += aheadChar;
            ++len;
        }
        item.innerHTML = base + '<span class="fadeLetter" style="display: none;">' + nextChar + '</span>';
        ++len;
        $(".fadeLetter", item).fadeIn(duration, function() {
            if (len < text.length) {
                showNextChar(item, len);
            } else {
                item.innerHTML = text;
            }
        });
    }
    return(this);
}