Text Effect

A typewriter effect

by Justin

HTML

<!doctype html>
<html>
    <head>
        <title>&nbsp;</title>
        <link href="http://fonts.googleapis.com/css?family=Geo" 
        rel="stylesheet" type="text/css" />
        <style></style>
        
    </head>
    
    <body>
        <!--[if IE]><h2> ... you should consider using a real browser</h2><![endif]-->
        <div id="status"></div> 
        <div id="content" class="nice">_</div>
    </body>
    
</html>

CSS

.nice {
    font-family: "Geo", sans-serif;
    font-size: 32px;
}
#content {
    width: 100%;
}

JavaScript

var TextEffect = function(t, s, e) {
    var callBack, pauseDuration = 2500,
        speed = s,
        target = e,
        text = t,
        playInterval, position;

    var play = function() {
        playInterval = setInterval(handlePosition, speed);
    };

    var stop = function() {
        clearInterval(playInterval);
        playInterval = null;
    };

    var handlePosition = function() {
        if (isNaN(position)) {
            position = 0;
        }
        stop();
        if (position >= text.length - 1) {
            playInterval = setInterval(decrease, speed);
        } else {
            playInterval = setInterval(increase, speed);
        }
    }

    var decrease = function() {
        if (position <= 0) {
            clearInterval(playInterval);
            if (callBack !== undefined) {
                callBack.apply();
            }
            setTimeout(handlePosition, pauseDuration);

            return;
        } else {
            position--;
        }
        var s = text.substring(position, 0);

        if (target !== null) {
            target.innerText = s;
        }
        return s;
    }

    var increase = function() {
        if (position >= text.length) {
            clearInterval(playInterval);
            setTimeout(handlePosition, pauseDuration);
            return;
        } else {
            position++;
        }
        var s = text.substring(position, 0);

        if (target !== null) {
            target.innerText = s;
        }
        return s;
    }

    var setCallback = function(f) {
        if (typeof f !== "function") {
            f = function() {};
        }
        callBack = f;
        return this;
    }

    var setPauseDuration = function(n) {
        if (isNaN(n) || n < 500) {
            n = 500;
        }
        pauseDuration = n;
        return this;
    }

    var setSpeed = function(n) {
        if (isNaN(n) || speed < 10) {
            n = 10;
        }
        speed = n;
        return this;
   ...