Results 1 to 2 of 2

Thread: Multi-Column scroller??

  1. #1
    Join Date
    Jan 2007
    Posts
    94
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Cool Multi-Column scroller??

    1) Script Title:
    Fading Scroller

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •