typer 1 letter test 2

Typewriter simulation using jQuery library. Print out 1 character at a time.

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',
    lineCount = 0,
    quote = "All work and no play makes " + userName + " a dull boy! Line " + lineCount,
    delay = 10,
    canvas = $("#canvas");

function addTextByDelay(callback) {
   var userName = 'Ken',
    lineCount = 0,
    quote = "All work and no play makes " + userName + " a dull boy! Line " + lineCount,
    delay = 10; 

    var i = 0;
    var result = quote[i];
    var interval = setInterval(function() {
        if(i == quote.length - 1) {
            clearInterval(interval);
            callback();
            return;
        }
        i++;
        result += quote[i].replace("\n", "<br />");
        $("#canvas").html(result);
    },
    10);
    return true;
    
}

    function addNewLine() {
        alert("Play BGM function");               
        $('#canvas').css('background', 'blue');

};

addTextByDelay(function() {
    addNewLine(); 
    
    
});



function typeWriterReturn() {
    var curHeight = parseInt(canvas.css('height'));
    var curLineHeight = parseInt(canvas.css('line-height'));
    var curMarginTop = parseInt(canvas.css('margin-top'));

    canvas.css({
        //'height': curHeight + curLineHeight,
        //'margin-top': curMarginTop - curLineHeight
    });

}

$('body').keyup(function (event) {
    if (event.which == 13) {
        alert('enter pressed');
        typeWriterReturn();

    } else {
        alert('not enter');
    }
});
//document.onkeyup = typeWriterReturn;