TYPEWRITER TEXT EFFECT


Note: As of today (Dec 2003), this code works on Internet Explorer 6 and Netscape 6.2 and 7.02 on the PC.  It has not been tested on other browsers.

EXAMPLE

  

NEWS FLASH

You can type some text here and click the button below to see the effect applied to the new text. 
  

Delay: milliseconds between strokes. 

EXPLANATION

  
As you can see from the example, this effect shows a sequences of characters letter by letter, simulating a typewriter.   The effect can even process HTML tags such as <B> and <FONT>.  

At the heart of this effect are the use of these components:

  • innerHTML property

  • setTimeout() function

innerHTML
innerHTML
is a property of an element that can be used to change the content of the element.  For example, this piece of code creates a DIV element named "myDiv":
<DIV ID="myDiv"><B>
This is the content of myDiv
</B></DIV>

We can see what the innerHTML of the "myDiv" element looks like:
javascript:alert(document.getElementById("myDiv").innerHTML);

Notice that the innerHTML content not only contains the text, but also the HTML tags within the element (the <B> and </B>).

You can assign new values to the innerHTML.  For example, suppose your html contains:

<DIV ID="swappable">Good morning</DIV>

To change the text "Good morning" to to "Good evening," you can do it like this:

<SCRIPT LANGUAGE="JavaScript">
<--
document.getElementById("swappable").innerHTML="Good evening";
//-->
</SCRIPT>

You can even add HTML tags into the innerHTML.  Below, I made the new text larger by making it a header <H2>:

<SCRIPT LANGUAGE="JavaScript">
<!--
document.getElementById("swappable").innerHTML="<H2>Good evening</H2>";
//-->
</SCRIPT>

Note: innerHTML is not part of W3C DOM standard and might be depreceated in the future.  An example of doing the same thing as above in W3C DOM is like below:
document.getElementById("swappable").replaceChild(
  document.createTextNode("Good evening"), 
  document.getElementById("swappable").childNodes[0]);

That piece of code will place the text "Good evening" as the first child element of the DIV element.  To include the html tags, such as <B>, you'll need to create another node and make the text a child of that node.  Obviously, much more effort will be required.

setTimeout
This is a JavaScript method (function) that causes an expression (which could be a piece of code or a function call) to be executed after a specified delay.  The format is as follows:  

setTimeout(code, numberOfMilliseconds), where:

  • code is the expression to be executed (it can be an actual code or a function call).

  • numberOfMilliseconds is the number of milliseconds to before code is executed.  (1 second=1000 milliseconds)

If you're not familiar with setTimeout, you can read more about it here.  The typing effect is accomplished by repeatedly changing the innerHTML content of an element (eq: a DIV).  The repetition and speed of the typing is controlled by setTimeout.   

Note: you could also use setInterval, instead of setTimeout.

COMPLETE EXAMPLE

  
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
var text="content of text here";
var delay=50;
var currentChar=1;
var destination="[not defined]";

function type()
{
  if (document.getElementById)
  {
    var dest=document.getElementById(destination);
    if (dest)
    {
      dest.innerHTML=text.substr(0, currentChar);
      currentChar++
      if (currentChar>text.length)
      {
        currentChar=1;
        setTimeout("type()", 5000);
      }
      else
      {
        setTimeout("type()", delay);
      }
    }
  }
}
function startTyping(textParam, delayParam, destinationParam)
{
  text=textParam;
  delay=delayParam;
  currentChar=1;
  destination=destinationParam;
  type();
}

//-->
</SCRIPT>
<title>JavaScript Typing Effect</title>
</head>
<body>
<DIV ID="textDestination">...</DIV>
</body>
<SCRIPT LANGUAGE="JavaScrip"t>
<!--
startTyping(text, 50, "textDestination");
//-->

</html>

Click here to open the example above
Click here to open another example

Let's take a look at the JavaScript code first.

var text="Content of text here";
var delay=50;
var currentChar=1;
var destination="[not defined]";

The 4 variables on the top portion of the code are global variables.  The first one contains the text that will be displayed.  The second one is the delay (in milliseconds) between the typing.  And the third variable is a counter that will store the index of the next characters to be typed.  So, for example, if the screen shows "Co", then index will be 2 because we have shown 2 characters.  The last variable holds the name of the element where the text will be typed into.  

These variables can be changed by the function startTyping.  When you call this function, it also signals that the typing should start and the function type() is called.
function startTyping(textParam, delayParam, destinationParam)
{
  text=textParam;
  delay=delayParam;
  currentChar=1;
  destination=destinationParam;
  type();
}

Here's what type() looks like: 

function type()
{
  if (document.getElementById)
  {
    var dest=document.getElementById(destination);
    if (dest)
    {
      dest.innerHTML=text.substr(0, currentChar);
      //dest.innerHTML+=text[currentChar-1];
      currentChar++
      if (currentChar>text.length)
      {
        currentChar=1;
        setTimeout("type()", 5000);
      }
      else
      {
        setTimeout("type()", delay);
      }
    }
  }
}

This function is the code that puts the content of the text into the innerHTML of the destination element.   If first gets the element using getElementById.  It then checks if the destination element is valid (if may not be valid if the browser does not support getElementById; if you have forgotten to create the element on the html page; or if you mistyped the ID of the element).  

Let's look at some of the lines in more details:
  

      dest.innerHTML=text.substr(0, currentChar);

substr(startIndex, endIndex) is a built-in JavaScript function that returns a sub-string of a string.  So, that line extract a portion of the string (returns a sub-string of the string), then assigns the sub-string to the innerHTML.  This is how we chop the text so that it shows character by character:  

As an exercise, you could have used a more efficient method by just adding the next character at every cycle, like this:

      dest.innerHTML+=text[currentChar-1];
      // Hint: need to clear the content at the beginning

Let's move on.

      currentChar++
      if (currentChar>text.length)
      {
        currentChar=1;
        setTimeout("type()", 5000);
      }
      else
      {
        setTimeout("type()", delay);
      }

Here, we increment the counter (index of the next character to be shown) and check if the text has been fully displayed.  If the text has been fully displayed, it waits for 5000 milliseconds before starting over.  You can change that number to something else; or remove this line altogether to not repeat the typing sequence.

If the text has not been fully displayed, it calls setTimeout so that type() will be called again after the specified delay.

Following the script is the html code:  
  
<title>JavaScript Typing Effect</title>
</head>
<body>
<DIV ID="textDestination">...</DIV>
</body>
<SCRIPT LANGUAGE="JavaScrip"t>
<!--
startTyping(text, 50, "textDestination");
//-->

This is a very simple html example.  It simply creates a DIV element with ID="textDestination".  This element is where the text will be typed into.  At the end of the html, I called startTyping, passing "textDestination" as the destination for the typing effect.  This call initiates the typing sequence.

COMMENTS

  

  • To handle browsers that does not support innerHTML, I suggest you write an alternate version of the page.  You can test the browser version and direct user to another page immediately if the browser is not one of the known working browsers.
      

  • If you want to be DOM compliant, you can replace:

  •   dest.innerHTML=text.substr(0, currentChar);

    with

     var textNode=document.createTextNode(text.substr(0, currentChar));
     dest.replaceChild(textNode, dest.childNodes[0]);

    However, the text will be displayed as it is (ie: html tags will be displayed as if they're text).
      

  • You can set the width and height of a DIV element to make sure that there's enough space for the text.  However, you can't never be sure what kind of font the user is using.
      

  • You can change the innerHTML of a table cell, or a button, and many other html elements.  You must set an ID for the element so that you can refer to it using getElementById()
      

  • You can change the horizontal alignment the element to "CENTER" to make the text appear from the center.
      

  • Using a table cell, you can change the vertical alignment of the element to "MIDDLE" or "BOTTOM" to make the text appear from the middle or scroll up from the bottom.  You can also use similar method in DIV to accomplish this.  

  
<< MORE TUTORIALS >>

(C)2003 F. Permadi
permadi@permadi.com