Question

I have text inside a DIV tag. Is it possible to change the text content with five different text contents in cycle that never ends? Sounds simple, but I’m trying to find the easiest approach with jquery or related.

Many thanks,
Erik

Answer 1

Really simple approach: use setInterval().

var text = ['foo', 'bar', 'baz'];
    i = 0,
    $div = $('#myDiv');

setInterval(function ()
{
    $div.text(text[i++ % text.length]);
}, 1000);

http://jsfiddle.net/mattball/TJv3K/

---

Edit If you want to get fancier with the effects: http://jsfiddle.net/mattball/TJv3K/1/

---

Edit 2 re OP comments (below)

• Fix #1: use distinct variable names for each rotator, because variable scoping is unaffected by <script> tags.
• Fix #2: don’t change variable names, but use closures so that the global scope isn’t polluted.

Other fixes needed (shown in both fiddles):

• Actually load jQuery from somewhere, otherwise none of this code will work.

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  

• Remove the trailing comma at the end of the first text array literal

• Change the semicolons following the two text array declarations to commas, otherwise the following variables (i and $div) will be declared as global, which is a bad thing.