PDA

View Full Version : Multi-Column scroller??



jnscollier
01-30-2007, 08:57 PM
1) Script Title:
Fading Scroller

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

3) Describe problem:
Wondering if there is a way to make this script to allow for multiple columns. Basically, I am wanting to scroll three topics (blog titles, new users, and most popular blogs) on my index page. I'd like to have them all side by side, I guess with a simulation like I have three scrollers on the page. My problem is, I tried to put three scrollers on the page and changing variable names/event handlers, etc and it still doesn't work. So I'm trying to find ways around this issue. Any help would be greatly appreciated.

If you know a better way to do this, I'm open to suggestions.

jscheuer1
01-30-2007, 10:45 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/***********************************************
* Fading Scroller- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Modified in http://www.dynamicdrive.com/forums for mutiple use OO scripting
* by John Davenport Scheuer username:jscheuer1
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for TOS source code
***********************************************/

var fcontent=new Array();
fcontent.begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.";
fcontent.closetag='</div>';
fcontent.delay = 2000; //set delay between message change (in miliseconds)
fcontent.maxsteps=30; // number of steps to take to change from start color to endcolor
fcontent.stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
fcontent.startcolor= new Array(255,255,255); // start color (red, green, blue)
fcontent.endcolor=new Array(0,0,0); // end color (red, green, blue)
fcontent.fwidth='150px'; //set scroller width
fcontent.fheight='150px'; //set scroller height
fcontent.fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

var fcontent2=new Array();
fcontent2.begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent2[0]="<b>Some different content here with different settings.</b>";
fcontent2[1]="Blah Blab Blah Blab Blah Blab Blah Blab Blah Blab Blah Blab Blah Blab Blah Blab Blah Blab Blah Blab Blah Blab Blah Blab ";
fcontent2[2]="The wages of sin is death. So, quit before pay day.";
fcontent2[3]="Who knows What.";
fcontent2[4]="This <a href='#'>link</a> won't fade.";
fcontent2.closetag='</div>';
fcontent2.delay = 3000; //set delay between message change (in miliseconds)
fcontent2.maxsteps=90; // number of steps to take to change from start color to endcolor
fcontent2.stepdelay=30; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
fcontent2.startcolor= new Array(255,255,255); // start color (red, green, blue)
fcontent2.endcolor=new Array(0,0,255); // end color (red, green, blue)
fcontent2.fwidth='160px'; //set scroller width
fcontent2.fheight='120px'; //set scroller height
fcontent2.fadelinks=0; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

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

function fade_scroller(content){
//alert('here')
if(!fade_scroller.ar)
fade_scroller.ar=[]
fade_scroller.ar[this.fsid=fade_scroller.ar.length]=this;
this.content=content;
this.ie4=document.all&&!document.getElementById;
this.DOM2=document.getElementById;
this.faderdelay=0;
this.index=0;
if (this.ie4||this.DOM2){
document.write('<div id="fscroller'+this.fsid+'" style="border:1px solid black;width:'+content.fwidth+';height:'+content.fheight+'"></div>');
this.changecontent();
}
}

/*Rafael Raposo edited function*/
//function to change content
fade_scroller.prototype.changecontent=function (){
if (this.index>=this.content.length)
this.index=0
if (this.DOM2){
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);
this.colorfade(1, 15);
}
else if (this.ie4)
document.all['fscroller'+this.fsid].innerHTML=this.content.begintag+this.content[this.index]+this.content.closetag;
this.index++
}

// 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) {
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] + ")");
}

</script>
</head>
<body>
<table>
<tr>
<td><script type="text/javascript">
new fade_scroller(fcontent);
</script></td><td><script type="text/javascript">
new fade_scroller(fcontent2);
</script></td>
</tr>
</table>

</body>
</html>

Note: The script now goes in the head with separate script calls for each scroller, as shown, going in the body.