jQuery Ticker | Allow html?

Question

I wrote a small jQuery ticker plugin from what I've found from the internet. It does it's job perfectly, but I want it to allow html tags, and I'm stuck with it, as I'm unable to write html tags properly. It just writes them, and nothing else, so I'm unable to create line breaks or strong text.

Here's code:

(function($) {
    $.fn.Ticker = function(cont,time) {
        var conArray = cont.split(""),
            current = 0,
            elem = this;
        setInterval(function() {
            if(current < conArray.length) {
                elem.html(elem.html() + conArray[current++]);
            }
        }, time);
    };

})(jQuery);
var tickertext = $("#tickertext").html();
$(document).ready(function(){
    $("#tickto").Ticker(tickertext,50);
});

And a fiddle about it:http://jsfiddle.net/29axW/ If I console.log(conArray) a link like this <a href="kissa.php">moi</a> I get

["<", "a", " ", "h", "r", "e", "f", "=", """, "k", "i", "s", "s", "a", ".", "p", "h", "p", """, ">", "m", "o", "i", "<", "/", "a", ">"] 

But it simply writes is as plaintext. So I need it to parse trough html tags first and insert them without the user seeing it, and so on...

Answer 1

You can skip the interval if a HTML-Tag is reached... Take a look how I realized this here: https://github.com/yckart/jquery.typer.js/blob/master/jquery.typer.js#L34-L38

Here's a working example.

Answer 2

It is because the browser gets one character of a tag at a time so doesn't render it as a tag. You may need to split the string into tags and text and then split the text into individual characters.

I'll try to think of an easy way to do this.

Answer 3

Html tag should be completed, before you send it to browser. Otherwise its threated like string.

I was thinking about solution. You should work with html tree, find nested html tags and append text into them. Theres my Fiddle, its extending yours. I'm sorry for mess, this code should be upgraded, but i showing basic idea.

It works with nested tags (like <strong><i>text</i></strong>) and tags without closing like <br/>.

Say if you need some additional explanation.