Fading a TR

[techkate]

I'm trying to use some code I found to fade the color of an element, in my case, a row (tr). On the website from which the code originated,

http://www.javascript-page.com/fader.html,

it works great with fading the background of the webpage.

When I implement the code into my .js file, I modified it slightly (see code below). My problem is that you can't see the color changing at all, it seems to be happening too quickly. When I place alert messages directly after the line that reads 'theElement.style.backgroundColor = "#" + r + g + b;', I can see the color change for each iteration. My guess is that it's all happening too fast for it to be visible to the human eye.

Does anyone have any ideas on how to slow it down a bit? If I blow up the speed parameter, it just takes longer, but I still can't see the color change. That is confusing me a bit. Doesn't seem to make sense.

I've also tried window.setTimeout to call the fade function, but that doesn't do the trick either.

Any suggestions would be greatly appreciated.

Thanks!

var fader = new Array(), faderCount;    

for(faderCount = 0; faderCount < 10; faderCount++) {
    fader[faderCount] = faderCount + ''
}
fader[10] = "a"
fader[11] = "b"
fader[12] = "c"
fader[13] = "d"
fader[14] = "e"
fader[15] = "f"

// original: Nicolas - [URL unfurl="true"]http://www.javascript-page.com[/URL]
// modified: 08/10/06 by KLV
//----------------------------------------------------
function hexadecimal(xColor) {
    return ("" + fader[Math.floor(xColor/16)] + fader[xColor%16]);
}

// original: Nicolas - [URL unfurl="true"]http://www.javascript-page.com[/URL]
// modified: 08/10/06 by KLV
//----------------------------------------------------
function fade(theElement,startString,endString,speed) {
    var i, r, g, b;

    var string1 = new Object;
    string1.r = parseInt(startString.substring(0,3));
    string1.g = parseInt(startString.substring(4,7));
    string1.b = parseInt(startString.substring(8,11));

    var string2 = new Object;
    string2.r = parseInt(endString.substring(0,3));
    string2.g = parseInt(endString.substring(4,7));
    string2.b = parseInt(endString.substring(8,11));

    for (var i = 0; i <= speed; i++){
        var r = hexadecimal(Math.floor(string1.r * ((speed-i)/speed) + string2.r * (i/speed)));
        var g = hexadecimal(Math.floor(string1.g * ((speed-i)/speed) + string2.g * (i/speed)));
        var b = hexadecimal(Math.floor(string1.b * ((speed-i)/speed) + string2.b * (i/speed)));
        theElement.style.backgroundColor = "#" + r + g + b;
    }
}

// I place this within any function.  The object 'theMovedRow' is just a reference to a row in my table.  (i.e.: var theMovedRow = active_table.rows(1);)

fade(theMovedRow,'204,204,204','255,232,196',255);

Kate

[small]Yeah, it's a non-nutritive cereal varnish. It's semi-permeable. It's not osmotic.[/small]
[small]What it does is it coats and seals the flake, prevents the milk from penetrating it."[/small]

 

[cLFlaVA]

i don't see where you're recursively calling the function. usually a setTimeout is utilized, with a set number of milliseconds where the function calls upon itself.



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BillyRayPreachersSon]

The original doesn't do anything for me at all (using Firefox). It looks like you'd need to use a timer instead of a loop, anyway, as otherwise it simply will run too fast.

Investigate using setTimeout for your needs.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]