Typer 3 - Jquery

by Kev

HTML

<div id="canvas"></div>

CSS

#canvas {
    margin-top:200px;
    height:64px;
    padding:2em;
    line-height:32px;
    width:100%;
    background:pink;
    position:relative;
}
p {
    background:red;
}
#menu {
    background: blue !important;
}

JavaScript

var userName = 'Ken',
    quote = "All work and no play makes " + userName + " a dull boy",
    lineCount = 0,
    charPos = 0,
    speed = 200,
    lineHeight = parseInt($("#canvas").css('line-height')),
    txt1 = "<p>" + quote + "</p>", // Create text with HTML
    delay = 100,
    elem = $("#canvas");

var showText = function (target, message, index, interval) {
    if (index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function () {
            showText(target, message, index, interval);
        }, interval);
    } else {
        $("#canvas").animate({
            bottom: "+=" + lineHeight,
        }, 200, function () {
            // Animation complete.
        }).css('background', 'orange');

        lineCount++;
        $('#canvas p:last-of-type').append(' Line ' + lineCount);

    }
}



    function showLine(delay) {
        setTimeout(function () {
            $('#canvas').append('<p></p>');
            showText("#canvas p:last-of-type", "Hello, World!", 0, 100);
        }, delay);
    }
var ql = quote.length;

showLine(delay);
showLine(delay * ql);


// $("#canvas").append(txt1);     // Append new elements
// addTextByDelay(quote, elem, delay);
//$("#canvas").append(txt1);