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