Results 1 to 6 of 6

Thread: Multiple Fading Scrollers?

  1. #1
    Join Date
    Mar 2007
    Location
    Buffalo, NY
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multiple Fading Scrollers?

    1) Script Title: Fading Scroller

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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    As it stands no. You'll have to wait until I get to rewriting this script to support this.

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

    Default

    I made one of those up awhile back:

    http://home.comcast.net/~jscheuer1/s...croller_oo.htm

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

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

  4. #4
    Join Date
    Mar 2007
    Location
    Buffalo, NY
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot John!

  5. #5
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default One extra feature

    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!

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

    Default

    Replace the main body of the script with this:

    Code:
    ///////////////////// 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:

    Code:
    fcontent.pausebetween=2000  //optional added delay (blank space) between messages (in milliseconds)
    Last edited by jscheuer1; 03-24-2007 at 08:09 PM. Reason: Improve Implementation
    - 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
  •