JS typewriter from pure text to HTML

Question

This typewriter works OK..

(function($)
{
    $.fn.Ticker = function(options)
    {
        var defaults = {

            // Time to display each news item. (integer, milliseconds)
            pause: 5000,

            // Time taken to fade in next news item. (integer, milliseconds)
            fadeIn: 800,

            // Time taken to fade out current news item. (integer, milliseconds)
            fadeOut: 800,

            // Pause between displaying each item when fading between items. (integer, milliseconds)
            delay: 500,

            // Next news item typed out one character at a time. If false item will fade in. (boolean)
            typewriter: true,

            // Time to type each character if using the typewriter effect (integer, milliseconds)
            speed: 35,

            // Character to use to mimic a computer cursor if using the typewriter effect (string|boolean)
            cursor: '_'
        };

        // Merge default options with user options
        var opts = $.extend({}, defaults, options);

        return $(this).each(function()
        {
            var list = $(this), typewriter = {}, interval;

            // Activate ticker and display first item
            list
                .addClass('ticker-active')
                .children(':first')
                .css('display', 'block');

            function changeItem()
            {
                var item = list.children(':first'),
                    next = item.next(),
                    copy = item.clone();

                clearTimeout(interval);

                // Append copy of current item to bottom of list
                $(copy)
                    .css('display', 'none')
                    .appendTo(list);

                // Fade current item out, remove from DOM then animate the next item
                item.fadeOut(opts.fadeOut, function()
                {
                    $(this).remove();

                    // Animate
                    if (opts.typewriter)
                    {
                        typewriter.string = next.text();

                        next
                            .text('')
                            .css('display', 'block');

                        typewriter.count = 0;
                        typewriter.timeout = setInterval(type, opts.speed);
                    }
                    else
                    {
                        next
                            .delay(opts.delay)
                            .fadeIn(opts.fadeIn, function ()
                            {
                                setTimeout(changeItem, opts.pause);
                            });
                    }
                });
            }

            function type()
            {
                typewriter.count++;

                var text =  typewriter.string.substring(0, typewriter.count);

                if (typewriter.count >= typewriter.string.length)
                {
                    clearInterval(typewriter.timeout);
                    setTimeout(changeItem, opts.pause);
                }
                else if (opts.cursor)
                {
                    text+= ' ' + opts.cursor;
                }

                list
                    .children(':first')
                    .text(text);
            }

            // Test there are more items to display then start ticker
            if (list.find('li').length > 1 )
            {
                interval = setTimeout(changeItem, opts.pause);
            }
        });
    };

    $('.ticker').Ticker();

})(jQuery);

but supports no HTML tags, like ie <a> or <b>. Prints out only pure text.

How to add tag support in this case?

ps: I wish do not to change it with other plugins or examples.

Example: Jsfiddle

As you want to display a letter by letter, you are only reading the text within the li tag and not html. So you can not get that information only. Also I think as you are displaying it a letter by letter , even if you read html, you will have to process the same before displaying it. — T.Shah, Dec 05 '16 at 07:12
@ T.Shah Check this url, I am not sure but I think its possible.. [check this link](http://stackoverflow.com/questions/22180457/typewriter-effect-for-html-with-javascript) — Joe May, Dec 05 '16 at 13:28

score 1 · Accepted Answer · answered Dec 05 '16 at 13:37

1

Just replaced a few text functions with HTML their equivalent

in function type() change text(text); to html(text); like

list   .children(':first')
       .html(text);

In function changeItem() change typewriter.string = next.text(); to typewriter.string = next.html();

These now changes will enable it to process html too

https://jsfiddle.net/L7mk7xu6/

answered Dec 05 '16 at 13:37

Vinay

7,442
6
25
48

Thx Novice so much, you rock! :) But btw can you check this [link](http://jsfiddle.net/creed88/VG8MJ/1/) - there is a function to jump over "inside-tag" typewriting. Can it be and how added to this typewriter too? – Joe May Dec 05 '16 at 13:47
Thanx for ur kind words it was just simple tweaking nothing more.The trick to make typing effect is to first show '_' and give some timeout to remove it before next char. appears you might need to tweak a bit with time value to get desired results http://jsfiddle.net/28z0oc2s/ – Vinay Dec 05 '16 at 15:28
No, what I am trying to achieve is for (main question) typewriter to "jump" over HTML tags during typewriting - as one in link I sent you. I need special function to achieve that but I am really chitty with JS. Link in my comment just gives a way how to do it. If you have time and feel tempted please give it a shot. :P [Here is a problem](https://jsfiddle.net/L7mk7xu6/1/). Thx anyway Novice once more :P – Joe May Dec 05 '16 at 15:54
Yes i got your point the delay is caused due tag scanning , sure i will look into it – Vinay Dec 05 '16 at 17:52
1

No need 4 it just FYI, solved it by myself:P thank you for help in main answer. – Joe May Dec 06 '16 at 14:42
Earlier i thought of an iterative ( to "skip over" `` would have attribute that long, your approach is better.Cheers :) – Vinay Dec 07 '16 at 07:54

JS typewriter from pure text to HTML

1 Answers1