SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Text animations

  1. #1
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text animations

    I want to make an animation of text in a particular DIV.
    I'm trying to explain it with a simple example:

    Code:
    var yourDiv = document.getElementById('yourDiv');
    yourDiv.innerHTML =  turnWords();
    
    function turnWords(){
    var fruits = ["banana", "peach", "apple"]
    return fruits[0];
    }
    In this case, the word "banana" shows up in the DIV.

    But now, every 500 miliseconds, the innerHTML of that DIV needs to get another fruit inside.
    I thought about a setTimeOut function with a loop that goes infinitely through the elements of the fruits Array.
    But whatever I try, it doesn't work out. I guess I'm overlooking some javascript basics.

    Can someone help me with this?

  2. #2
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var yourDiv = document.getElementById('yourDiv');
    yourDiv.innerHTML =  setInterval(function(){turnWords(1)},500);
    
    function turnWords(j){
    var fruits = ["banana", "peach", "apple"]
    return fruits[j];
    }
    Something like this above should return "Peach" every 500 miliseconds.
    Instead, it returns a number: "2364661".
    If this worked, I could put the setInterval in some infinite loop that asks turnWords(0), turnWords(1), turnWords(2), turnWords(0), ...

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this?

    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Test</title>
    <script type="text/javascript">
    var yourDiv; 		// div to contain the text
    var fruits = ["banana", "peach", "apple"];
    var currentfruit = 0;
    
    function turnWords(){
      currentfruit = ++currentfruit % fruits.length;
      yourDiv.innerHTML = fruits[currentfruit];
      setTimeout(turnWords, 500);
    }
    
    window.onload = function() {
      yourDiv = document.getElementById('yourDiv');
      yourDiv.innerHTML = fruits[currentfruit];
      turnWords();
    }
    </script>
    </head>
    <body>
      <div id="yourDiv"></div>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll just swap those first 2 lines in the turnWords() function so they correctly show fruits[0] first instead of fruits[1].

    Code:
    function turnWords(){
      yourDiv.innerHTML = fruits[currentfruit];
      currentfruit = ++currentfruit % fruits.length;
      setTimeout(turnWords, 500);
    }

  5. #5
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I see.
    It's much more simpler than I thought


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •