PDA

View Full Version : Multiple Fading Scrollers?



CobraCommander
03-15-2007, 01:13 PM
1) Script Title: Fading Scroller

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

3) Describe problem: I am wondering if it is possible to have multiple fading scrollers on one page. As it stands, I have copied the code to 3 areas on my page, but only one scroller displays. How would I have to define them to get them to work?

Thanks.

ddadmin
03-15-2007, 10:44 PM
As it stands no. You'll have to wait until I get to rewriting this script to support this. :)

jscheuer1
03-16-2007, 03:35 AM
I made one of those up awhile back:

http://home.comcast.net/~jscheuer1/side/fade_scroller_oo.htm

Use your browser's 'view source' to see the code.

CobraCommander
03-20-2007, 05:33 PM
Thanks a lot John!

halloweenpropshop
03-24-2007, 05:14 PM
Hi,

I have seen this script, nicely done by the way! Sometimes between messages it almost appears that the messages lay on top of each other.

It would be nice to have a programmable var for a delay between each message.

Sequence

enter page - current script starts running

display first array element

once first message disappears wait some user defined programmed amount of time.

increment to next array element and start over.

I would not want the delay to be before the first array element was displayed. I want the first array element to display right away.

Thanks for your time!

jscheuer1
03-24-2007, 06:31 PM
Replace the main body of the script with this:


///////////////////// Stop Editing /////////////////////

function fade_scroller(content){
if(!document.getElementById)
return;
if(!fade_scroller.ar)
fade_scroller.ar=[];
fade_scroller.ar[this.fsid=fade_scroller.ar.length]=this;
this.content=content;
this.index=0;
document.write('<div id="fscroller'+this.fsid+'" style="border:'+(content.border? content.border : '1px solid black')+';width:'+content.fwidth+';height:'+content.fheight+'"></div>');
if(this.content.pause){
var sdiv=document.getElementById('fscroller'+this.fsid);
var cacheobj=this;
sdiv.onmouseover=function(){cacheobj.pausing=1;};
sdiv.onmouseout=function(){cacheobj.pausing=0;};
}
this.changecontent();
}

/*Rafael Raposo edited function*/
//function to change content
fade_scroller.prototype.changecontent=function (){
var cachobj=this;
if(this.pausing){
setTimeout(function(){cachobj.changecontent();}, 300);
return;
}
if (this.index>=this.content.length)
this.index=0
document.getElementById('fscroller'+this.fsid).style.color="rgb("+this.content.startcolor[0]+", "+this.content.startcolor[1]+", "+this.content.startcolor[2]+")"
document.getElementById('fscroller'+this.fsid).innerHTML=this.content.begintag+this.content[this.index]+this.content.closetag
if (this.content.fadelinks)
this.linkcolorchange(1);
else if(this.playing&&this.content.pausebetween)
this.linkhide('hidden');
setTimeout(function(){cachobj.colorfade(1);}, this.playing&&this.content.pausebetween? this.content.pausebetween : 0);
this.playing=true;
this.index++
}

fade_scroller.prototype.linkhide=function(state){
this.obj=document.getElementById('fscroller'+this.fsid).getElementsByTagName('a');
if (this.obj.length>0)
for (var i=0;i<this.obj.length;i++)
this.obj[i].style.visibility=state;
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com

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

/*Rafael Raposo edited function*/

fade_scroller.prototype.colorfade=function (step) {
if(!this.content.fadelinks&&this.playing&&this.content.pausebetween)
this.linkhide('');
var cacheobj=this
if(step<=this.content.maxsteps) {
document.getElementById('fscroller'+this.fsid).style.color=this.getstepcolor(step);
if (this.content.fadelinks)
this.linkcolorchange(step);
this.step=step+1;
this.fadecounter=setTimeout(function(){cacheobj.colorfade(cacheobj.step);},this.content.stepdelay);
}else{
clearTimeout(this.fadecounter);
document.getElementById('fscroller'+this.fsid).style.color="rgb("+this.content.endcolor[0]+", "+this.content.endcolor[1]+", "+this.content.endcolor[2]+")";
setTimeout(function(){cacheobj.changecontent();}, this.content.delay);

}
}

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

Now you can use this along with the other array properties to set a delay for blank space between messages:


fcontent.pausebetween=2000 //optional added delay (blank space) between messages (in milliseconds)