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

Report this snippet  

You need to login to post a comment.