ie-css3.htc 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. --Do not remove this if you are using--
  2. Original Author: Remiz Rahnas
  3. Original Author URL: http://www.htmlremix.com
  4. Published date: 2008/09/24
  5. Changes by Nick Fetchak:
  6. - IE8 standards mode compatibility
  7. - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
  8. - Added partial support for 'box-shadow' style
  9. - Checks for VML support before doing anything
  10. - Updates VML element size and position via timer and also via window resize event
  11. - lots of other small things
  12. Published date : 2010/03/14
  13. http://fetchak.com/ie-css3
  14. Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter
  15. <public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" />
  16. <script type="text/javascript">
  17. timer_length = 200; // Milliseconds
  18. border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues
  19. // supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
  20. function supportsVml() {
  21. if (typeof supportsVml.supported == "undefined") {
  22. var a = document.body.appendChild(document.createElement('div'));
  23. a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
  24. var b = a.firstChild;
  25. b.style.behavior = "url(#default#VML)";
  26. supportsVml.supported = b ? typeof b.adj == "object": true;
  27. a.parentNode.removeChild(a);
  28. }
  29. return supportsVml.supported
  30. }
  31. // findPos() borrowed from http://www.quirksmode.org/js/findpos.html
  32. function findPos(obj) {
  33. var curleft = curtop = 0;
  34. if (obj.offsetParent) {
  35. do {
  36. curleft += obj.offsetLeft;
  37. curtop += obj.offsetTop;
  38. } while (obj = obj.offsetParent);
  39. }
  40. return({
  41. 'x': curleft,
  42. 'y': curtop
  43. });
  44. }
  45. function createBoxShadow(element, vml_parent) {
  46. var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';
  47. var match = style.match(/^(\d+)px (\d+)px (\d+)px/);
  48. if (!match) { return(false); }
  49. var shadow = document.createElement('v:roundrect');
  50. shadow.userAttrs = {
  51. 'x': parseInt(RegExp.$1 || 0),
  52. 'y': parseInt(RegExp.$2 || 0),
  53. 'radius': parseInt(RegExp.$3 || 0) / 2
  54. };
  55. shadow.position_offset = {
  56. 'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
  57. 'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
  58. };
  59. shadow.size_offset = {
  60. 'width': 0,
  61. 'height': 0
  62. };
  63. shadow.arcsize = element.arcSize +'px';
  64. shadow.style.display = 'block';
  65. shadow.style.position = 'absolute';
  66. shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
  67. shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
  68. shadow.style.width = element.offsetWidth +'px';
  69. shadow.style.height = element.offsetHeight +'px';
  70. shadow.style.antialias = true;
  71. shadow.className = 'vml_box_shadow';
  72. shadow.style.zIndex = element.zIndex - 1;
  73. shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';
  74. element.parentNode.appendChild(shadow);
  75. //element.parentNode.insertBefore(shadow, element.element);
  76. // For window resizing
  77. element.vml.push(shadow);
  78. return(true);
  79. }
  80. function createBorderRect(element, vml_parent) {
  81. if (isNaN(element.borderRadius)) { return(false); }
  82. element.style.background = 'transparent';
  83. element.style.borderColor = 'transparent';
  84. var rect = document.createElement('v:roundrect');
  85. rect.position_offset = {
  86. 'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,
  87. 'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x
  88. };
  89. rect.size_offset = {
  90. 'width': 0 - element.strokeWeight,
  91. 'height': 0 - element.strokeWeight
  92. };
  93. rect.arcsize = element.arcSize +'px';
  94. rect.strokeColor = element.strokeColor;
  95. rect.strokeWeight = element.strokeWeight +'px';
  96. rect.stroked = element.stroked;
  97. rect.className = 'vml_border_radius';
  98. rect.style.display = 'block';
  99. rect.style.position = 'absolute';
  100. rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px';
  101. rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px';
  102. rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px';
  103. rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px';
  104. rect.style.antialias = true;
  105. rect.style.zIndex = element.zIndex - 1;
  106. if (border_opacity && (element.opacity < 1)) {
  107. rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')';
  108. }
  109. var fill = document.createElement('v:fill');
  110. fill.color = element.fillColor;
  111. fill.src = element.fillSrc;
  112. fill.className = 'vml_border_radius_fill';
  113. fill.type = 'tile';
  114. fill.opacity = element.opacity;
  115. // Hack: IE6 doesn't support transparent borders, use padding to offset original element
  116. isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
  117. if (isIE6 && (element.strokeWeight > 0)) {
  118. element.style.borderStyle = 'none';
  119. element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight;
  120. element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight;
  121. }
  122. rect.appendChild(fill);
  123. element.parentNode.appendChild(rect);
  124. //element.parentNode.insertBefore(rect, element.element);
  125. // For window resizing
  126. element.vml.push(rect);
  127. return(true);
  128. }
  129. function createTextShadow(element, vml_parent) {
  130. if (!element.textShadow) { return(false); }
  131. var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/);
  132. if (!match) { return(false); }
  133. //var shadow = document.createElement('span');
  134. var shadow = element.cloneNode(true);
  135. var radius = parseInt(RegExp.$3 || 0);
  136. shadow.userAttrs = {
  137. 'x': parseInt(RegExp.$1 || 0) - (radius),
  138. 'y': parseInt(RegExp.$2 || 0) - (radius),
  139. 'radius': radius / 2,
  140. 'color': (RegExp.$4 || '#000')
  141. };
  142. shadow.position_offset = {
  143. 'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),
  144. 'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)
  145. };
  146. shadow.size_offset = {
  147. 'width': 0,
  148. 'height': 0
  149. };
  150. shadow.style.color = shadow.userAttrs.color;
  151. shadow.style.position = 'absolute';
  152. shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
  153. shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
  154. shadow.style.antialias = true;
  155. shadow.style.behavior = null;
  156. shadow.className = 'ieCSS3_text_shadow';
  157. shadow.innerHTML = element.innerHTML;
  158. // For some reason it only looks right with opacity at 75%
  159. shadow.style.filter = '\
  160. progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\
  161. progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\
  162. ';
  163. var clone = element.cloneNode(true);
  164. clone.position_offset = {
  165. 'y': (0 - vml_parent.pos_ieCSS3.y),
  166. 'x': (0 - vml_parent.pos_ieCSS3.x)
  167. };
  168. clone.size_offset = {
  169. 'width': 0,
  170. 'height': 0
  171. };
  172. clone.style.behavior = null;
  173. clone.style.position = 'absolute';
  174. clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px';
  175. clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px';
  176. clone.className = 'ieCSS3_text_shadow';
  177. element.parentNode.appendChild(shadow);
  178. element.parentNode.appendChild(clone);
  179. element.style.visibility = 'hidden';
  180. // For window resizing
  181. element.vml.push(clone);
  182. element.vml.push(shadow);
  183. return(true);
  184. }
  185. function ondocumentready(classID) {
  186. if (!supportsVml()) { return(false); }
  187. if (this.className.match(classID)) { return(false); }
  188. this.className = this.className.concat(' ', classID);
  189. // Add a namespace for VML (IE8 requires it)
  190. if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
  191. // Check to see if we've run once before on this page
  192. if (typeof(window.ieCSS3) == 'undefined') {
  193. // Create global ieCSS3 object
  194. window.ieCSS3 = {
  195. 'vmlified_elements': new Array(),
  196. 'update_timer': setInterval(updatePositionAndSize, timer_length)
  197. };
  198. if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; }
  199. // Attach window resize event
  200. window.onresize = updatePositionAndSize;
  201. }
  202. // These attrs are for the script and have no meaning to the browser:
  203. this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] ||
  204. this.currentStyle['-moz-border-radius'] ||
  205. this.currentStyle['-webkit-border-radius'] ||
  206. this.currentStyle['border-radius'] ||
  207. this.currentStyle['-khtml-border-radius']);
  208. this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1);
  209. this.fillColor = this.currentStyle.backgroundColor;
  210. this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
  211. this.strokeColor = this.currentStyle.borderColor;
  212. this.strokeWeight = parseInt(this.currentStyle.borderWidth);
  213. this.stroked = 'true';
  214. if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {
  215. this.strokeWeight = 0;
  216. this.strokeColor = fillColor;
  217. this.stroked = 'false';
  218. }
  219. this.opacity = parseFloat(this.currentStyle.opacity || 1);
  220. this.textShadow = this.currentStyle['text-shadow'];
  221. this.element.vml = new Array();
  222. this.zIndex = parseInt(this.currentStyle.zIndex);
  223. if (isNaN(this.zIndex)) { this.zIndex = 0; }
  224. // Find which element provides position:relative for the target element (default to BODY)
  225. vml_parent = this;
  226. var limit = 100, i = 0;
  227. do {
  228. vml_parent = vml_parent.parentElement;
  229. i++;
  230. if (i >= limit) { return(false); }
  231. } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY'));
  232. vml_parent.pos_ieCSS3 = findPos(vml_parent);
  233. this.pos_ieCSS3 = findPos(this);
  234. var rv1 = createBoxShadow(this, vml_parent);
  235. var rv2 = createBorderRect(this, vml_parent);
  236. var rv3 = createTextShadow(this, vml_parent);
  237. if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); }
  238. if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') {
  239. vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();
  240. vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)");
  241. vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)");
  242. // Compatibility with IE7.js
  243. vml_parent.document.ieCSS3_stylesheet.ie7 = true;
  244. }
  245. }
  246. function updatePositionAndSize() {
  247. if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); }
  248. for (var i in window.ieCSS3.vmlified_elements) {
  249. var el = window.ieCSS3.vmlified_elements[i];
  250. if (typeof(el.vml) != 'object') { continue; }
  251. for (var z in el.vml) {
  252. //var parent_pos = findPos(el.vml[z].parentNode);
  253. var new_pos = findPos(el);
  254. new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px';
  255. new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';
  256. if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }
  257. if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }
  258. var new_size = {
  259. 'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),
  260. 'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height)
  261. }
  262. if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; }
  263. if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; }
  264. }
  265. }
  266. if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }
  267. }
  268. </script>