We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
[CODE] Fading Links; By White_Pheonix
Topic Started: Jan 25 2010, 09:18 AM (40 Views)
Reid
Member Avatar
È una trappola!

This topic has been moved from our official support board.

Originally posted by: White_Pheonix
[CODE
 
Fading Links]A code which I addapted a while ago from PHPBB seems to be rather popular, much to my suprise, and, due to the fact that the origin code had the main part of the code hotlinked from my site, I have dicided to officially post this code, along with the fade.js file which makes it function. You will need to get the code hosted somewhere.
Anyways ...
This part goes in Admin CP > Board Wrappers > Javascript
Code:
 
<script language="javaScript">
fadeClasses = new Array(""); // Determines which classes get which colors
startColors = new Array("#000000"); // MouseOut link colors

endColors = new Array("#f0f8ff"); // MouseOver link color
stepIn = 25; // delay when fading in
stepOut = 25; // delay when fading out
autoFade = true;
sloppyClass = true;
</script>
<script src="http://THE URL WHERE YOU HAVE GOTTEN THE CODE BELOW HOSTED TO"></script>

And this is the main part:
Code:
 
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
{
hexa[i] = i;
}
hexa[10]="a";
hexa[11]="b";
hexa[12]="c";
hexa[13]="d";
hexa[14]="e";
hexa[15]="f";

var version = parseInt(navigator.appVersion)
var appName = navigator.appName
var n4 = version>=4 && appName=="Netscape"

document.onmouseover = (n4) ? domouseover2 : domouseover;
document.onmouseout = (n4) ? domouseout2 : domouseout;

// startColor = dehexize(startColor.toLowerCase());
// endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();

function dehexize(Color)
{
var colorArr = new makearray(3);
for (i=1; i<7; i++)
{
for (j=0; j<16; j++)
{
if (Color.charAt(i) == hexa[j])
{
if (i%2 !=0)
{
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
}
else
{
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
}
return colorArr;
}

function domouseover()
{
if(document.all)
{
var srcElement = event.srcElement;
for(ii=0;ii<fadeClasses.length;ii++)
{
if((srcElement.className==fadeClasses[ii])&&(srcElement.className!=''))
{
startColor = dehexize(startColors[ii].toLowerCase());
endColor = dehexize(endColors[ii].toLowerCase());
sloppyFade = 1;
}
else
{
startColor = dehexize(startColors[0].toLowerCase());
endColor = dehexize(endColors[0].toLowerCase());
sloppyFade = 0;
}
}
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1) || (sloppyClass && sloppyFade))
{
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}
}

function domouseover2(event)
{
var srcElement = event.target;
for(ii=0;ii<fadeClasses.length;ii++)
{
if((srcElement.className==fadeClasses[ii])&&(srcElement.className!=''))
{
startColor = dehexize(startColors[ii].toLowerCase());
endColor = dehexize(endColors[ii].toLowerCase());
sloppyFade = 1;
}
else
{
startColor = dehexize(startColors[0].toLowerCase());
endColor = dehexize(endColors[0].toLowerCase());
sloppyFade = 0;
}
}
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1) || (sloppyClass && sloppyFade))
{
fade2(startColor,endColor,srcElement,stepOut);
}
}

function domouseout()
{
if(document.all)
{
var srcElement = event.srcElement;
for(ii=0;ii<fadeClasses.length;ii++)
{
if((srcElement.className==fadeClasses[ii])&&(srcElement.className!=''))
{
startColor = dehexize(startColors[ii].toLowerCase());
endColor = dehexize(endColors[ii].toLowerCase());
sloppyFade = 1;
}
else
{
startColor = dehexize(startColors[0].toLowerCase());
endColor = dehexize(endColors[0].toLowerCase());
sloppyFade=0;
}
}
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1) || (sloppyClass && sloppyFade))
{
fade(endColor,startColor,srcElement.uniqueID,stepIn);
}
}
}

function domouseout2(event)
{
var srcElement = event.target;
for(ii=0;ii<fadeClasses.length;ii++)
{
if((srcElement.className==fadeClasses[ii])&&(srcElement.className!=''))
{
startColor = dehexize(startColors[ii].toLowerCase());
endColor = dehexize(endColors[ii].toLowerCase());
sloppyFade = 1;
}
else
{
startColor = dehexize(startColors[0].toLowerCase());
endColor = dehexize(endColors[0].toLowerCase());
sloppyFade = 0
}
}
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1) || (sloppyClass && sloppyFade))
{
fade2(endColor,startColor,srcElement,stepOut);
}
}

function makearray(n)
{
this.length = n;
for(var i = 1; i <= n; i++)
{
this[i] = 0;
}
return this;
}

function hex(i)
{
if (i < 0)
{
return "00";
}
else if (i > 255)
{
return "ff";
}
else
{
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}
}

function setColor(r, g, b, element)
{
var hr = hex(r);
var hg = hex(g);
var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}

function fade(s,e, element,step)
{
var sr = s[0];
var sg = s[1];
var sb = s[2];
var er = e[0];
var eg = e[1];
var eb = e[2];

if (fadeId[0] != null && fade[0] != element)
{
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length)
{
clearTimeout(fadeId[i]);
i++;
}
}
// Internet Explorer timeout structure
for(var i = 0; i <= step; i++)
{
fadeId[i+1] = setTimeout("setColor(Math.floor(" + sr + " *(( " + step + " - " + i + " )/ " + step + " ) + " + er + " * (" + i + "/" + step + ")),Math.floor(" + sg + " * (( " + step + " - " + i + " )/ " + step + " ) + " + eg + " * (" + i + "/" + step + ")),Math.floor(" + sb + " * ((" + step + "-" + i + ")/" + step + ") + " + eb + " * (" + i + "/" + step + "))," + element + ");", i*step);
}
fadeId[0] = element;
}

function fade2(s,e, element,step)
{
var sr = s[0];
var sg = s[1];
var sb = s[2];
var er = e[0];
var eg = e[1];
var eb = e[2];

if (fadeId[0] != null && fade[0] != element)
{
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length)
{
clearTimeout(fadeId[i]);
i++;
}
}
// Gecko timeout structure
for(var i = 0; i <= step; i++)
{
fadeId[i+1] = setTimeout(
setColor,
i*step,
Math.floor(sr*((step-i)/step) + er*(i/step)),
Math.floor(sg*((step-i)/step) + eg*(i/step)),
Math.floor(sb*((step-i)/step) + eb*(i/step)),
element
);
}
fadeId[0] = element;
}

Please note: a friend is currently adapting this to create a code which causes links to fade away and then fade back in. Once it is complete, it will be posted here.
This code is also able to make links fade on .html pages, in case anyone wants to know.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Free Forums. Reliable service with over 8 years of experience.
Learn More · Register Now
« Previous Topic · Codes & Modifications · Next Topic »
Add Reply