Javascript text rotation with PHP

infinity0

07-13-2012, 05:25 PM

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-text-rotator-script.html/en/

The PHP I have looks like:
<?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
["Halloween","Christmas"]

The Javascript I have to try and rotate this looks like this:

<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?

WolfShade

07-13-2012, 06:06 PM

Check the error console to see if there is an error message.

infinity0

07-13-2012, 06:14 PM

Sorry, I'm new to Javascript so I googled how to get to the error console on javascript and found this

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

Is this what you mean?

Old Pedant

07-13-2012, 10:25 PM

No. He means TURN ON the debugger in whatever browser you are using. It will have an error console/tab.

Old Pedant

07-13-2012, 10:34 PM

But this is WRONG WRONG WRONG:

var which = Math.round(Math.random()*(Quotation.length - 1));

That is *NOT* the way to get a proper random number!

var which = Math.floor(Math.random()*Quotation.length);

And are you ready to kick yourself?

var Quotations = <?php echo $events; ?>;

var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];

Old Pedant

07-13-2012, 10:36 PM

Here's a working example:

<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>

Old Pedant

07-13-2012, 10:57 PM

Here's a better version:

<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.