root / cloudcms / static / cloudcms / css / boxsizing.htc @ 7405e79a
History | View | Annotate | Download (8.5 kB)
1 | 7405e79a | Olga Brani | /** |
---|---|---|---|
2 | 7405e79a | Olga Brani | * CSS-JS-BOOSTER |
3 | 7405e79a | Olga Brani | * |
4 | 7405e79a | Olga Brani | * A polyfill for box-sizing: border-box for IE6 & IE7. |
5 | 7405e79a | Olga Brani | * |
6 | 7405e79a | Olga Brani | * JScript |
7 | 7405e79a | Olga Brani | * |
8 | 7405e79a | Olga Brani | * This program is free software: you can redistribute it and/or modify |
9 | 7405e79a | Olga Brani | * it under the terms of the GNU Lesser General Public License as published |
10 | 7405e79a | Olga Brani | * by the Free Software Foundation, either version 3 of the License, or |
11 | 7405e79a | Olga Brani | * (at your option) any later version. |
12 | 7405e79a | Olga Brani | * |
13 | 7405e79a | Olga Brani | * This program is distributed in the hope that it will be useful, |
14 | 7405e79a | Olga Brani | * but WITHOUT ANY WARRANTY; without even the implied warranty of |
15 | 7405e79a | Olga Brani | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
16 | 7405e79a | Olga Brani | * GNU Lesser General Public License for more details. |
17 | 7405e79a | Olga Brani | * |
18 | 7405e79a | Olga Brani | * See <http://www.gnu.org/licenses/lgpl-3.0.txt> |
19 | 7405e79a | Olga Brani | * |
20 | 7405e79a | Olga Brani | * @category JScript |
21 | 7405e79a | Olga Brani | * @package box-sizing-polyfill |
22 | 7405e79a | Olga Brani | * @author Christian Schepp Schaefer <schaepp@gmx.de> <http://twitter.com/derSchepp> |
23 | 7405e79a | Olga Brani | * @copyright 2010 Christian Schepp Schaefer |
24 | 7405e79a | Olga Brani | * @license http://www.gnu.org/copyleft/lesser.html The GNU LESSER GENERAL PUBLIC LICENSE, Version 3.0 |
25 | 7405e79a | Olga Brani | * @link http://github.com/Schepp/box-sizing-polyfill |
26 | 7405e79a | Olga Brani | * |
27 | 7405e79a | Olga Brani | * PREFACE: |
28 | 7405e79a | Olga Brani | * |
29 | 7405e79a | Olga Brani | * This box-sizing polyfill is based on previous work done by Erik Arvidsson, |
30 | 7405e79a | Olga Brani | * which he published in 2002 on http://webfx.eae.net/dhtml/boxsizing/boxsizing.html. |
31 | 7405e79a | Olga Brani | * |
32 | 7405e79a | Olga Brani | * USAGE: |
33 | 7405e79a | Olga Brani | * |
34 | 7405e79a | Olga Brani | * Add the behavior/HTC after every `box-sizing: border-box;` that you assign: |
35 | 7405e79a | Olga Brani | * |
36 | 7405e79a | Olga Brani | * box-sizing: border-box; |
37 | 7405e79a | Olga Brani | * *behavior: url(/scripts/boxsizing.htc);` |
38 | 7405e79a | Olga Brani | * |
39 | 7405e79a | Olga Brani | * If you prefix the `behavior` property with a star, like seen above, it will only be seen by |
40 | 7405e79a | Olga Brani | * IE6 & IE7, not by IE8+ (it's a hack) which is better for the performance on those newer browsers. |
41 | 7405e79a | Olga Brani | * |
42 | 7405e79a | Olga Brani | * The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS. |
43 | 7405e79a | Olga Brani | * That's why I'd advise you to use absolute paths like in the example. |
44 | 7405e79a | Olga Brani | * |
45 | 7405e79a | Olga Brani | */ |
46 | 7405e79a | Olga Brani | <component lightWeight="true"> |
47 | 7405e79a | Olga Brani | <attach event="onpropertychange" onevent="checkPropertyChange()" /> |
48 | 7405e79a | Olga Brani | <attach event="ondetach" onevent="restore()" /> |
49 | 7405e79a | Olga Brani | <attach event="onresize" for="window" onevent="restore();init()" /> |
50 | 7405e79a | Olga Brani | <script type="text/javascript"> |
51 | 7405e79a | Olga Brani | //<![CDATA[ |
52 | 7405e79a | Olga Brani | |
53 | 7405e79a | Olga Brani | var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth); |
54 | 7405e79a | Olga Brani | // Shortcut for the document object |
55 | 7405e79a | Olga Brani | var doc = element.document; |
56 | 7405e79a | Olga Brani | |
57 | 7405e79a | Olga Brani | /* |
58 | 7405e79a | Olga Brani | * init gets called once at the start and then never again, |
59 | 7405e79a | Olga Brani | * triggers box-sizing calculations and updates width and height |
60 | 7405e79a | Olga Brani | */ |
61 | 7405e79a | Olga Brani | function init(){ |
62 | 7405e79a | Olga Brani | // check for IE8+ |
63 | 7405e79a | Olga Brani | if(typeof(element.style.boxSizing) == "undefined"){ |
64 | 7405e79a | Olga Brani | updateBorderBoxWidth(); |
65 | 7405e79a | Olga Brani | updateBorderBoxHeight(); |
66 | 7405e79a | Olga Brani | } |
67 | 7405e79a | Olga Brani | } |
68 | 7405e79a | Olga Brani | |
69 | 7405e79a | Olga Brani | /* |
70 | 7405e79a | Olga Brani | * restore gets called when the behavior is being detached (see event binding at the top), |
71 | 7405e79a | Olga Brani | * resets everything like it was before applying the behavior |
72 | 7405e79a | Olga Brani | */ |
73 | 7405e79a | Olga Brani | function restore(){ |
74 | 7405e79a | Olga Brani | // check for IE8+ |
75 | 7405e79a | Olga Brani | if(typeof(element.style.boxSizing) == "undefined"){ |
76 | 7405e79a | Olga Brani | element.runtimeStyle.width = ""; |
77 | 7405e79a | Olga Brani | element.runtimeStyle.height = ""; |
78 | 7405e79a | Olga Brani | } |
79 | 7405e79a | Olga Brani | } |
80 | 7405e79a | Olga Brani | |
81 | 7405e79a | Olga Brani | /* |
82 | 7405e79a | Olga Brani | * checkPropertyChange gets called as soon as an element property changes |
83 | 7405e79a | Olga Brani | * (see event binding at the top), it then checks if any property influencing its |
84 | 7405e79a | Olga Brani | * dimensions was changed and if yes recalculates width and height |
85 | 7405e79a | Olga Brani | */ |
86 | 7405e79a | Olga Brani | function checkPropertyChange(){ |
87 | 7405e79a | Olga Brani | // check for IE8+ |
88 | 7405e79a | Olga Brani | if(typeof(element.style.boxSizing) == "undefined"){ |
89 | 7405e79a | Olga Brani | var pn = event.propertyName; |
90 | 7405e79a | Olga Brani | var undef; |
91 | 7405e79a | Olga Brani | if(pn == "style.boxSizing" && element.style.boxSizing == ""){ |
92 | 7405e79a | Olga Brani | element.style.removeAttribute("boxSizing"); |
93 | 7405e79a | Olga Brani | element.runtimeStyle.boxSizing = undef; |
94 | 7405e79a | Olga Brani | } |
95 | 7405e79a | Olga Brani | switch (pn){ |
96 | 7405e79a | Olga Brani | case "style.width": |
97 | 7405e79a | Olga Brani | case "style.borderLeftWidth": |
98 | 7405e79a | Olga Brani | case "style.borderLeftStyle": |
99 | 7405e79a | Olga Brani | case "style.borderRightWidth": |
100 | 7405e79a | Olga Brani | case "style.borderRightStyle": |
101 | 7405e79a | Olga Brani | case "style.paddingLeft": |
102 | 7405e79a | Olga Brani | case "style.paddingRight": |
103 | 7405e79a | Olga Brani | updateBorderBoxWidth(); |
104 | 7405e79a | Olga Brani | break; |
105 | 7405e79a | Olga Brani | |
106 | 7405e79a | Olga Brani | case "style.height": |
107 | 7405e79a | Olga Brani | case "style.borderTopWidth": |
108 | 7405e79a | Olga Brani | case "style.borderTopStyle": |
109 | 7405e79a | Olga Brani | case "style.borderBottomWidth": |
110 | 7405e79a | Olga Brani | case "style.borderBottomStyle": |
111 | 7405e79a | Olga Brani | case "style.paddingTop": |
112 | 7405e79a | Olga Brani | case "style.paddingBottom": |
113 | 7405e79a | Olga Brani | updateBorderBoxHeight(); |
114 | 7405e79a | Olga Brani | break; |
115 | 7405e79a | Olga Brani | |
116 | 7405e79a | Olga Brani | case "className": |
117 | 7405e79a | Olga Brani | case "style.boxSizing": |
118 | 7405e79a | Olga Brani | updateBorderBoxWidth(); |
119 | 7405e79a | Olga Brani | updateBorderBoxHeight(); |
120 | 7405e79a | Olga Brani | break; |
121 | 7405e79a | Olga Brani | } |
122 | 7405e79a | Olga Brani | } |
123 | 7405e79a | Olga Brani | } |
124 | 7405e79a | Olga Brani | |
125 | 7405e79a | Olga Brani | /* |
126 | 7405e79a | Olga Brani | * Helper function, taken from Dean Edward's IE7 framework, |
127 | 7405e79a | Olga Brani | * added by Schepp on 12.06.2010. |
128 | 7405e79a | Olga Brani | * http://code.google.com/p/ie7-js/ |
129 | 7405e79a | Olga Brani | * |
130 | 7405e79a | Olga Brani | * Allows us to convert from relative to pixel-values. |
131 | 7405e79a | Olga Brani | */ |
132 | 7405e79a | Olga Brani | function getPixelValue(value){ |
133 | 7405e79a | Olga Brani | var PIXEL = /^\d+(px)?$/i; |
134 | 7405e79a | Olga Brani | if (PIXEL.test(value)) return parseInt(value); |
135 | 7405e79a | Olga Brani | var style = element.style.left; |
136 | 7405e79a | Olga Brani | var runtimeStyle = element.runtimeStyle.left; |
137 | 7405e79a | Olga Brani | element.runtimeStyle.left = element.currentStyle.left; |
138 | 7405e79a | Olga Brani | element.style.left = value || 0; |
139 | 7405e79a | Olga Brani | value = parseInt(element.style.pixelLeft); |
140 | 7405e79a | Olga Brani | element.style.left = style; |
141 | 7405e79a | Olga Brani | element.runtimeStyle.left = runtimeStyle; |
142 | 7405e79a | Olga Brani | |
143 | 7405e79a | Olga Brani | return value; |
144 | 7405e79a | Olga Brani | } |
145 | 7405e79a | Olga Brani | |
146 | 7405e79a | Olga Brani | function getPixelWidth(object, value){ |
147 | 7405e79a | Olga Brani | // For Pixel Values |
148 | 7405e79a | Olga Brani | var PIXEL = /^\d+(px)?$/i; |
149 | 7405e79a | Olga Brani | if (PIXEL.test(value)) return parseInt(value); |
150 | 7405e79a | Olga Brani | |
151 | 7405e79a | Olga Brani | // For Percentage Values |
152 | 7405e79a | Olga Brani | var PERCENT = /^[\d\.]+%$/i; |
153 | 7405e79a | Olga Brani | if (PERCENT.test(value)){ |
154 | 7405e79a | Olga Brani | try{ |
155 | 7405e79a | Olga Brani | parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%")); |
156 | 7405e79a | Olga Brani | value = (parseFloat(value) / 100) * parentWidth; |
157 | 7405e79a | Olga Brani | } |
158 | 7405e79a | Olga Brani | catch(e){ |
159 | 7405e79a | Olga Brani | value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth; |
160 | 7405e79a | Olga Brani | } |
161 | 7405e79a | Olga Brani | return parseInt(value); |
162 | 7405e79a | Olga Brani | } |
163 | 7405e79a | Olga Brani | |
164 | 7405e79a | Olga Brani | // For EM Values |
165 | 7405e79a | Olga Brani | var style = object.style.left; |
166 | 7405e79a | Olga Brani | var runtimeStyle = object.runtimeStyle.left; |
167 | 7405e79a | Olga Brani | object.runtimeStyle.left = object.currentStyle.left; |
168 | 7405e79a | Olga Brani | object.style.left = value || 0; |
169 | 7405e79a | Olga Brani | value = parseInt(object.style.pixelLeft); |
170 | 7405e79a | Olga Brani | object.style.left = style; |
171 | 7405e79a | Olga Brani | object.runtimeStyle.left = runtimeStyle; |
172 | 7405e79a | Olga Brani | |
173 | 7405e79a | Olga Brani | return value; |
174 | 7405e79a | Olga Brani | } |
175 | 7405e79a | Olga Brani | |
176 | 7405e79a | Olga Brani | |
177 | 7405e79a | Olga Brani | /* |
178 | 7405e79a | Olga Brani | * getBorderWidth & friends |
179 | 7405e79a | Olga Brani | * Border width getters |
180 | 7405e79a | Olga Brani | */ |
181 | 7405e79a | Olga Brani | function getBorderWidth(sSide){ |
182 | 7405e79a | Olga Brani | if(element.currentStyle["border" + sSide + "Style"] == "none"){ |
183 | 7405e79a | Olga Brani | return 0; |
184 | 7405e79a | Olga Brani | } |
185 | 7405e79a | Olga Brani | var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]); |
186 | 7405e79a | Olga Brani | return n || 0; |
187 | 7405e79a | Olga Brani | } |
188 | 7405e79a | Olga Brani | function getBorderLeftWidth() { return getBorderWidth("Left"); } |
189 | 7405e79a | Olga Brani | function getBorderRightWidth() { return getBorderWidth("Right"); } |
190 | 7405e79a | Olga Brani | function getBorderTopWidth() { return getBorderWidth("Top"); } |
191 | 7405e79a | Olga Brani | function getBorderBottomWidth() { return getBorderWidth("Bottom"); } |
192 | 7405e79a | Olga Brani | |
193 | 7405e79a | Olga Brani | |
194 | 7405e79a | Olga Brani | /* |
195 | 7405e79a | Olga Brani | * getPadding & friends |
196 | 7405e79a | Olga Brani | * Padding width getters |
197 | 7405e79a | Olga Brani | */ |
198 | 7405e79a | Olga Brani | function getPadding(sSide) { |
199 | 7405e79a | Olga Brani | var n = getPixelValue(element.currentStyle["padding" + sSide]); |
200 | 7405e79a | Olga Brani | return n || 0; |
201 | 7405e79a | Olga Brani | } |
202 | 7405e79a | Olga Brani | function getPaddingLeft() { return getPadding("Left"); } |
203 | 7405e79a | Olga Brani | function getPaddingRight() { return getPadding("Right"); } |
204 | 7405e79a | Olga Brani | function getPaddingTop() { return getPadding("Top"); } |
205 | 7405e79a | Olga Brani | function getPaddingBottom() { return getPadding("Bottom"); } |
206 | 7405e79a | Olga Brani | |
207 | 7405e79a | Olga Brani | |
208 | 7405e79a | Olga Brani | |
209 | 7405e79a | Olga Brani | /* |
210 | 7405e79a | Olga Brani | * getBoxSizing |
211 | 7405e79a | Olga Brani | * Get the box-sizing value for the current element |
212 | 7405e79a | Olga Brani | */ |
213 | 7405e79a | Olga Brani | function getBoxSizing(){ |
214 | 7405e79a | Olga Brani | var s = element.style; |
215 | 7405e79a | Olga Brani | var cs = element.currentStyle |
216 | 7405e79a | Olga Brani | if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){ |
217 | 7405e79a | Olga Brani | return s.boxSizing; |
218 | 7405e79a | Olga Brani | } |
219 | 7405e79a | Olga Brani | if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){ |
220 | 7405e79a | Olga Brani | return s["box-sizing"]; |
221 | 7405e79a | Olga Brani | } |
222 | 7405e79a | Olga Brani | if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){ |
223 | 7405e79a | Olga Brani | return cs.boxSizing; |
224 | 7405e79a | Olga Brani | } |
225 | 7405e79a | Olga Brani | if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){ |
226 | 7405e79a | Olga Brani | return cs["box-sizing"]; |
227 | 7405e79a | Olga Brani | } |
228 | 7405e79a | Olga Brani | return getDocumentBoxSizing(); |
229 | 7405e79a | Olga Brani | } |
230 | 7405e79a | Olga Brani | |
231 | 7405e79a | Olga Brani | |
232 | 7405e79a | Olga Brani | /* |
233 | 7405e79a | Olga Brani | * getDocumentBoxSizing |
234 | 7405e79a | Olga Brani | * Get the default document box sizing (check for quirks mode) |
235 | 7405e79a | Olga Brani | */ |
236 | 7405e79a | Olga Brani | function getDocumentBoxSizing(){ |
237 | 7405e79a | Olga Brani | if(doc.compatMode == null || doc.compatMode == "BackCompat"){ |
238 | 7405e79a | Olga Brani | return "border-box"; |
239 | 7405e79a | Olga Brani | } |
240 | 7405e79a | Olga Brani | return "content-box" |
241 | 7405e79a | Olga Brani | } |
242 | 7405e79a | Olga Brani | |
243 | 7405e79a | Olga Brani | |
244 | 7405e79a | Olga Brani | /* |
245 | 7405e79a | Olga Brani | * setBorderBoxWidth & friends |
246 | 7405e79a | Olga Brani | * Width and height setters |
247 | 7405e79a | Olga Brani | */ |
248 | 7405e79a | Olga Brani | function setBorderBoxWidth(n){ |
249 | 7405e79a | Olga Brani | element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() - |
250 | 7405e79a | Olga Brani | getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px"; |
251 | 7405e79a | Olga Brani | } |
252 | 7405e79a | Olga Brani | function setBorderBoxHeight(n){ |
253 | 7405e79a | Olga Brani | element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() - |
254 | 7405e79a | Olga Brani | getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px"; |
255 | 7405e79a | Olga Brani | } |
256 | 7405e79a | Olga Brani | function setContentBoxWidth(n){ |
257 | 7405e79a | Olga Brani | element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() + |
258 | 7405e79a | Olga Brani | getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px"; |
259 | 7405e79a | Olga Brani | } |
260 | 7405e79a | Olga Brani | function setContentBoxHeight(n){ |
261 | 7405e79a | Olga Brani | element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() + |
262 | 7405e79a | Olga Brani | getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px"; |
263 | 7405e79a | Olga Brani | } |
264 | 7405e79a | Olga Brani | |
265 | 7405e79a | Olga Brani | |
266 | 7405e79a | Olga Brani | /* |
267 | 7405e79a | Olga Brani | * updateBorderBoxWidth & updateBorderBoxHeight |
268 | 7405e79a | Olga Brani | * |
269 | 7405e79a | Olga Brani | */ |
270 | 7405e79a | Olga Brani | function updateBorderBoxWidth() { |
271 | 7405e79a | Olga Brani | if(getDocumentBoxSizing() == getBoxSizing()){ |
272 | 7405e79a | Olga Brani | return; |
273 | 7405e79a | Olga Brani | } |
274 | 7405e79a | Olga Brani | var csw = element.currentStyle.width; |
275 | 7405e79a | Olga Brani | if(csw != "auto"){ |
276 | 7405e79a | Olga Brani | csw = getPixelWidth(element,csw); |
277 | 7405e79a | Olga Brani | if(getBoxSizing() == "border-box"){ |
278 | 7405e79a | Olga Brani | setBorderBoxWidth(parseInt(csw)); |
279 | 7405e79a | Olga Brani | } |
280 | 7405e79a | Olga Brani | else{ |
281 | 7405e79a | Olga Brani | setContentBoxWidth(parseInt(csw)); |
282 | 7405e79a | Olga Brani | } |
283 | 7405e79a | Olga Brani | } |
284 | 7405e79a | Olga Brani | } |
285 | 7405e79a | Olga Brani | |
286 | 7405e79a | Olga Brani | function updateBorderBoxHeight() { |
287 | 7405e79a | Olga Brani | if(getDocumentBoxSizing() == getBoxSizing()){ |
288 | 7405e79a | Olga Brani | return; |
289 | 7405e79a | Olga Brani | } |
290 | 7405e79a | Olga Brani | var csh = element.currentStyle.height; |
291 | 7405e79a | Olga Brani | if(csh != "auto"){ |
292 | 7405e79a | Olga Brani | csh = getPixelValue(csh); |
293 | 7405e79a | Olga Brani | if(getBoxSizing() == "border-box"){ |
294 | 7405e79a | Olga Brani | setBorderBoxHeight(parseInt(csh)); |
295 | 7405e79a | Olga Brani | } |
296 | 7405e79a | Olga Brani | else{ |
297 | 7405e79a | Olga Brani | setContentBoxHeight(parseInt(csh)); |
298 | 7405e79a | Olga Brani | } |
299 | 7405e79a | Olga Brani | } |
300 | 7405e79a | Olga Brani | } |
301 | 7405e79a | Olga Brani | |
302 | 7405e79a | Olga Brani | |
303 | 7405e79a | Olga Brani | // Run the calculations |
304 | 7405e79a | Olga Brani | init(); |
305 | 7405e79a | Olga Brani | |
306 | 7405e79a | Olga Brani | //]]> |
307 | 7405e79a | Olga Brani | </script> |
308 | 7405e79a | Olga Brani | </component> |