How can I make this text rotator random?

The Chef

07-10-2012, 11:16 PM

I pulled a simple Javascript snippet that performs a simple fade in/out quote rotator.

Here is a demo of it: Demo (http://www.vijayjoshi.org/examples/textRotator.html)

Right now it runs through the quotes as I input them by use of DIVs

<div id="quotes">
<div>Before turning to those moral and mental aspects of the matter which
present the greatest difficulties, let the inquirer begin by mastering
more elementary problems.
</div>

<div>How often have I said to you that when you have eliminated the
impossible, whatever remains, however improbable, must be the truth?
</div>
</div>

Here is the Javascript that runs it:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/
jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setupRotator();
});
function setupRotator()
{
if($('.textItem').length > 1)
{
$('.textItem:first').addClass('current').fadeIn(1000);
setInterval('textRotate()', 3000);
}
}
function textRotate()
{
var current = $('#quotes > .current');
if(current.next().length == 0)
{
current.removeClass('current').fadeOut(1000);
$('.textItem:first').addClass('current').fadeIn(1000);
}
else
{
current.removeClass('current').fadeOut(1000);
current.next().addClass('current').fadeIn(1000);
}
}
</script>

How can I modify this script to make it pull a quote randomly?
I tried changing current.next() to current.Math.random() but no luck.

Thanks for the help!

The Chef

07-11-2012, 03:15 PM

Anyone?

Philip M

07-11-2012, 04:17 PM

No idea, I don't use jQuery. You might do better if you posted in the jQuery forum. Try this instead.

<html>
<head>
</head>

<body onload = "changetext()">

<div id="textrotator" style="font: 16px arial bold; width: 100%; color: rgb(255,255,255)"></div>

<script type = "text/javascript">

var hexinput= 255; // initial color value.

var quotation = [];
quotation[0] = "...The big brown fox jumped over the tall fence"
quotation[1] = "...The wind is blowing cold snow across the dark black road"
quotation[2] = "...Fall has many colors and black is not one of them"
quotation[3] = "...the blue bird lives in the big red barn"
quotation[4] = "...Mr. Grant really believes that the Bullhas skills, which are widespread"
quotation[5] = "...Sixth quotation"

Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
while (s.length) this.push(s.pop());
return this;
}
quotation.shuffle(); // shuffle the quotations

function fadingtext(){
if(hexinput>0) {
hexinput-=11; // increase color value
document.getElementById("textrotator").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.
setTimeout("fadingtext()",200);
}
else {
hexinput=255; //reset hex value
}
}

var count = 0;
var len = quotation.length;
function changetext(){
document.getElementById("textrotator").innerHTML=quotation[count]; // and display it
count ++;
if (count >len-1) {
quotation.shuffle(); // shuffle the quotation array again
count = 0; // reset the counter
}
if (count >len-1) {count = 0}
fadingtext();

setTimeout("changetext()",5000);
}

//window.onload=changetext(); // if not in <BODY onload>

</script>

</body>
</html>

"A good reputation can take years to aquire, a bad one takes a few seconds"

The Chef

07-12-2012, 12:14 AM

Thanks! I'll give this a shot. And woops - forgot this was jQuery.