|
1
|
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 |
|