March 31st, 2006

DHTML Text Typing Effect

Use this simple function to achieve the effect of having text typed out onto your website. You can speed it up or slow it down by changing the number of millisecond of the interval.

Just replace the contents of this div with your own text

<div id="toType">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tempus elementum tellus. Vestibulum mattis condimentum velit. Proin nonummy massa nec neque. In enim purus, vestibulum a, interdum sed, lacinia sit amet, elit. Donec nonummy bibendum elit. Praesent iaculis metus vel augue.</div>
<script type="text/javascript">
interval = 80; // milliseconds to wait between typing characters

if(document.getElementById) {
        typeTextHolder = document.getElementById("toType");
        if(typeTextHolder.innerHTML) {
                typingBuffer = ""; // prevents stripping spaces
                i = 0;
                typeText = typeTextHolder.innerHTML;
                typeTextHolder.innerHTML = "";
                type();
        }
}

function type() {
        regex = /<([^<])*>/; //html markup to remove
        typeText = typeText.replace(regex, "");
        if(i < typeText.length) {
                typingBuffer += typeText.charAt(i);
                typeTextHolder.innerHTML = typingBuffer;
                i++;
                setTimeout("type()", interval);
        }
}
</script>

2 Responses to ' DHTML Text Typing Effect '

Subscribe to comments with RSS or TrackBack to ' DHTML Text Typing Effect '.

  1. Zara said,

    on April 6th, 2006 at 5:04 am

    http://www.justin-cook.com/wp/2006/03/31/dhtml-text-typing-effect/

    instead of
    "if(it

  2. Zara said,

    on April 6th, 2006 at 5:07 am

    use "if(i" instead of "if(it"….

    maybe think about converting code into HTML chars….

    regards, zara

Leave a reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image