Object Orientation [Links Fader Example]

[iam_clint]

/*###############################*/
/*     Link fade script by iam_clint, bytes.com                  */
/*     www.bytes.com, If you use this script on your site       */
/*    Please keep this comment at the top of the javascript  */
/*###############################*/
 
window.onload=function() { setupLinks(); }
 
var red=0; /*base 16*/
var green=15; /*15 because I want the faded in color to be super green*/
var blue=0; /*no blue*/
var fade_in_speed=20;
var fade_out_speed=200;
var start_color="#000000";
var divider;
 
function cHex(dec) { 
    var hex=dec.toString(16); /*Converts decimal to hax*/
    if (hex.length==1) { hex+=""+hex; } /*This just makes sure that the return  is atleast 2 digits, so if the hax is actually F it is going to return FF*/
    return hex;
}
 
function rgb(r, g, b) {
    var str="#";  /*Hex Colors Start With #*/
    str+=cHex(r); /*Red*/
    str+=cHex(g); /*Green*/
    str+=cHex(b); /*Blue*/
    return str;
}
 
function hoverObj(obj, fspeedin, fspeedout) {
    /*Set instance specific variables*/
    this.id = hoverObj.Instances.length; /*Gets the array length*/
    hoverObj.Instances[this.id] = this; /*sets this object to  this instance so it can be referenced to like an array*/
    this.cObj=obj; /*This sets this instance's object to what was passed.. this could be used for other tags other than links*/
    this.current=0; /*This just starts the current color off at 0*/
    this.speedIn=fspeedin; /*This is the speed at which the color fades in at*/
    this.speedOut=fspeedout; /*This is the speed at which the color fades iout at*/
    this.interval; /*This is a variable being used to store the interval id*/
    this.direction; /*This tells the changeColor function to add or subtract to current*/
    this.hoverLink=hoverLink; /*Sets a reference to the function hoverLink from within this instance*/
    this.changeColor=changeColor;
    this.isOver=false;
}
hoverObj.Instances = new Array(); /*Sets Instances in hoverObj to an array*/
 
function changeColor() {
    if (this.direction==1) {    /*I used 1 for increasing current*/
        if (this.current<15) { this.current+=1;} else {
            if (!this.isOver) {
                window.clearInterval(this.interval); /*clears the interval*/    
                this.direction=0;
                this.interval=window.setInterval("hoverObj.Instances[" + this.id + "].changeColor()", this.speedOut); 
                return false; 
            }
        }
        if (this.current>15) { this.current=15; } /*if its above 15 set it to 15 so the hex value with be FF*/
    } else { 
        if (this.current>0) { this.current-=1; } else { window.clearInterval(this.interval); this.cObj.style.color=start_color; return false; } /*fade out*/
    }
    var calc_red=Math.round(this.current*(red/15));
    var calc_green=Math.round(this.current*(green/15));
    var calc_blue=Math.round(this.current*(blue/15));
    this.cObj.style.color=rgb(calc_red, calc_green, calc_blue); /*actually set the color*/
}
 
function hoverLink(direction) {
    if (direction==1) { this.isOver=true; this.direction=1 } else { this.isOver=false; }
    if (this.direction==1 && this.isOver) { this.interval=window.setInterval("hoverObj.Instances[" + this.id + "].changeColor()", this.speedIn); /*sets this instance of the interval( to start fading in*/    }
}
 
function setupLinks() {
    var links=document.getElementsByTagName("A"); /*Get all the elements that are <A />*/
    for (var i=0; i<links.length; i++) {
        links[i].setAttribute("i", i);
        links[i].onmouseover=function() { 
            if (this.getAttribute("hoverID")=="" || this.getAttribute("hoverID")==null) {
                var lnk=new hoverObj(this, fade_in_speed, fade_out_speed); /*this important because for each link this loop finds it gives it its own instance of hoverObj*/
                this.setAttribute("hoverID", lnk.id);
            }
            var link=hoverObj.Instances[this.getAttribute("hoverID")];
            link.hoverLink(1); 
        }
        links[i].onmouseout=function() { 
                var link=hoverObj.Instances[this.getAttribute("hoverID")]; /*refers to the instance given in onmouseover*/
                link.hoverLink(0); 
        }
        links[i].style.color=start_color;
    }
}
 

In this example you can see i am using the word new.

var lnk=new hoverObj(this, fade_in_speed, fade_out_speed); 
 

This is creating an instance of the hoverObj

function hoverObj(obj, fspeedin, fspeedout) {
    /*Set instance specific variables*/
    this.id = hoverObj.Instances.length; /*Gets the array length*/
    hoverObj.Instances[this.id] = this; /*sets this object to  this instance so it can be referenced to like an array*/
    this.cObj=obj; /*This sets this instance's object to what was passed.. this could be used for other tags other than links*/
    this.current=0; /*This just starts the current color off at 0*/
    this.speedIn=fspeedin; /*This is the speed at which the color fades in at*/
    this.speedOut=fspeedout; /*This is the speed at which the color fades iout at*/
    this.interval; /*This is a variable being used to store the interval id*/
    this.direction; /*This tells the changeColor function to add or subtract to current*/
    this.hoverLink=hoverLink; /*Sets a reference to the function hoverLink from within this instance*/
    this.changeColor=changeColor;
    this.isOver=false;
}
hoverObj.Instances = new Array(); /*Sets Instances in hoverObj to an array*/
 

You may ask yourself, why do I need more than 1 instance of this hoverObj.
The reason is so each link can act independently. So while one link is fading in another link can be fading out this keeps things running smoothly, Each link gets its own "timer" rather than sharing 1.

[Dormilich]

I'd change line 7 to

window.onload = setupLinks;

if you haven't already declared onload events. otherwise add setupLinks() to your load chain.

[gits]

just a note for small 'mini-improvements': when we want to create an instance of any object we typically use:

var o = new OBJ();
 

but since we don't pass any param in this case we could even use:

var o = new OBJ;
 

so JavaScript don't need to eval an empty args-list this leads to better performance. in case we use built in constructors then we have a much better performance when using the literals:

var o = new Object;
// vs.
var o = {};
// or
var a = new Array;
// vs.
var a = [];
 

the literals are less characters to be parsed and so that could be evaled faster. so from the point of performance it is to prefer to use the literals and leave out the brackets when possible when creating instances of objects.

kind regards
gits