Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Getting an element color to shift smoothly

    I know how to alternate a color simply by setting an interval and switching colors. How would I get the color of an element to smoothly shift back and forth between two different colors, regardless of the colors?

    For instance, if I have a <td> tag with a white background and want that to "throb" between white and red over and over.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    // Color Gradient (11-June-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // Progessively Change Text or BackGround Color between two colors.
    
    // Application Notes
    
    // The script would normally be activated by a MouseOver event
    // e.g.
    // <span style="color:#000000;background-color:#FFFFFF"
    // onmouseover="zxcCngColor(this,50,'#000000','#FFFFFF','#FFFFFF','#FFFFFF');"
    // onmouseout="zxcCngColor(this);"
    // > Some Text </span>
    
    // where zxcCngColor(*Object*,*Steps/Speed*,'*Color1*','*Color2*','*BGColor1*','*BGColor1*',*Hold*);" :
    // *Object*      = the object or unique ID name of the element to change         (object or sting)
    // *Steps/Speed* = the number of steps to change from the initial to final color (digits)
    // '*Color*'     = an array defining the initial & finish text colors            (array or null if not required)
    //                  field 0 = the HEX value of the initial text color (string HEX value)
    //                  field 1 = the HEX value of the finish  text color (string HEX value)
    // '*BGColor*'   = an array defining the initial & finish background colors     (array or omitt if not required)
    //                  field 0 = the HEX value of the initial background color (string HEX value)
    //                  field 1 = the HEX value of the finish  background color (string HEX value)
    // *Hold*        = (optional) the delay before reversing the effect (one cycle) (digits)
    
    //
    // The mouseout call zxcCngColor(*Object*); will reverse the color Change
    
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These characters are easily changed to characters of choice using global find and replace.
    
    // The Functional Code is best as an External JavaScript
    
    // Tested with IE6 and Mozilla FireFox
    
    // Functional Code - No Need to Change
    
    var zxcColCnt=0;
    
    function zxcCngColor(zxcobj,zxcstps,zxccol,zxcbg,zxchld,zxcp){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj.cngcolor){
      zxcobj.cngcolor= new zxcOOPCol(zxcobj,zxcstps,zxccol,zxcbg,zxchld,zxcp);
      zxcobj.cngcolor.ud=-1
     }
     clearTimeout(zxcobj.cngcolor.to)
     zxcobj.cngcolor.ud=-zxcobj.cngcolor.ud;
     zxcobj.cngcolor.changeColor();
    }
    
    function zxcOOPCol(zxcobj,zxcstps,zxccol,zxcbg,zxchld,zxcp){
     this.obj=zxcobj;
     this.ref = 'zxccngcol'+zxcColCnt;
     window[this.ref]=this;
     this.to=null;
     this.cnt=-1;
     this.hold=zxchld;
     this.p=zxcp;
     if (zxccol){ this.colary=new Array(zxcstps); zxcGradientColors(zxccol[0],zxccol[1]||zxccol[0],this.colary); }
     if (zxcbg){ this.bgary=new Array(zxcstps); zxcGradientColors(zxcbg[0],zxcbg[1]||zxcbg[0],this.bgary); }
     zxcColCnt++;
    }
    
    zxcOOPCol.prototype.setTimeOut= function(zxcf,zxcd){
     if (this.p){ this.p.to=this.to; }
     this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
    }
    
    zxcOOPCol.prototype.changeColor=function(){
     this.cnt+=this.ud;
     if ((this.ud>0&&this.cnt<this.colary.length)||(this.ud<0&&this.cnt>=0)){
      if (this.bgary){ this.obj.style.backgroundColor=this.bgary[this.cnt]; }
      if (this.colary){ this.obj.style.color=this.colary[this.cnt]; }
      this.setTimeOut("changeColor();",100);
     }
     else {
      if (this.hold&&this.ud>0){ this.ud=-this.ud; this.setTimeOut("changeColor();",this.hold); }
      else if (this.p){ this.p.oop.rotate(); }
     }
    }
    
    
    function zxcGradientColors(zxcc1,zxcc2,zxcary) {
     zxclen=zxcary.length;
     zxcc1=zxcc1.replace('#',''); zxcc2=zxcc2.replace('#','');
     var zxcr=zxcHexToInt(zxcc1.substring(0,2));
     var zxcg=zxcHexToInt(zxcc1.substring(2,4));
     var zxcb=zxcHexToInt(zxcc1.substring(4,6));
     var zxcr2=zxcHexToInt(zxcc2.substring(0,2));
     var zxcg2=zxcHexToInt(zxcc2.substring(2,4));
     var zxcb2=zxcHexToInt(zxcc2.substring(4,6));
     var zxcrstep=Math.round((zxcr2-zxcr)/zxclen);
     var zxcgstep=Math.round((zxcg2-zxcg)/zxclen);
     var zxcbstep=Math.round((zxcb2-zxcb)/zxclen);
     for (zxc0=0;zxc0<zxclen-1;zxc0++){
      zxcary[zxc0]="#"+zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb);
      zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep;
     }
     zxcary[zxclen-1]='#'+zxcc2;
    }
    
    function zxcIntToHex(zxcn){
     if (zxcn>255){ zxcn=255; }
     var zxcresult=zxcn.toString(16);
     if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
     return zxcresult;
    }
    
    function zxcHexToInt(zxchex){
     return parseInt(zxchex,16);
    }
    
    //-->
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That was a big chunk of bloatware.

    I probably could do it in 5 lines.

    Let me think of something.
    Last edited by tonyp12; 02-08-2007 at 03:12 AM.

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is one that just do fade from color to white and back.

    In this example 255, f, f = red-white-red.
    And it's only 4 lines of code., beat that Vic Phillips
    (and from any color to any color I can do in 8 lines)

    Works only in IE, see furter down for a Multi browser version.
    Code:
    <html>
    <head>
    <script type="text/JavaScript">
    
    function colorfade(f,d){
    document.getElementById('mycolor').style.color = (255<<16) + (f<<8) + f
    if (d==1){f +=16;if (f>255){d=0;f=255}}
    else{f = f-16;if (f<0) {d=1;f=0}}
    setTimeout('colorfade(' + f + ',' + d + ');', 50);
    }
    
    </script>
    </head>
    <body onLoad="colorfade(0,1)">
    <div id="mycolor">TEXT</div>
    
    </body>
    </html>
    Last edited by tonyp12; 02-08-2007 at 02:19 AM.

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I out did myself as I figure out how to it with just two lines of code.
    by turning (minus255 to 255) in to (0 to 255 to 0) and in reality going white-red-white

    works only in IE, see furter down for a multi browser version

    function colorfade(f){
    document.getElementById('mycolor').style.color = (255<<16) + (255-Math.abs(f)<<8) + 255-Math.abs(f)
    f +=16;if (f>255){f=-255};setTimeout('colorfade(' + f + ');', 20);
    }


    start it with: colorfade(0)

    If you want smooter you can use f +=8, the speed is the last ,20); (under 20 is probably faster than screen refresh, so a no-no)
    or use this for a more subtle fade: f +=4;if (f>128){f=-128};
    Last edited by tonyp12; 02-08-2007 at 02:19 AM.

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,827
    Thanks
    19
    Thanked 157 Times in 148 Posts
    Quote Originally Posted by tonyp12 View Post
    I think I out did myself as I figure out how to it with just two lines of code.
    by turning (minus255 to 255) in to (0 to 255 to 0) and in reality going white-red-white


    function colorfade(f){
    document.getElementById('mycolor').style.color = (255<<16) + (255-Math.abs(f)<<8) + 255-Math.abs(f)
    f +=16;if (f>255){f=-255};setTimeout('colorfade(' + f + ');', 20);
    }


    start it with: colorfade(0)
    That's cool, but it doesn;t work cross-browser (works in IE but not FF)...

    "<<" is a JScript operator...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    FF's javascript interpreter can not handle << (bit-shifting) ???
    That's an old habit from programming with 1mhz cpu's, always use bit-shifting if possible (much faster than mulitply)
    replace (<<16) with (* 65536) and (<<8) with (* 256)

    FF can not handle a absolute decimal, but wants a string like this.
    .style.color = "rgb(255," + (255-Math.abs(f)) + "," + (255-Math.abs(f)) + ")"
    Last edited by tonyp12; 02-08-2007 at 02:04 AM.

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,827
    Thanks
    19
    Thanked 157 Times in 148 Posts
    It's still not working in FF... Do you have a copy of FF to test in? If you write code that only works in IE, then you aren;t really a web developer, you;re a Microsoft developer...

    It appears you are not assigning a valid hexadecimal value to the CSS color property.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #9
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I downloaded Firefox

    .style.color = "#f0f0f0"
    or
    .style.color = "rgb(255,255,255)"

    is the correct way (with quotes)
    Last edited by tonyp12; 02-08-2007 at 02:29 AM.

  • #10
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here it is, a IE and FF compatible version (still only two lines )
    This must be some type of record for shortest function!

    Code:
    <html>
    <head>
    <script type="text/JavaScript">
    
    function fade(id,f){
     var d=","+(255-Math.abs(f));document.getElementById(id).style.background ="rgb(255"+d+d+")"; 
     f=f>174?-180:f+6;setTimeout('fade("'+id+'",'+f+')',30);
    }
    
    </script>
    </head>
    <body onLoad="fade('myc',0);fade('myc2',-66)">
    
    <div id="myc" style="width:28em; height:1.2em;"><b><center>The box behind this text should fade white to red forever</div><br>
    The same <span id="myc2">but out of sync, and using span</span>
    
    </body>
    </html>
    Last edited by tonyp12; 02-08-2007 at 08:09 AM.

  • #11
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Change first line to this for: Green
    var d=255-Math.abs(f);document.getElementById(id).style.background ="rgb("+d+",255,"+d+")";

    Blue:
    var d=255-Math.abs(f)+",";document.getElementById(id).style.background ="rgb("+d+d+"255)";


    Cyan to Red:
    var d=","+(255-Math.abs(f));document.getElementById(id).style.background ="rgb("+Math.abs(f)+d+d+")";
    Last edited by tonyp12; 02-08-2007 at 05:15 PM.

  • #12
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,827
    Thanks
    19
    Thanked 157 Times in 148 Posts
    Looks good, a few things I changed but nothing too important:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title></title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    </head>
    
    <body onload="fade('myc',0);fade('myc2',-66);">
    
    <div id="myc" style="width:28em; height:1.2em;"><b><center>The box behind this text should fade white to red forever</div>
    <br>
    The same <span id="myc2">but out of sync, and using span</span>
    
    <script type="text/javascript">
    <!--
    
    function fade(id,f)
    {
        var d = (255-Math.abs(f));
        document.getElementById(id).style.backgroundColor ="rgb("+d+",255,"+d+")";
        f = (f > 174) ? -180 : f + 6;
        setTimeout('fade("'+id+'",'+f+')',30);
    }
    
    -->
    </script>
    
    </body>
    
    </html>
    What do the numbers "0" and "-66" mean in the function argument? Wouldn't it be nice and more user-friendly if you allowed the programmer to alter the color inside the argument, instead of editing the function? I.E.,


    Code:
    <body onload="fade('myc','#ff000');fade('myc2','#ff000');">
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #13
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What do the numbers "0" and "-66"
    My code is not to be user friendly but setting a record in shortest function.

    As setTimeout is calling a function , you have to pass along varibles.
    It passes along the f value, as it would not remember that in next loop.

    The side-effect is that you can make f start at any number you want.

    0 is normal, in the fade-math that would be white.

    But you can use any number between -255 to +255
    Doing so would couse it to start at a different sync.

    I may make a version that can start at any color and fade to any color, but will be 8 lines of code (e.g not that cute)

  • #14
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by tonyp12 View Post
    FF's javascript interpreter can not handle << (bit-shifting) ???
    [/FONT]
    Every Javascript and ECMAScript-compatible engine can handle bit-shifting just fine, btw. Even NS2.

  • #15
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,827
    Thanks
    19
    Thanked 157 Times in 148 Posts
    My code is not to be user friendly but setting a record in shortest function.
    In addition to usability, the code is also not flexible because it only allows you to fade about 3-4 different colors....you should be able to fade ANY color ideally...

    But you are on the right track...

    And by the way, I can write a function shorter than yours and it won;t be user-friendly either (or useful, even)...here it is (one line):

    Code:
    function blah(num) {num++;setTimeout('blah('+num+')',50);}
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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