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.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What is the matter with my colorFader script?

    This is my code

    Code:
    <script>
    
    //START RGB NUMS
    var spRed=new Array();
    var spGre=new Array();
    var spBlu=new Array();
    //END RGB NUMS
    
    var spLinkVars=new Array();
    var splinkTimer=new Array();
    function sp_creatVar() {
    for(var spCount=0;spCount<document.links.length;spCount++){
    
    document.links[spCount].setAttribute('id','aLinkId'+spCount);
    spLinkVars[spCount];
    spRed[spCount]=0;
    spGre[spCount]=0;
    spBlu[spCount]=0;
    
    document.links[spCount].id="fadeLink"+spCount;
    }
    }
    
    function sp_linkFade(red,gre,blu,whichid,timerwhich){
    clearTimeout(timerwhich);
    if(blu<=165){
    clearTimeout(timerwhich);
    document.getElementById(whichid).style.backgroundColor='rgb('+ red +','+ gre +','+ blu +')';
    red=red+2;
    gre=gre+4;
    blu=blu+5;
    timerwhich=setTimeout(function() {sp_linkFade(red,gre,blu,whichid,timerwhich)},0);
    }else{
    clearTimeout(timerwhich);
    }
    }
    
    function sp_linkFadeOut(red,gre,blu,whichid,timerwhich){
    clearTimeout(timerwhich);
    if(blu>=0){
    clearTimeout(timerwhich);
    document.getElementById(whichid).style.backgroundColor='rgb('+ red +','+ gre +','+ blu +')';
    red=red-2;
    gre=gre-4;
    blu=blu-5;
    timerwhich2=setTimeout(function() {sp_linkFadeOut(red,gre,blu,whichid,timerwhich)},0);
    }else{
    clearTimeout(timerwhich);
    }
    }
    
    
    </script>
    <style>
    body{margin:100px;}
    a{text-decoration:none;padding-left:15px;padding-top:10px;padding-bottom:10px;border-left:1px solid white;border-right:1px solid white;width:300px;color:white;background:black;}
    </style>
    
    <body bgcolor="#0a0a43" onload="sp_creatVar();">
    <a onmouseover="sp_linkFade(spRed[0],spGre[0],spBlu[0],this.id,splinkTimer[0]);" onmouseout="sp_linkFadeOut(spRed[0],spGre[0],spBlu[0],this.id,splinkTimer[0]);" href="">link 1</a><br>
    <a onmouseover="sp_linkFade(spRed[1],spGre[1],spBlu[1],this.id,splinkTimer[1]);" onmouseout="sp_linkFadeOut(spRed[1],spGre[1],spBlu[1],this.id,splinkTimer[1]);" href="">link 2</a><br>
    <a onmouseover="sp_linkFade(spRed[2],spGre[2],spBlu[2],this.id,splinkTimer[2]);" onmouseout="sp_linkFadeOut(spRed[2],spGre[2],spBlu[2],this.id,splinkTimer[2]);" href="">link 3</a><br>

    The mouseover works perfectly, but why does the onmouseout just turn to black? It is supposed to fade to black just like the onmouseout works. Are my variables not working like they should? Because I made a script that dynamically creates variables according to how many links there are. Please help me out here.
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can someone take a look at this and help me? I've been doing many searches and haven't found anything that can help me here.
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Would someone mind helping me? Sorry for being impatient but it's been 3 days and I have to get this working before I work on my site any more.
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    tou could use this til I have a look
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <span style="color:#000099;" onmouseover="zxcCngColor(this,'#000099','#66FFFF','#990000','#FF6666',20);" onmouseout="zxcCngColor(this);"> Some Text </span>
    <br>
    <br>
    <span style="color:#000000;" onmouseover="zxcCngColor(this,'#000000','#FFFFFF','#FFFFFF','#FFFFFF',50);" onmouseout="zxcCngColor(this);"> Some Text </span>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Change Color (12-12-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    // and Original: WarpGear Software (jsfader@warpgear.com)  
    
    // 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,'#000000','#FFFFFF','#FFFFFF','#FFFFFF',50);"
    // onmouseout="zxcCngColor(this);"
    // > Some Text </span>
    
    // where zxcCngColor(*Object*,'*Color1*','*Color2*','*BGColor1*','*BGColor1*',*Steps/Speed*);" :
    // *Object*      = the object or unique ID name of the element to change         (object or sting)
    // '*Color1*'    = the HEX value of the initial text color                       (string HEX value)
    // '*Color2*'    = the HEX value of the finish  text color                       (string HEX value)
    // '*BGColor1*'  = the HEX value of the initial background color                 (string HEX value)
    // '*BGColor2*'  = the HEX value of the finish  background color                 (string HEX value)
    // *Steps/Speed* = the number of steps to change from the initial to final color (digits)
    
    //
    // The mouseout call zxcCngColor(*Object*); will reverse the color Change
    
    
    
    
    // Functional Code - No Need to Change
    
    var zxcCnt=0;
    
    function zxcCngColor(zxcobj,zxccol1,zxccol2,zxcbg1,zxcbg2,zxcstps){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj.cngcolor){
      zxcobj.cngcolor= new zxcAddFunctions(zxcobj,zxccol1,zxccol2,zxcbg1,zxcbg2,zxcstps);
      zxcobj.colcng=false;
     }
     if (zxcobj.colcng){ zxcobj.colcng=false; }
     else { zxcobj.colcng=true; }
     clearTimeout(zxcobj.cngcolor.to)
     zxcobj.cngcolor.changeColor();
    }
    
    function zxcAddFunctions(zxcobj,zxccol1,zxccol2,zxcbg1,zxcbg2,zxcstps){
     this.obj=zxcobj;
     this.ref = 'zxccngcol'+zxcCnt;
     window[this.ref]=this;
     this.to=null;
     this.cnt=0;
     this.colary=new Array(zxcstps);
     zxcFadeColors(zxccol1,zxccol2,this.colary);
     this.bgary=new Array(zxcstps);
     zxcFadeColors(zxcbg1,zxcbg2,this.bgary);
    
     this.setTimeOut= function(zxcf,zxcd){
      this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
     }
    
     this.changeColor=function(){
      this.obj.style.backgroundColor=this.bgary[this.cnt];
      this.obj.style.color=this.colary[this.cnt];
      if (this.obj.colcng){ this.cnt++; }
      else { this.cnt--; }
      if ((this.obj.colcng&&this.cnt<this.colary.length)||(!this.obj.colcng&&this.cnt>0)){this.setTimeOut("changeColor();",100); }
     }
     zxcCnt++;
    }
    
    
    
    
    
    
    // from Here -Original: WarpGear Software (jsfader@warpgear.com)
    
    function zxcFadeColors(zxcc1, zxcc2,zxcary) {
     zxclen=zxcary.length;
     if (zxcc1.charAt(0)=='#'){ zxcc1=zxcc1.substring(1); }
     if (zxcc2.charAt(0)=='#'){ zxcc2=zxcc2.substring(1); }
     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){
     var zxcresult=zxcn.toString(16);
     if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
     return zxcresult;
    }
    
    function zxcHexToInt(zxchex){
    return parseInt(zxchex,16);
    }
    
    //-->
    </script>
    </body>
    
    </html>

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    I've looks at your code

    An unconventional way of attempting OOP

    but quickly runs out of steam.

    suggest you adopt more contentional ways of OOP

    easier once you take the leap, see the work I am doing for canadianjames on this forum

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    previous script had a couple of bugs in FF

    Code:
    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; }
     if (zxcn<0){zxcn=0; }
     var zxcresult=zxcn.toString(16);
     if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
     return zxcresult;
    }
    
    function zxcHexToInt(zxchex){
    return parseInt(zxchex,16);
    }

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you much, but may I ask what OOP is? Thanks again for posting
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    object orientated programming

    which what I believe you were trying to achive by having multiple objects using the same function(at the same time)
    with oop each object has its own instance of the same function.

  • #9
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh ok, and yes that is exactly what I was trying to do. Thank you again.
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old


  •  

    Posting Permissions

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