Display a sentence, one character at a time

Question

I want to display a sentence one character at a time, one by one, with jQuery. Is there a plugin that can do this Or how could I get this effect?

Answer 1

Have a look at the TickerType plugin: http://www.hungry-media.com/code/jQuery/tickerType/

Answer 2

var chars = $("#target").html().split(/./);
var content = "";
$.each(chars, function(index, value) { 
  content += "<span style='display:none'>"+value+"</span>"; 
});

$("#target").html(content);
$("#target span").each(function(){
  $(this).show();
});

Answer 3

This converts a string to an array, and writes out it out character at a time.

var str = "This is a sentence".split('');

for (var i=0; i < str.length; i++) {
    console.log(str[i]);
};

http://jsfiddle.net/44xEe/1/

Answer 4

You could write a little plugin to do it. Here's something to get you started (far from perfect, just to give you an idea!):

(function($) {
    $.fn.writeText = function(content) {
        var contentArray = content.split(""),
            current = 0,
            elem = this;
        setInterval(function() {
            if(current < contentArray.length) {
                elem.text(elem.text() + contentArray[current++]);
            }
        }, 100);
    };

})(jQuery);

You can call that like this:

$("#element").writeText("This is some text");

Here's a working example.

Answer 5

I created a neat little js library recently with no dependencies that solves this minimalistically. Check out Sequencr.js

var stringToPrint = "Hello World!"
Sequencr.for(0, stringToPrint.length, function(i) {
  document.getElementById("output").innerHTML += stringToPrint[i];
}, 200, null);

<!--This is sequencr lib. For demonstration purposes only (don't copy this) - download the latest version from https://github.com/JSideris/Sequencr.js -->
<script type="text/javascript">
function Sequencr(){this.chain=function(n,c){Sequencr["for"].apply(this,[0,n.length,function(c){n[c].call(this)},c])},this["for"]=function(n,c,e,t,i){c>n?setTimeout(function(u){e.call(u,n),Sequencr["for"].apply(u,[n+1,c,e,t,i])},t,this):i&&i.call(this)}}var Sequencr=new Sequencr;
</script>



<div id="output"></div>

Answer 6

The site you referenced^* uses jQuery Ticker, which can be found online at http://www.jquerynewsticker.com/

It's relatively simple to implement too:

<div id="ticker-wrapper" class="no-js">
    <ul id="js-news" class="js-hidden">
        <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
    </ul>
</div>

With the following jQuery/JavaScript:

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

See plugin documentation for further options and configuration details.

^{* Referenced site may not be listed in OP due to its content}