responsive typing news ticker with list of links

Question

please see this plugin

inewsticker

it works fine but it only shows text not links I have a list of list like below

<ul class="typing">
<li><a href="http://test1.com">this is news 1</a></li>
<li><a href="http://test2.com">this is news 2</a></li>
<li><a href="http://test3.com">this is news 3</a></li>
</ul>

I want to show links with typing effect, but it only shows text (not links)

this is the code of plugin

if (t.effect == "typing") {
            var s = 0;
            var o = 0;
            var u = t.delay_after / t.speed;
            var a = (new Array(1 + u)).join(" ");
            var f = new Array;
            i.each(function() {
                f.push(e(this).text() + a)
            });
            count = f.length;
            setInterval(function() {
                result = f[o].substring(0, s);
                e(r).html(result);
                s++;
                if (s == f[o].length) {
                    s = 0;
                    r.appendTo(r).hide().fadeIn("slow");
                    o++;
                    if (count == o) {
                        o = 0
                    }
                }
            }, t.speed)
        }
    }
})(jQuery)

I tried change this

f.push(e(this).text() + a)

to this one

f.push(e(this).html() + a)

it's now clickable but doesnt work properly as previous

help please!

Answer 1

Since what you're trying to do is rather bespoke, I would suggest writing your own code rather than trying to modify inewsticker to do something it's not intended to be used for.

Here's my working attempt and an answer:

$(function() {
    $.fn.typeLinks = function() {
        var typeSpeed = 50,
            delay = 2000,
            $this = $(this),
            $children = $this.children(),
            texts = $children.map(function() {
                return $(this).text();
            }).get();
        var i = 0,
            s = 0;
        var step = function() {
            var $current = $children.eq(i),
                $a = $current.find('a:first');
            $children.hide();
            $current.show();
            $a.text(texts[i].substr(0, s));
            if (s == texts[i].length) {
                s = 0;
                if (i == $children.length - 1) {
                    i = 0;
                }else{
                    i++;
                }
                setTimeout(step, delay);
            } else {
                setTimeout(step, typeSpeed);
            }
            s++;
        };
        step();
    };
    $('.typing').typeLinks();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="typing">
<li><a href="http://test1.com">this is news 1</a></li>
<li><a href="http://test2.com">this is news 2</a></li>
<li><a href="http://test3.com">this is news 3</a></li>
</ul>