Fading Scroller random?

[VictoryCig]

1) Script Title: Fading Scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm

3) Describe problem: This script fades through bits of text set up in an array from 0 - 5. I'd like to have the script fade through the text items randomly rather than sequentially.

Many thanks in advance to anyone who can help with this.

For your reference, here's the script as I'm using it:


/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var delay=8000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor=new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fcontent=new Array();
begintag='<p>'; //set opening tag, such as font declarations
fcontent[0]="\"We must be the change we wish to see.\" -Mahatma Ghandi";
fcontent[1]="\"Direct action is the lifeblood of organizing; that is where people learned and find dignity, and that is where victories are won.\" -Shel Trapp";
fcontent[2]="\"Make no little plans, they have no magic to stir men's blood.\" -Daniel Burnham";
fcontent[3]="\"No man is worth his salt who is not ready at all times to risk his body, to risk his well-being, to risk his life, in a great cause.\" -Dr. Martin Luther King, Jr.";
fcontent[4]="\"If one part suffers, every part suffers with it; If one part is honored, every part rejoices with it.\" -I Corinthians 12:26";
fcontent[5]="\"We are caught in an inescapable network of mutuality; tied in a single garment of destiny. Whatever affects one directly, affects all indirectly.\" -Dr. Martin Luther King, Jr.";
closetag='</p>';

var fwidth='934px'; //set scroller width
var fheight='40px'; //set scroller height

var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);

}
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4||DOM2)
document.write('<div id="fscroller" style="border:none:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

[jscheuer1]

That depends upon what you mean. If you just want the order to be set as random when the page loads, add:


var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////

fcontent.sort(function() {return 0.5 - Math.random();});
var ie4=document.all&&!document.getElementById;
var DOM2=doc . . .

That will scramble the order, but then it will repeat in that same scrambled order over and over again.

If you also want it to scramble again - say each time it has gone through one rotation, also add:


function changecontent(){
if (index>=fcontent.length){
index=0
fcontent.sort(function() {return 0.5 - Math.random();});
if(fcontent[index] == changecontent.test && fcontent.push && fcontent.shift)
fcontent.push(fcontent.shift());
}
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
changecontent.test = fcontent[index];
index++
}

Either way though, be aware that this is random scrambling. So any given scramble may result in the original unscrambled order, or in the same order as the previous scramble. I did add a little bit in there to at least prevent the same quote from appearing twice in a row though.

One other thing that I noticed was that you've changed this line:


document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

to:


document.write('<div id="fscroller" style="border:none:'+fwidth+';height:'+fheight+'"></div>');

This results in invalid style. You should use this instead:


document.write('<div id="fscroller" style="border:none;width:'+fwidth+';height:'+fheight+'"></div>');

But that will result in your set width (from the configuration - 934px) being used, and I don't think you want that, though I'm not sure. If you want it to be allowed to be as wide as it needs to be, use:


var fwidth='auto'; //set scroller width
var fheight='40px'; //set scroller height

for the width configuration. But then of course, in narrower windows, it will wrap some of the longer quotes, and your height (40px) is not high enough to allow for that, so 65px, or even 2.5em may be a better choice there.

Wrapping will also occur for the longest quote at 934px, so the height should be increased in either case.

[VictoryCig]

This is a wonderfully helpful reply. Thank you very much for your code and advice.

I will implement this later today and hopefully not need to come back with another question ;)

[Midori]

Thanks dear jscheuer1
How can I add mouseover stop action to this script?

[jscheuer1]

Add the highlighted as shown here:


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if(changecontent.mouseisover){
setTimeout(function(){changecontent();}, 300);
return;
}
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElem . . .

and here:


if (ie4||DOM2)
document.write('<div onmouseover="changecontent.mouseisover=true;" onmouseout="changecontent.mouseisover=false;" id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

[Midori]

Thank you very much .