469,600 Members | 2,235 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

Object Orientation [Links Fader Example]

iam_clint
1,208 Expert 1GB
Expand|Select|Wrap|Line Numbers
  1. /*###############################*/
  2. /*     Link fade script by iam_clint, bytes.com                  */
  3. /*     www.bytes.com, If you use this script on your site       */
  4. /*    Please keep this comment at the top of the javascript  */
  5. /*###############################*/
  6.  
  7. window.onload=function() { setupLinks(); }
  8.  
  9. var red=0; /*base 16*/
  10. var green=15; /*15 because I want the faded in color to be super green*/
  11. var blue=0; /*no blue*/
  12. var fade_in_speed=20;
  13. var fade_out_speed=200;
  14. var start_color="#000000";
  15. var divider;
  16.  
  17. function cHex(dec) { 
  18.     var hex=dec.toString(16); /*Converts decimal to hax*/
  19.     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*/
  20.     return hex;
  21. }
  22.  
  23. function rgb(r, g, b) {
  24.     var str="#";  /*Hex Colors Start With #*/
  25.     str+=cHex(r); /*Red*/
  26.     str+=cHex(g); /*Green*/
  27.     str+=cHex(b); /*Blue*/
  28.     return str;
  29. }
  30.  
  31. function hoverObj(obj, fspeedin, fspeedout) {
  32.     /*Set instance specific variables*/
  33.     this.id = hoverObj.Instances.length; /*Gets the array length*/
  34.     hoverObj.Instances[this.id] = this; /*sets this object to  this instance so it can be referenced to like an array*/
  35.     this.cObj=obj; /*This sets this instance's object to what was passed.. this could be used for other tags other than links*/
  36.     this.current=0; /*This just starts the current color off at 0*/
  37.     this.speedIn=fspeedin; /*This is the speed at which the color fades in at*/
  38.     this.speedOut=fspeedout; /*This is the speed at which the color fades iout at*/
  39.     this.interval; /*This is a variable being used to store the interval id*/
  40.     this.direction; /*This tells the changeColor function to add or subtract to current*/
  41.     this.hoverLink=hoverLink; /*Sets a reference to the function hoverLink from within this instance*/
  42.     this.changeColor=changeColor;
  43.     this.isOver=false;
  44. }
  45. hoverObj.Instances = new Array(); /*Sets Instances in hoverObj to an array*/
  46.  
  47. function changeColor() {
  48.     if (this.direction==1) {    /*I used 1 for increasing current*/
  49.         if (this.current<15) { this.current+=1;} else {
  50.             if (!this.isOver) {
  51.                 window.clearInterval(this.interval); /*clears the interval*/    
  52.                 this.direction=0;
  53.                 this.interval=window.setInterval("hoverObj.Instances[" + this.id + "].changeColor()", this.speedOut); 
  54.                 return false; 
  55.             }
  56.         }
  57.         if (this.current>15) { this.current=15; } /*if its above 15 set it to 15 so the hex value with be FF*/
  58.     } else { 
  59.         if (this.current>0) { this.current-=1; } else { window.clearInterval(this.interval); this.cObj.style.color=start_color; return false; } /*fade out*/
  60.     }
  61.     var calc_red=Math.round(this.current*(red/15));
  62.     var calc_green=Math.round(this.current*(green/15));
  63.     var calc_blue=Math.round(this.current*(blue/15));
  64.     this.cObj.style.color=rgb(calc_red, calc_green, calc_blue); /*actually set the color*/
  65. }
  66.  
  67. function hoverLink(direction) {
  68.     if (direction==1) { this.isOver=true; this.direction=1 } else { this.isOver=false; }
  69.     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*/    }
  70. }
  71.  
  72. function setupLinks() {
  73.     var links=document.getElementsByTagName("A"); /*Get all the elements that are <A />*/
  74.     for (var i=0; i<links.length; i++) {
  75.         links[i].setAttribute("i", i);
  76.         links[i].onmouseover=function() { 
  77.             if (this.getAttribute("hoverID")=="" || this.getAttribute("hoverID")==null) {
  78.                 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*/
  79.                 this.setAttribute("hoverID", lnk.id);
  80.             }
  81.             var link=hoverObj.Instances[this.getAttribute("hoverID")];
  82.             link.hoverLink(1); 
  83.         }
  84.         links[i].onmouseout=function() { 
  85.                 var link=hoverObj.Instances[this.getAttribute("hoverID")]; /*refers to the instance given in onmouseover*/
  86.                 link.hoverLink(0); 
  87.         }
  88.         links[i].style.color=start_color;
  89.     }
  90. }
  91.  
In this example you can see i am using the word new.
Expand|Select|Wrap|Line Numbers
  1. var lnk=new hoverObj(this, fade_in_speed, fade_out_speed); 
  2.  
This is creating an instance of the hoverObj
Expand|Select|Wrap|Line Numbers
  1. function hoverObj(obj, fspeedin, fspeedout) {
  2.     /*Set instance specific variables*/
  3.     this.id = hoverObj.Instances.length; /*Gets the array length*/
  4.     hoverObj.Instances[this.id] = this; /*sets this object to  this instance so it can be referenced to like an array*/
  5.     this.cObj=obj; /*This sets this instance's object to what was passed.. this could be used for other tags other than links*/
  6.     this.current=0; /*This just starts the current color off at 0*/
  7.     this.speedIn=fspeedin; /*This is the speed at which the color fades in at*/
  8.     this.speedOut=fspeedout; /*This is the speed at which the color fades iout at*/
  9.     this.interval; /*This is a variable being used to store the interval id*/
  10.     this.direction; /*This tells the changeColor function to add or subtract to current*/
  11.     this.hoverLink=hoverLink; /*Sets a reference to the function hoverLink from within this instance*/
  12.     this.changeColor=changeColor;
  13.     this.isOver=false;
  14. }
  15. hoverObj.Instances = new Array(); /*Sets Instances in hoverObj to an array*/
  16.  
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.
Nov 19 '08 #1
2 2888
Dormilich
8,652 Expert Mod 8TB
I'd change line 7 to
Expand|Select|Wrap|Line Numbers
  1. window.onload = setupLinks;
if you haven't already declared onload events. otherwise add setupLinks() to your load chain.
Dec 16 '08 #2
gits
5,390 Expert Mod 4TB
just a note for small 'mini-improvements': when we want to create an instance of any object we typically use:

Expand|Select|Wrap|Line Numbers
  1. var o = new OBJ();
  2.  
but since we don't pass any param in this case we could even use:

Expand|Select|Wrap|Line Numbers
  1. var o = new OBJ;
  2.  
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:

Expand|Select|Wrap|Line Numbers
  1. var o = new Object;
  2. // vs.
  3. var o = {};
  4. // or
  5. var a = new Array;
  6. // vs.
  7. var a = [];
  8.  
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
Dec 23 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by anatushi | last post: by
11 posts views Thread by Vishal Naidu | last post: by
reply views Thread by Mamatha | last post: by
14 posts views Thread by James | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.