SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    466
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating Very Simple Animation With A Loop

    Hello,

    I'm a php guy and I need help for a simple javascript thingy. (I'm terrible at javascript).

    I have a php array that looks like this:
    $myarray= array ('Saab', 'Volvo', 'BMW');

    It could obviously be converted to a javascript array fairly easily.

    This array will be dynamically generated on the page, but this is just an example.


    The "animation" is the text in the array. I want to display $myarray[0], wait one second, and then display $myarray[1] directly underneath $myarray[0] etc until all the values in the array have been displayed.

    See my attached image for details.

    I don't have a clue where to start with this. How would you guys approach it?

    Thanks,
    Brandon
    Attached Images Attached Images
    • File Type: gif 3.gif (6.3 KB, 4 views)
    Home Recording Forum -
    Make 60% Commission Pushing my new mega system
    Killer Home Recording

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTH

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function delayArray(array, which, time) {
                    var p = document.createElement('P');
                        p.appendChild(document.createTextNode(array[which]));
                        document.getElementById('container').appendChild(p);
                    if(which == (array.length-1)) {
                        alert('Complete');
                        return;
                    }
                    setTimeout(function() {
                        delayArray(array, which+1, time);
                    }, time);
                }
                function setup() {
                    var test = new Array('Saab', 'Volvo', 'BMW');
                    delayArray(test, 0, 1000);
                }
            </script>
        </head>
        <body>
            
            <input type="button" value="Go" onclick="setup();" />
    
            <div id="container"></div>
    
        </body>
    </html>



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
  •