css/border-radius.htc

   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
   6 Changes by Nick Fetchak:
   7 - IE8 standards mode compatibility
   8 - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
   9 Published date : 2009/11/18
  10
  11
  12 <public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
  13 <script type="text/javascript">
  14
  15 // findPos() borrowed from http://www.quirksmode.org/js/findpos.html
  16 function findPos(obj) {
  17         var curleft = curtop = 0;
  18
  19         if (obj.offsetParent) {
  20                 do {
  21                         curleft += obj.offsetLeft;
  22                         curtop += obj.offsetTop;
  23                 } while (obj = obj.offsetParent);
  24         }
  25
  26         return({
  27                 'x': curleft,
  28                 'y': curtop
  29         });
  30 }
  31
  32 function oncontentready(classID) {
  33   if (this.className.match(classID)) { return(false); }
  34
  35         if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
  36
  37         this.className = this.className.concat(' ', classID);
  38         var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
  39                                         this.currentStyle['-webkit-border-radius'] ||
  40                                         this.currentStyle['border-radius'] ||
  41                                         this.currentStyle['-khtml-border-radius']) /
  42                                Math.min(this.offsetWidth, this.offsetHeight), 1);
  43         var fillColor = this.currentStyle.backgroundColor;
  44         var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
  45         var strokeColor = this.currentStyle.borderColor;
  46         var strokeWeight = parseInt(this.currentStyle.borderWidth);
  47         var stroked = 'true';
  48         if (isNaN(strokeWeight)) {
  49                 strokeWeight = 0;
  50                 strokeColor = fillColor;
  51                 stroked = 'false';
  52         }
  53
  54         this.style.background = 'transparent';
  55         this.style.borderColor = 'transparent';
  56
  57         // Find which element provides position:relative for the target element (default to BODY)
  58         var el = this;
  59         var limit = 100, i = 0;
  60         while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
  61                 el = el.parentElement;
  62                 i++;
  63                 if (i >= limit) { return(false); }
  64         }
  65         var el_zindex = parseInt(el.currentStyle.zIndex);
  66         if (isNaN(el_zindex)) { el_zindex = 0; }
  67         //alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);
  68
  69         var rect_size = {
  70                 'width': this.offsetWidth - strokeWeight,
  71                 'height': this.offsetHeight - strokeWeight
  72         };
  73         var el_pos = findPos(el);
  74         var this_pos = findPos(this);
  75         this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
  76         this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;
  77
  78         var rect = document.createElement('v:roundrect');
  79         rect.arcsize = arcSize +'px';
  80         rect.strokecolor = strokeColor;
  81         rect.strokeWeight = strokeWeight +'px';
  82         rect.stroked = stroked;
  83         rect.style.display = 'block';
  84         rect.style.position = 'absolute';
  85         rect.style.top = this_pos.y +'px';
  86         rect.style.left = this_pos.x +'px';
  87         rect.style.width = rect_size.width +'px';
  88         rect.style.height = rect_size.height +'px';
  89         rect.style.antialias = true;
  90         rect.style.zIndex = el_zindex - 1;
  91
  92         var fill = document.createElement('v:fill');
  93         fill.color = fillColor;
  94         fill.src = fillSrc;
  95         fill.type = 'tile';
  96
  97         rect.appendChild(fill);
  98         el.appendChild(rect);
  99
 100         var css = el.document.createStyleSheet();
 101         css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
 102         css.addRule("v\\:fill", "behavior: url(#default#VML)");
 103
 104         isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
 105         // IE6 doesn't support transparent borders, use padding to offset original element
 106         if (isIE6 && (strokeWeight > 0)) {
 107                 this.style.borderStyle = 'none';
 108                 this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
 109                 this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
 110         }
 111
 112         if (typeof(window.rounded_elements) == 'undefined') {
 113                 window.rounded_elements = new Array();
 114
 115                 if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
 116                 window.onresize = window_resize;
 117         }
 118         this.element.vml = rect;
 119         window.rounded_elements.push(this.element);
 120 }
 121
 122 function window_resize() {
 123         if (typeof(window.rounded_elements) == 'undefined') { return(false); }
 124
 125         for (var i in window.rounded_elements) {
 126                 var el = window.rounded_elements[i];
 127
 128                 var strokeWeight = parseInt(el.currentStyle.borderWidth);
 129                 if (isNaN(strokeWeight)) { strokeWeight = 0; }
 130
 131                 var parent_pos = findPos(el.vml.parentNode);
 132                 var pos = findPos(el);
 133                 pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
 134                 pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;
 135
 136                 el.vml.style.top = pos.y +'px';
 137                 el.vml.style.left = pos.x +'px';
 138         }
 139
 140         if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
 141 }
 142 </script>
 143