Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript text rotation with PHP

    Hi, I found a text rotator and am trying to get it to rotate text pulled from php with mysql.

    The script I'm using is here: http://www.javascriptbank.com/random...cript.html/en/

    The PHP I have looks like:
    PHP Code:
    <?php
    date_default_timezone_set
    ('America/Denver');
    include(
    "config.php");
    // Assuming `when` is a real DATE or DATETIME data type in MySQL...
    // compare to CURDATE() to get today's
    $result mysql_query("SELECT * FROM events WHERE `when` = CURDATE()");
    if(
    $result === FALSE) {
        die(
    mysql_error()); // TODO: better error handling
    }

    if (
    $result) {
      
    // array to hold all the output
      
    $events = array();
      while (
    $row mysql_fetch_assoc($result)) {
        
    // Add the event to your array
        
    $events[] = $row['tag'];
      }
      
    // After building the array, encode it as JSON
      // Later you'll echo this into your JavaScript in place of the array...
      
    $events json_encode($events);
    }
    ?>
    which if you print out $events returns a value like
    Code:
    ["Halloween","Christmas"]
    The Javascript I have to try and rotate this looks like this:
    Code:
    <script type='text/javascript'>
    function rotateEvery(sec)
    {
      // The JSON from PHP output here
      // Would look something like
      // ["Event 1","Event 2","Event 3"]
      var Quotations = <?php echo $events; ?>;
    
      var which = Math.round(Math.random()*(Quotation.length - 1));
      document.getElementById('textrotator').innerHTML = Quotation[which];
    
      setTimeout('rotateEvery('+sec+')', sec*1000);
    }
    </script>

    But the javascript wont rotate. Why is this?
    Last edited by infinity0; 07-13-2012 at 05:32 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Check the error console to see if there is an error message.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry, I'm new to Javascript so I googled how to get to the error console on javascript and found this

    Code:
    function log(msg) {
        setTimeout(function() {
            throw new Error(msg);
        }, 0);
    }
    and put it in my code and nothing changed.

    Is this what you mean?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    No. He means TURN ON the debugger in whatever browser you are using. It will have an error console/tab.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    But this is WRONG WRONG WRONG:
    Code:
    var which = Math.round(Math.random()*(Quotation.length - 1));
    That is *NOT* the way to get a proper random number!
    Code:
    var which = Math.floor(Math.random()*Quotation.length);
    And are you ready to kick yourself?
    Code:
    var Quotations = <?php echo $events; ?>;
    
        var which = Math.round(Math.random()*(Quotation.length - 1));
        document.getElementById('textrotator').innerHTML = Quotation[which];
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Here's a working example:
    Code:
    <html>
    <body>
    <div id="textrotator"></div>
    
    <script type="text/javascript">
    var prior = -1;
    function rotate()
    {
        var Quotations = [
            "Now is the time for all good men to come to!",
            "If at first you don't succeed, why not give up?",
            "A penny saved isn't much money.",
            "T'was brillig and the slithy toves..."
        ]
    
        var which = -1;
        // ensure we don't get same one twice in a row
        while ( which == prior )
        {  
            which = Math.floor(Math.random()*Quotations.length);
        }
        document.getElementById('textrotator').innerHTML = Quotations[which];
    
    }
    rotate();
    setInterval( rotate, 3000 );
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Here's a better version:
    Code:
    <html>
    <body>
    <div id="textrotator"></div>
    
    <script type="text/javascript">
    (
      function() {
          var Quotations = [
              "Now is the time for all good men to come to!",
              "If at first you don't succeed, why not give up?",
              "A penny saved isn't much money.",
              "T'was brillig and the slithy toves..."
          ]
    
          var which = Quotations.length; // ensure shuffle happens first
          var lastQuote = "";
          function rotate()
          {
              if ( which >= Quotations.length )
              {
                  // shuffle the quotations
                  do 
                  {
                      Quotations = 
                         Quotations.sort( 
                             function() { return Math.random() >= 0.5 ? 1 : -1; } 
                         );
                  } while ( Quotations[0] == lastQuote )
                  // reset counter
                  which = 0;
              }
              lastQuote = Quotations[which++];
              document.getElementById('textrotator').innerHTML = lastQuote;
    
          }
          rotate();
          setInterval( rotate, 3000 );
      }
    )();
    </script>
    </body>
    </html>
    This one ensures that all the quotations are seen before we start over. And also ensures that the first one seen after starting over isn't the same as the last one in the prior set.

    And, finally, this is "unobtrusive" in the sense that none of the code there can be seen by anything outside the closed scope.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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