Code Snippet: Simple typewriter class for javascript (no plugin needed)

Today, I wrote some simple javascript class for writing text like a typewriter in a HTML document container. The class runs without any plugins and should be usable in any browser. If you have problems unsing it, please let me know in the comments.

The only thing you have to do is implement a HTML element (e.g. a p, span or div) for the text to be displayed and call the class with your desired parameters.

Here’s the class:

/**
 * Simple javascript typewriter class.
 *
 * @param {string|object} el The HTML object ID or object itself where the message shall be printed
 * @param {string} The message to print
 * @param {int} An optional interval when the next char is printed in milliseconds
 *
 * @author Martin Albrecht 
 */     
function TypeWriter(el, message, interval) {
  var self = this;      
  this.interval = 200; // Default
  this.message = '';
  this.handler = null;
  this.step = 0;      
  this.element = null;
 
  if( typeof el !== 'undefined' ) {
    if( typeof el === 'object' ) {
      this.element = el;
    } else {
      this.element = document.getElementById(el);
    }
  }
 
  if( typeof message !== 'undefined' ) {
    this.message = message;
  }
 
  if( typeof interval !== 'undefined' && interval > 0 ) {
    this.interval = interval;
  }
 
 
  /**
   * Type the next char to the container or clear the interval if
   * all is done.
   */
  this.nextChar = function() {
    if( self.step < self.message.length ) {
      self.element.innerHTML += self.message[self.step++];
    } else {          
      window.clearInterval(self.handler);
    }
  };     
 
  // Set the interval handler and start typing
  this.handler = window.setInterval(self.nextChar, self.interval);
};

Here a demo:

And finally the demo code, so that you know how to run it:

< !DOCTYPE html><script>// < ![CDATA[
    /**
     * Simple javascript typewriter class.
     *
     * @param {string|object} el The HTML object ID or object itself where the message shall be printed
     * @param {string} The message to print
     * @param {int} An optional interval when the next char is printed in milliseconds
     *
     * @author Martin Albrecht <martin .albrecht@javacoffee.de>
     */     
    function TypeWriter(el, message, interval) {
      var self = this;      
      this.interval = 200; // Default
      this.message = '';
      this.handler = null;
      this.step = 0;      
      this.element = null;
 
      if( typeof el !== 'undefined' ) {
        if( typeof el === 'object' ) {
          this.element = el;
        } else {
          this.element = document.getElementById(el);
        }
      }
 
      if( typeof message !== 'undefined' ) {
        this.message = message;
      }
 
      if( typeof interval !== 'undefined' &#038;& interval > 0 ) {
        this.interval = interval;
      }
 
 
      /**
       * Type the next char to the container or clear the interval if
       * all is done.
       */
      this.nextChar = function() {
        if( self.step < self.message.length ) {
          self.element.innerHTML += self.message[self.step++];
        } else {          
          window.clearInterval(self.handler);
        }
      };     
 
      // Set the interval handler and start typing
      this.handler = window.setInterval(self.nextChar, self.interval);
    };
 
// ]]></script>

<script>// < ![CDATA[
    var msg = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
    var tw = new TypeWriter("twr", msg);
 
// ]]></script>

 

Similar Posts: