Posted By

daleyjem on 11/01/07


Tagged

opacity transparency gradient rgba horizontal vertical


Versions (?)

Who likes this?

13 people have marked this snippet as a favorite

basicmagic
jonhenshaw
vali29
heinz1959
jamesming
oldmeaty
ckayra
masondixon
seanpowell
aegony
pxqopat-g
guo3823538
bug5


Gradient Class


 / Published in: JavaScript
 

Apply a Top-Bottom or Left-Right gradient (with or without alpha transparency) by attaching a "gradient" class to any HTML element. Does not interfere with Existing classes on element.

Include in HTML page with standard:

  1. /**
  2. @author Jeremy M. Daley
  3. @company HSR Business to Business
  4. @title Web Application Developer
  5. */
  6.  
  7. /**
  8. Apply a Top-Bottom or Left-Right gradient (with or without alpha transparency)
  9. by attaching a "gradient" class to any HTML element. Does not interfere with existing classes
  10. on element.
  11.  
  12. Usage:
  13. <div class="some_existing_class gradient(#rrggbb[aa], #rrggbb[aa][, gradient_direction])">Some Text</div>
  14.  
  15. @param color1 = hex rgba color value (alpha hex value optional)
  16. @param color2 = hex rgba color value (alpha hex value optional)
  17. @param gradient_direction = (optional) linear direction of gradient transition ("tb" or "lr").
  18. defaults to "tb" if not specified
  19.  
  20. Example:
  21. gradient(#ffffffff, #00000000, tb)
  22.  
  23. -> Applies a Top-Bottom gradient with the first color value
  24. a full-opacity white, and the second color value
  25. a full-transparency black
  26.  
  27. */
  28.  
  29. if (window.addEventListener) {
  30. window.addEventListener("load", initGradient, false);
  31. } else {
  32. window.attachEvent("onload", initGradient);
  33. }
  34.  
  35. var currZ = 1;
  36.  
  37. function initGradient() {
  38. var DOM = document.getElementsByTagName("*");
  39.  
  40. for (var elementIndex = 0; elementIndex < DOM.length; elementIndex++) {
  41. var theElement = DOM[elementIndex];
  42. var elementClass = theElement.className;
  43.  
  44. if (elementClass.toLowerCase().indexOf("gradient(") != -1) {
  45. createGradient(theElement);
  46. }
  47.  
  48. }
  49.  
  50. }
  51.  
  52. function createGradient(gradElement) {
  53. var divClass = gradElement.className;
  54. var pos = divClass.toLowerCase().indexOf("gradient(");
  55. var tempStr = divClass.substr(pos);
  56. var pos1 = tempStr.indexOf("(");
  57. var pos2 = tempStr.indexOf(")");
  58. tempStr = tempStr.substr(pos1 + 1, pos2 - pos1 - 1);
  59.  
  60. var paramArray = tempStr.split(",");
  61. var gradStyle = (paramArray.length > 2) ? paramArray[2].toUpperCase().replace(/ /g, "") : "TB";
  62. var startHex = paramArray[0].replace("#", "").replace(" ", "");
  63. var endHex = paramArray[1].replace("#", "").replace(" ", "");
  64. var startAlpha = (startHex.length > 6) ? startHex.substr(6, 2) : "FF";
  65. var endAlpha = (endHex.length > 6) ? endHex.substr(6, 2) : "FF";
  66.  
  67. var startR = parseInt(startHex.substr(0, 2), 16);
  68. var startG = parseInt(startHex.substr(2, 2), 16);
  69. var startB = parseInt(startHex.substr(4, 2), 16);
  70. var startA = Math.round((parseInt(startAlpha, 16) * 100) / 255);
  71. var endR = parseInt(endHex.substr(0, 2), 16);
  72. var endG = parseInt(endHex.substr(2, 2), 16);
  73. var endB = parseInt(endHex.substr(4, 2), 16);
  74. var endA = Math.round((parseInt(endAlpha, 16) * 100) / 255);
  75.  
  76. var pullHTML = gradElement.innerHTML;
  77.  
  78. if (gradElement.style.position.toLowerCase() != "absolute") {
  79. gradElement.style.position = "relative";
  80. }
  81.  
  82. var borderWidth = parseInt(gradElement.style.borderRightWidth) + parseInt(gradElement.style.borderLeftWidth);
  83. var borderHeight = parseInt(gradElement.style.borderTopWidth) + parseInt(gradElement.style.borderBottomWidth);
  84. var theWidth = gradElement.offsetWidth - ((isNaN(borderWidth)) ? 0 : borderWidth);
  85. var theHeight = gradElement.offsetHeight - ((isNaN(borderHeight)) ? 0 : borderHeight);
  86.  
  87. var stringArray = [];
  88.  
  89. /**
  90. Note: - <table>'s are used for cross-browser and W3C compliance. Using <div>'s breaks in IE
  91. (can't insert <div> as child of <p>). <table>'s retain abiguity for inserting into <p> tags
  92. - <span> tags don't handle z-index correctly in Opera
  93.  
  94. */
  95. stringArray.push('<table width="100%" border="0" cellpadding="0" cellspacing="0" style="position:absolute; left:0px; top:0px; z-index:' + currZ + '"><tr><td>');
  96. var gradIndex = (gradStyle == "TB") ? theHeight : theWidth;
  97.  
  98. for (var divIndex = 0; divIndex < gradIndex; divIndex++) {
  99. var valPerc = divIndex / gradIndex;
  100. var newR = startR - (Math.ceil((startR - endR) * valPerc));
  101. var newG = startG - (Math.ceil((startG - endG) * valPerc));
  102. var newB = startB - (Math.ceil((startB - endB) * valPerc));
  103. var newA = startA - (Math.ceil((startA - endA) * valPerc));
  104. var newWidth = (gradStyle == "TB") ? theWidth : 1;
  105. var newHeight = (gradStyle == "TB") ? 1 : theHeight;
  106. var newTop = (gradStyle == "TB") ? divIndex : 0;
  107. var newLeft = (gradStyle == "TB") ? 0 : divIndex;
  108.  
  109. /* using span inside span method */
  110. stringArray.push('<table width="100%" border="0" cellpadding="0" cellspacing="0" style="position:absolute; top:' + newTop + 'px; left:' + newLeft + 'px; opacity:' + (newA / 100) + '; -moz-opacity:' + (newA / 100) + '; filter:alpha(opacity=' + newA + '); width:' + newWidth + 'px; height:' + newHeight + 'px; background-color:rgb(' + newR + ',' + newG + ',' + newB + '); "><tr><td><div style="position:absolute; width:1px; height:1px; "></div></td></tr></table>');
  111. }
  112.  
  113. stringArray.push('</table>');
  114. stringArray.push('<table width="100%" border="0" cellpadding="0" cellspacing="0" style="position:relative; z-index:' + (currZ + 1) + '; "><tr><td>' + pullHTML + '</td></tr></table>');
  115. var writeStr = stringArray.join("");
  116. gradElement.innerHTML = writeStr;
  117.  
  118. currZ += 2;
  119. }

Report this snippet  

You need to login to post a comment.