Add javascript text

Question

I do not know how to describe it, but I am sure that you will understand if you visit this link. http://jsfiddle.net/pahnin/yN3xf/

I want to add text to the p element with javascript, and I am successful, but if the text contains a tag of type <font> , the tag is displayed as is.

Should I add code to detect html elements, or can this be done in any other ways? if I add code that detects a font tag, how do I add the tag back to the text?

Answer 1

You could do something like this. After all the text has been written out, you replace the entire html welcome with the source text. This is not the best that 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 in various ways. It has a div on top of the source text, and it slowly displays text that looks as if it is printed.

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 greeting message, the width should not be set, and it will work with multiple lines.

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); } 

Answer 2

You can simply replace var textcopied = $('.welcome').html(); on var textcopied = $('.welcome').text(); to extract text, not including HTML tags. But then, of course, you won’t get the tags back at all.

Update:. A slightly different approach uses jQuery animation to smoothly transition the entire header:

 $(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 3

You can also achieve this by iterating over the root element of contents() and individually displaying each of the child nodes one by one.

When processing each of the contents elements, if it is node text, it is enough to display all characters with a timeout. If it is not node text, clone the node and add it to the target element. All characters inside it can be added in the same way.

See how it works: http://jsfiddle.net/yN3xf/36/

 $(document).ready(function(){ var $clonedContent = $('.welcome').clone(); $('.welcome').textContent = ''; $('.welcome').text(''); treatContents(0, $clonedContent, $('.welcome')); function treatContents(num, container, target){ var $originalNode = container.contents()[num]; var $targetNode; if ($originalNode.nodeType == 3){ $targetNode = target; } else{ $targetNode = $(container.contents()[num]).clone(false, false).appendTo(target); $targetNode.text(''); } $targetNode.textContent = ''; writeCharacters($originalNode.textContent , 0, $targetNode, num, container, target); } function writeCharacters(origText, x, target, contNum, contCont, contTarg) { if(x<origText.length){ target.append(origText.charAt(x)); setTimeout(function() { writeCharacters(origText, x+1, target, contNum, contCont, contTarg); }, 80); } else{ treatContents(contNum+1, contCont, contTarg); } } }); 

This sample can be adapted to allow nested tags, for example:

 <p class="welcome">Hi, there <b>bold text <i>bold italic text</i></b>, normal text</p> 

Answer 4

Try replacing:

 $('.welcome').append(textcopied.charAt(i)); 

with:

 textHTML += textcopied.charAt(i); $('.welcome').html(textHTML); 

And when the code arises, put this:

 var textHTML = ''; 

It works, but it doesn’t look very good: P