How do I make a new line or add HTML to this Javascript function?

Question

I trying to create a typewriter effect, I got everything working, but I cannot figure out how to create a new line.

I've tried all three:

\n
\r
<br />

but it just types those characters.

Here is my javascript function:

$.fn.Typewriter = function(opts){
    var $this = this,
        defaults = { animDelay: 50 },
        settings = $.extend(defaults, opts);
    $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);
        }, settings.animDelay * i);
    });
}

Here is an example how I'm calling it:

$('#howto').Typewriter({
animDelay: 100,
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br /> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \r Ut enim ad minim veniam, quis nostrud exercitation \n ullamco laboris nisi ut aliquip ex ea commodo consequat.'});

This is how it end up looking:

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

I want it to look like:

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

All help is appreciated!

http://jsfiddle.net/9Qsku/

Are you sure that jquery plugin supports line breaks? That'd mean the plugin has to parse the string and try to figure out if you really wanted a line break, or just two chars that happen to LOOK like a linebreak. — Marc B, Nov 19 '12 at 20:47
Most likely because text is being interpreted as a text node and not HTML, hence `
` is automatically escaped. `\n\r` should work in that case though. — Fabrício Matté, Nov 19 '12 at 20:48
@FabrícioMatté but whats weird with \n\r it doesn't display those characters, but no new line happens. — Papa Wheelz, Nov 19 '12 at 20:55
http://stackoverflow.com/questions/4768118/how-to-break-line-in-javascript — Modika, Nov 19 '12 at 20:57
@Modika already tried %0D%0A but it just prints it out. Does Not Work — Papa Wheelz, Nov 19 '12 at 21:00

score 2 · Accepted Answer · edited Nov 19 '12 at 21:05

2

use \n on the string and the snipplet modified this way

$.fn.Typewriter = function(opts){
var $this = this,
    defaults = { animDelay: 50 },
    settings = $.extend(defaults, opts);
$.each(settings.text, function(i, letter){
    setTimeout(function(){
        $this.html($this.html() + (letter!='\n'?letter:'<br />'));
    }, settings.animDelay * i);
});
}

edited Nov 19 '12 at 21:05

Shmiddty

13,847
1
35
52

answered Nov 19 '12 at 20:58

Saic Siquot

6,513
5
34
56

1

This will work if you surround `letter!='\n'?letter:'
'` with parentheses. See http://jsfiddle.net/nyBr6/ – dfsq Nov 19 '12 at 21:03
@dsfq Correct, this is because without them, the logic tests `$this.html() + letter != '\n'`, so it will always replace everything with either `letter` or `'
'` – Shmiddty Nov 19 '12 at 21:07
That doesn't work, it just displays 1 letter at a time: Here is my code, try adding: letter!='\n'?letter:'
' http://jsfiddle.net/9Qsku/ – Papa Wheelz Nov 19 '12 at 21:11
the anwser is updated, (and works as expected) please check again [fiddle here](http://jsfiddle.net/nyBr6/) provided by @shmiddty. he makes me notice a missing parentesis pair – Saic Siquot Nov 19 '12 at 21:14
I want to note that it was @dfsq and not me who provided the modification. – Shmiddty Nov 19 '12 at 21:28

Christophe · Answer 2 · 2012-11-19T21:15:27.990

0

<br/> should work fine: http://jsfiddle.net/7WVZX/

[Update] The issue might be that you are adding the characters one by one, instead of adding the line break as a whole. This might work better for you:

$this.html(settings.text.substr(0,i));

The result: http://jsfiddle.net/9Qsku/1/

edited Nov 19 '12 at 21:15

answered Nov 19 '12 at 21:00

Christophe

27,383
28
97
140

Edward J Beckett · Answer 3 · 2015-05-10T14:44:02.540

-1

Try using .html ...

.html('Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit,');

edited May 10 '15 at 14:44

answered Nov 19 '12 at 21:01

Edward J Beckett

5,061
1
41
41

Then I'm not calling my TYPEWRITER function! – Papa Wheelz Nov 19 '12 at 21:05
@PapaWheelz Shmiddty's example is what I was referring to .. implementing .html for parsing – Edward J Beckett Nov 19 '12 at 21:09

How do I make a new line or add HTML to this Javascript function?

3 Answers3

Linked