How to keep line breaks when using .text() method for jQuery?


Tags: javascript,jquery,html,css

Problem :

I'm trying to achieve a typewriting effect and my content consists of a lot of HTML entities. The problem with using .html() is that since it writes out each letter at a time, it will type out & then l then t then ; and finally it would change to <.

HTML

<p id="src">
&lt;!DOCTYPE html&gt;
&lt;!--[if lt IE 7]&gt;      &lt;html class=&quot;no-js lt-ie9 lt-ie8 lt-ie7&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if IE 7]&gt;         &lt;html class=&quot;no-js lt-ie9 lt-ie8&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if IE 8]&gt;         &lt;html class=&quot;no-js lt-ie9&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if lt IE 9]&gt;      &lt;html class=&quot;no-js lt-ie9&quot;&gt; &lt;![endif]--&gt;
</p>
<p id="typed-paragraph">
    <span id="target"></span>
    <span id="typed-cursor">|</span>
</p>

CSS

#src {
    display: none;
}

jQuery

(function(){
    var srcText = $("#src").html();
        i = 0;
        result = srcText[i];
    setInterval(function() {
        if(i == srcText.length-1) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i].replace("\n", "<br />");
        $("#target").html(result);
    }, 150); // the period between every character and next one, in milliseonds.
})();

You can see the example of it here http://jsfiddle.net/j9KF5/9/

But if I use .text() then I lose all the line breaks.

Ultimately, how I can either fix the entities problem or the line break problem?



Solution :

You don't need to worry about the HTML entities nor any complex string replacing.

All you need is a little CSS:

#target {
    white-space: pre;
}

and use the .text() approach:

(function(){
    var srcText = $("#src").text().trim();
        i = 0;
        result = srcText[i];
    setInterval(function() {
        if(i == srcText.length-1) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i];
        $("#target").text(result);

    }, 150); // the period between every character and next one, in milliseonds.
})();

http://jsfiddle.net/mattball/vsb9F/


    CSS Howto..

    How to turn off spell checking in CSS?

    How to display a long link in multiple lines via CSS?

    How to display a 100% width stripe in a CSS design using a fixed-grid blueprint?

    How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How do I change the a border-color on rollover?

    How to make this in html and css?

    How to change image size on featured images in wordpress?

    How to center-zoom with responsive images without affecting the image size?

    How to make SVG clip-path work correctly in Google Chrome?

    Show required asterisk star after the text?

    How to nest classes in css modules and react?

    How to update CSS to values that were chosen in a form? (jQuery)

    How to position a background image without background-position property

    how to get the site to not collapse with css

    How to allow content area to be expandable to right but not pop under sidebar?

    How to edit css margin-top for a text in mobile version

    how to text zoom effect in css

    How to center image with full height and variable width

    How do I move that div with CSS in a clean way?

    How to split page and reveal stuff underneath?

    How to set image as a button in HTML & CSS?

    how to define variable in less

    How to modify CSS or JS file from “materialize:materialize” package in Meteor

    How to know that a time consuming CSS operation (rendering) has completed

    How to toggle class using jquery if else statement?

    Google font shows boxes in Internet Explorer 8 - IE 8

    CSS height, How to get it to go around inner divs

    How can i get an image inside an li to disregard padding with css

    How/where to center Items on Webpage