Trying to implement link fader script

Poster: DanThMan
Dated: Saturday December 27 2003 - 10:17:39 GMT

I want the link fader script to work both in the menu and for the rest of
my site. When I call it just for the rest of my site the links in my menu
stops working. I'll get a "_gm" is null or not an object when using the menu. I have no coding experience worth mentioning and it feels like I'm stuck right now I do think it's a conflict with either mmenudom.js or
mmenuns4.js. I have not yet tried to implement it in the menu. Is it even possible? The fader script is well known, but I'll send it along and hope that someone has the skill and the time to look it over! Or maybe there's
an easier way to accomplish this effect in the menu?
/******************************************************************
* Script name: Link fader (http://projects.impenetrable.org/linkfader/)
* Version: 1.0
* Date: 12.05.02
* Usage: Freeware - You may modify this script as you wish,
* as long as you don't remove or edit this header comment.
*
* Script by: Fayez Zaheer (viol8r on #webdesign [uk.zanet.org.za])
* Email: fayez at impenetrable.org
* Web site: http://impenetrable.org
* Original idea: http://anarchos.xs.mw/fade.phtml
******************************************************************/

// DELETE COMMENTS THAT START WITH // TO MAKE THE FILE SIZE SMALLER.

// This script will no longer overwrite your current onmouseover and
// onmouseout attributes - it will instead skip those links. If you would
// still like to fade them, add findLink(this.id) to your onmouseover
// and clearFade() to your onmouseout, like so -
// <a href="#" onmouseover="findLink(this.id); yourFunction()"
// onmouseout="clearFade(); yourSecondFunction()">
// Make sure to put it BEFORE any "return" statements otherwise
// the fade will not execute.

// Fade-to colour without the # (6 character value only!)
var fadeTo = "ffaa22";

// Fade in colour increment/decrement by
var fiBy = 6;

// Fade out colour increment/decrement by
var foBy = 10;

// Speed - milliseconds between each colour change in the fade
// Less than 10ms doesn't really make all that much difference, so
// 10 is the minimum effective value.
var speed = 10;

// Class name of links to NOT fade (i.e. ignore)
// var ignoreClass = "somebogusvalue" if you don't want to
// use this feature. Alternatively, add onmouseover="clearFade()"
// to the link you do not wish to fade.
var ignoreClass = "ignore";

// No more changes required (unless you know what you are doing)
// Enjoy... and email me and let me know what site(s) you are using it on
var opera, ie, dom, x = 0, oc, fader, ocs = new Array();

if (navigator.userAgent.indexOf("Opera") != -1) opera = true
else if (document.all && !opera) ie = true
else if (!document.all && document.getElementById) dom = true;

function convertRGB(z)
{
var newfcS = "", splitter = "";
splitter = z.split(",");
splitter[0] = parseInt(splitter[0].substring(4, splitter[0].length));
splitter[1] = parseInt(splitter[1]);
splitter[2] = parseInt(splitter[2].substring(0, splitter[2].length-1));
for (var q = 0; q < 3; q++)
{
splitter[q] = splitter[q].toString(16);
if (splitter[q].length == 1) splitter[q] = "0" + splitter[q];
newfcS += splitter[q];
}
return newfcS;
}

function currentColour(index)
{
var temp, cc;
if (opera) cc = document.links[index].style.color
else if (ie) cc = document.links[index].currentStyle.color
else if (dom) cc = document.defaultView.getComputedStyle(document.links[index], '').getPropertyValue("color");
if (cc.length == 4 && cc.substring(0, 1) == "#")
{
temp = "";
for (var a = 0; a < 3; a++)
temp += cc.substring(a+1, a+2) + cc.substring(a+1, a+2);
cc = temp;
}
else if (cc.indexOf("rgb") != -1) cc = convertRGB(cc)
else if (cc.length == 7) cc = cc.substring(1, 7)
else cc = fadeTo;
return cc;
}


function convert2Dec(hex)
{
var rgb = new Array();
for (var u = 0; u < 3; u++)
rgb[u] = parseInt(hex.substring(u*2, u*2+2), 16);
return rgb;
}

function newRGB(f, n, d)
{
var change;
if (d == 1) change = fiBy
else change = foBy;
for (var g = 0; g < 3; g++)
{
if (n[g] > f[g] && n[g] - change >= 0) n[g] -= change;
if (n[g] < f[g] && n[g] + change <= 255) n[g] += change;
}
return n;
}

function fade(index, d)
{
var fc, nc, temp = new Array(), finished = false;
nc = convert2Dec(currentColour(index));
if (d == 1) fc = convert2Dec(fadeTo)
else fc = convert2Dec(ocs[x]);
temp = convert2Dec(currentColour(index));
nc = newRGB(fc, nc, d);
if ((nc[0] == temp[0]) && (nc[1] == temp[1]) && (nc[2] == temp[2]))
finished = true;
if (!finished) document.links[x].style.color = "rgb(" + nc[0] + "," + nc[1] + "," + nc[2] + ")"
else clearInterval(fader);
}

function findLink(over)
{
if (document.layers) return;
if (fader)
{
clearInterval(fader);
document.links[x].style.color = "#" + ocs[x];
}
if (over && !this.id) this.id = over;
x = 0;
while (!(this.id == document.links[x].id) && (x < document.links.length))
x++;
if (this.id == document.links[x].id)
{
oc = currentColour(x);
fader = setInterval("fade(" + x + ", 1)", speed);
}
}

function clearFade()
{
if (document.layers) return;
if (fader) clearInterval(fader);
fader = setInterval("fade(" + x + ", 0)", speed);
}

function init()
{
for (var i = 0; i < document.links.length; i++)
{
ocs[i] = currentColour(i);
var currentOver = document.links[i].onmouseover;
var currentOut = document.links[i].onmouseout;
var ignoreIt = document.links[i].className == ignoreClass;
if (!ignoreIt) document.links[i].id = "link" + i;
if (!currentOver && !currentOut && !ignoreIt)
{
document.links[i].onmouseover = findLink;
document.links[i].onmouseout = clearFade;
}
}
}

if (opera || ie || dom) window.onload = init;

Poster: Ruth
Dated: Sunday December 28 2003 - 8:42:55 GMT

Do you have a link to your site where you have implemented this? It would be easier to check the problem to see it working 'or not working' as the case may be.

Ruth

Poster: DanThMan
Dated: Sunday December 28 2003 - 10:56:57 GMT

Thanx for your reply Ruth!
Because it blocks the whole menu and makes it useless I will not load the script before I know it works like it's supposed to. However, the script makes a smooth, stunning effect that I really want to have. I've been at this for a couple of days now, trying everything I can think of! But it just won't work together with mmenudom.js. I use frames, so I use the
"body onload" which is known to cause conflicts with several scripts. I've
always been able to workaround this before, but not this time Also,
I have no clue how to embed it in the milonic menu ( if it's possible). My site is in swedish and I constantly change it for testing purposes, as I play
with different layouts to find new solutions ( someday maybe I'll even make it validate );)
http://w1.474.telia.com/~u47403260/dannads/

Here's a site that has nothing to do with this but they do use the fader script!
http://www.ozzu.com/

Poster: Hergio
Dated: Saturday January 3 2004 - 17:23:15 GMT

Far as I know, I dont think you can do it with the menu as it is in its current implementation. Right now when you add an onFunction to a menu item I believe it places it in the onMouseOver event of the TD cell which comprises the menu item, NOT the <a> tag in it. Your fader script looks like it depends on the findLink method being placed in the onMouseOver event of the <a>, and not the <td>. So I doubt you could get it to work INSIDE of the menu.

Now you say it causes problems on the rest of the site. This is becase this script seems to automatically reassign all the IDs of ALL links in a webpage. And then tries to assign mouseover and mouseout events to them...this probably screws with the menu's links because I know the menu specifically assigns its own unique IDs to <A> tags.. Looking at the docs the only thing I can think of is see if we can get Andy to assign a dummy class name to all the links and then you could set the ignoreClass variable in the script to that so it ignores the links in the menu.

But personally, you're loading up your page with alittle too much javascript (and java applets). I am on a T1 connection and the page was painfully slow to load. But thats just my humble opinion.

Poster: DanThMan
Dated: Saturday January 3 2004 - 18:46:55 GMT

Thank you very, very much Dave!
Now I can go on with my life I just couldn't let it go without a reasonable answer, and now I got it!
As for the page, it's my playground and changes are made frequently.
It loads pretty fast for me and it's just for my own surfin benefits.
The layout for the moment is zengardens basic csslayout thrown into
complexed tables. I really loved to do that twist to it.
once again
thank you
ok...twice
thank you

Poster: Hergio
Dated: Sunday January 4 2004 - 17:33:06 GMT

Dan,
You're welcome buddy. Hey the site definetly is good with all the stuff you got on it...I dunno if maybe cuz I am half way around the world it took a bit or what. But anyways, you might want to keep your eye out for another link fader script. There are bound to be other ones out there. Possibly one that fades the links but doesn't interfere with ALL the links on a page. Maybe where you set the class of any <a> tags you want to fade, that way the ones in the meun are left alone.

Enjoy the menu (if you stick with it!).

Poster: DanThMan
Dated: Sunday January 4 2004 - 18:58:40 GMT

Of course I'll stick with the menu, the rest is just candy.
But it's nice to have some candy once in a while though.
However I did try a few similar but different scripts.
They won't work either. I'm sending one along just for fun,
as it seems very different from the first one, yet looks the same.
Anyway don't blow your brains on it.
It's just candy...
( I'll welcome the possibility to upload zip.files)
/*******************************************************************
* File : JSFX_LinkFader.js © JavaScript-FX.com
* Created : 2002/09/05
* Author : Roy Whittle (Roy __at__ Whittle.com) http://www.Roy.Whittle.com
* Purpose : To create a more dynamic a:hover using fading
* History
* Date Version Description
* 2002-09-05 1.0 First version
***********************************************************************/
/*** Create some global variables ***/
if(!window.JSFX)JSFX=new Object();

var LinkFadeInStep=20;
var LinkFadeOutStep=5;
var LinkEndColor="585980"

var LinkStartColor="FFFFFF";
var LinkFadeRunning=false;

document.onmouseover = theOnOver;
document.onmouseout = theOnOut;
if(document.captureEvents)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);

function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}
function getColor(start, end, percent)
{

var r1=hex2dec(start.slice(0,2));
var g1=hex2dec(start.slice(2,4));
var b1=hex2dec(start.slice(4,6));

var r2=hex2dec(end.slice(0,2));
var g2=hex2dec(end.slice(2,4));
var b2=hex2dec(end.slice(4,6));

var pc=percent/100;

var r=Math.floor(r1+(pc*(r2-r1)) + .5);
var g=Math.floor(g1+(pc*(g2-g1)) + .5);
var b=Math.floor(b1+(pc*(b2-b1)) + .5);

return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}
/************************************************/
JSFX.getCurrentElementColor = function(el)
{
var result = LinkStartColor;

if (el.currentStyle)
result = (el.currentStyle.color);
else if (document.defaultView)
result = (document.defaultView.getComputedStyle(el,'').getPropertyValue('color'));
else if(el.style.color) //Opera
result = el.style.color;

if(result.charAt(0) == "#") //color is of type #rrggbb
result = result.slice(1, 8);
else if(result.charAt(0) == "r") //color is of type rgb(r, g, b)
{
var v1 = result.slice(result.indexOf("(")+1, result.indexOf(")") );
var v2 = v1.split(",");
result = (dec2hex(parseInt(v2[0])) + dec2hex(parseInt(v2[1])) + dec2hex(parseInt(v2[2])));
}

return result;
}
JSFX.findTagIE = function(el)
{
while (el && el.tagName != 'A')
el = el.parentElement;
return(el);
}
JSFX.findTagNS= function(el)
{
while (el && el.nodeName != 'A')
el = el.parentNode;
return(el);
}
function theOnOver(e)
{
var lnk;
if(window.event)
lnk=JSFX.findTagIE(event.srcElement);
else
lnk=JSFX.findTagNS(e.target);

if(lnk)
JSFX.linkFadeUp(lnk);
}
JSFX.linkFadeUp = function(lnk)
{
if(lnk.state == null)
{
lnk.state = "OFF";
lnk.index = 0;
lnk.startColor = JSFX.getCurrentElementColor(lnk);
lnk.endColor = LinkEndColor;
}

if(lnk.state == "OFF")
{
lnk.state = "FADE_UP";
JSFX.startLinkFader();
}
else if( lnk.state == "FADE_UP_DOWN"
|| lnk.state == "FADE_DOWN")
{
lnk.state = "FADE_UP";
}
}
function theOnOut(e)
{
var lnk;
if(window.event)
lnk=JSFX.findTagIE(event.srcElement);
else
lnk=JSFX.findTagNS(e.target);

if(lnk)
JSFX.linkFadeDown(lnk);
}
JSFX.linkFadeDown = function(lnk)
{
if(lnk.state=="ON")
{
lnk.state="FADE_DOWN";
JSFX.startLinkFader();
}
else if(lnk.state == "FADE_UP")
{
lnk.state="FADE_UP_DOWN";
}
}
JSFX.startLinkFader = function()
{
if(!LinkFadeRunning)
JSFX.LinkFadeAnimation();
}

JSFX.LinkFadeAnimation = function()
{
LinkFadeRunning = false;
for(i=0 ; i<document.links.length ; i++)
{
var lnk = document.links[i];
if(lnk.state)
{
if(lnk.state == "FADE_UP")
{
lnk.index+=LinkFadeInStep;
if(lnk.index > 100)
lnk.index = 100;
lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

if(lnk.index == 100)
lnk.state="ON";
else
LinkFadeRunning = true;
}
else if(lnk.state == "FADE_UP_DOWN")
{
lnk.index+=LinkFadeOutStep;
if(lnk.index>100)
lnk.index = 100;
lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

if(lnk.index == 100)
lnk.state="FADE_DOWN";
LinkFadeRunning = true;
}
else if(lnk.state == "FADE_DOWN")
{
lnk.index-=LinkFadeOutStep;
if(lnk.index<0)
lnk.index = 0;
lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

if(lnk.index == 0)
lnk.state="OFF";
else
LinkFadeRunning = true;
}
}
}
/*** Check to see if we need to animate any more frames. ***/
if(LinkFadeRunning)
setTimeout("JSFX.LinkFadeAnimation()", 40);
}