Question

I’m playing around with a jquery function called ghostType which basically types out text as though it is being typed on screen. Its kinda cool, but I can’t seem to have it do line breaks.

The jquery is as follows:

(function( $ ){
  $.fn.ghostType = function() {

    return this.each(function() {

        var $this = $(this);
        var str = $this.text();
        $this.empty().show();
        str = str.split("");
        str.push("_");

        // increase the delay to ghostType slower
        var delay = 100;

        $.each(str, function (i, val) {
            if (val == "^") {
                // Do nothing. This will add to the delay.
            }
            else {
                $this.append('<span>' + val + '</span>');
                $this.children("span").hide().fadeIn(100).delay(delay * i);

            }
        });
        $this.children("span:last").css("textDecoration", "blink");

    });

};
})( jQuery );

From what I can tell this code takes each character in the chosen elements TEXT and puts it into seperate tags, therefor omitting the HTML (ie br’s) with the line var str = $this.text();

How would you go about making this code include line breaks?

The best I could come up with was by adding an extra ‘else if’ statement like so:

            else if ( val == "*" ) {
                $this.append('<br />');
            }

And therefor * signs would become line breaks… but this damages the functionality where blinking cursor doesn’t sit beside each letter as it fades in. otherwise, it works…

You can see an example of what I’ve done at http://jsfiddle.net/JNyQV/

Answer 1

This is how I would write the script… just add the entire partial string instead of each individual letter. The biggest difference is that the last letter doesn’t fade in. I didn’t think the effect was that noticeable, but it should be possible to just add the last letter and have that fade in if it is a necessity. Here is a demo.

(function($) {
    $.fn.ghostType = function() {

        return this.each(function() {

            // increase the delay to ghostType slower
            var delay = 55,

            $this = $(this),
            str = $this.text(),
            i = 0,
            l = str.length,
            t,
            loop = function() {
                if (i <= l) {
                    t = str.substring(0,i++).replace(/\^/g, '').replace(/\*/g, '<br>');
                    $this.html(t + '<span class="blink" >_</span>');
                    setTimeout(loop, delay);
                }
            };

            $this.empty().show();
            loop();
        });

    };
})(jQuery);

$('#example').ghostType();