...

View Full Version : What is the matter with my colorFader script?



Single Paradox
12-31-2005, 01:29 AM
This is my 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
12-31-2005, 08:52 PM
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
01-02-2006, 08:17 AM
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.

vwphillips
01-02-2006, 08:29 AM
tou could use this til I have a look


<!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>

vwphillips
01-02-2006, 11:25 AM
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

vwphillips
01-02-2006, 05:27 PM
previous script had a couple of bugs in FF



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);
}

Single Paradox
01-02-2006, 10:46 PM
Thank you much, but may I ask what OOP is? Thanks again for posting :)

vwphillips
01-02-2006, 10:50 PM
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.

Single Paradox
01-04-2006, 02:46 AM
Oh ok, and yes that is exactly what I was trying to do. Thank you again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum