javascript text append

Question

I dont know how to describe this but I'm sure you'll understand if you visit this link. http://jsfiddle.net/pahnin/yN3xf/

I want to append text to a p element with javascript and I'm sucessful, but if the text contains a tag like <font> the tag is displayed as it is.

Should I add code to detect the html elements or it can be done any other means? if I do add code which detect font tag how to add the tag back to the text??

Answer 1

You could simply replace var textcopied = $('.welcome').html(); with var textcopied = $('.welcome').text(); to extract the text without any HTML tags included. But then, of course, you won't get your tags back at all.

Update: A somewhat different approach uses jQuery animations to slide the entire title into view smoothly:

$(document).ready(function(){
    var $title = $('.welcome');
    var twidth = $title.width();
    var theight = $title.height();
    $title.css({
        overflow: 'hidden',
        width: 0,
        whiteSpace: 'nowrap',
        height: theight
    }).animate({
        width: twidth 
    }, 5000); // milliseconds
});

http://jsfiddle.net/mblase75/yN3xf/16/

Answer 2

You could do something like this. Once all the text has been written out, then you replace the whole html of welcome with the original text. It's not the best I admit.

http://jsfiddle.net/yN3xf/13/

$(document).ready(function() {
    var htmlcopied = $('.welcome').html();
    var textcopied = $('.welcome').text();
    $('.welcome').text('');

    function foobar(i) {
        if (i < textcopied.length) {
            $('.welcome').append(textcopied.charAt(i));
            setTimeout(function() {
                foobar(i + 1);
            }, 80);
        }
        else {
            $('.welcome').html(htmlcopied);
        }
    }
    foobar(0);
});

UPDATE

This should give you the desired effect through different means. It has a div on top of the original text, and it slow reveals the text, which looks like it is being typed out.

Example

http://jsfiddle.net/guanome/LrbVy/

html

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text
    <div class="overlay"></div>
</div>

javascript

$(document).ready(function() {
    $('.overlay').css('width', $('div.welcome').css('width'));
    $('.overlay').css('height', $('div.welcome').css('height') + 15);
    var origWidth = $('.overlay').css('width').replace(/px/g,'');
    foobar(origWidth);
});

function foobar(i) {
    if (i > -10) {
        $('.overlay').css('width', i);
        setTimeout(function() {
            foobar(i - 10);
        }, 80);
    }
}

css

.hl{
    color: red;     font-family: helvetica; 
    background: #efefef; 
    color: black; 
    padding: 2px 7px; 
    -moz-box-shadow: 0 1px 1px #CCCCCC; 
    -webkit-box-shadow: 0 1px 1px #CCCCCC; 
    box-shadow: 0 1px 1px #CCCCCC;

}
div.welcome
{
    position: relative;
    width: 500px;
}
.overlay
{
    position: absolute;
    right: 0;
    top: -3px;
    width: 100%;
    height: 25px;
    background-color: #FFF;
    z-index: 10;
}

UPDATE 2

With this change, the overlay will be added dynamically to the welcome message, the width doesn't have to be set, and it will work with multiple lines easily.

http://jsfiddle.net/guanome/LrbVy/4/

html

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text</div>

javascript

$(document).ready(function() {
    showWelcome();
});

function foobar(i, overlay) {
    if (i > -10) {
        overlay.css('width', i);
        setTimeout(function() {
            foobar(i - 10, overlay);
        }, 80);
    }
    else {
        overlay.remove();
    }
}

function showWelcome() {
    var welcome = $('div.welcome');
    welcome.append('<div class="overlay"></div>');
    welcome.css('position', 'relative');
    var overlay = $('.overlay');

    overlay.css({
        'width': welcome.css('width'),
        'height': (welcome.outerHeight() + 5),
        'position': 'absolute',
        'right': '0',
        'top': '-3px',
        'background-color': '#FFF',
        'z-index': '10'
    });
    var origWidth = overlay.css('width').replace(/px/g, '');
    foobar(origWidth, overlay);
}