slider/css/boxsizing.htc

   1 <component lightWeight="true">\r
   2 <attach event="onpropertychange" onevent="checkPropertyChange()" />\r
   3 <attach event="ondetach" onevent="restore()" />\r
   4 <script>\r
   5 //<![CDATA[\r
   6 \r
   7 var doc = element.document;\r
   8 \r
   9 function init() {\r
  10         updateBorderBoxWidth();\r
  11         updateBorderBoxHeight();\r
  12 }\r
  13 \r
  14 function restore() {\r
  15         element.runtimeStyle.width = "";\r
  16         element.runtimeStyle.height = "";\r
  17 }\r
  18 \r
  19 /* border width getters */\r
  20 function getBorderWidth(sSide) {\r
  21         if (element.currentStyle["border" + sSide + "Style"] == "none")\r
  22                 return 0;\r
  23         var n = parseInt(element.currentStyle["border" + sSide + "Width"]);\r
  24         return n || 0;\r
  25 }\r
  26 \r
  27 function getBorderLeftWidth() { return getBorderWidth("Left"); }\r
  28 function getBorderRightWidth() { return getBorderWidth("Right"); }\r
  29 function getBorderTopWidth() { return getBorderWidth("Top"); }\r
  30 function getBorderBottomWidth() { return getBorderWidth("Bottom"); }\r
  31 /* end border width getters */\r
  32 \r
  33 /* padding getters */\r
  34 function getPadding(sSide) {\r
  35         var n = parseInt(element.currentStyle["padding" + sSide]);\r
  36         return n || 0;\r
  37 }\r
  38 \r
  39 function getPaddingLeft() { return getPadding("Left"); }\r
  40 function getPaddingRight() { return getPadding("Right"); }\r
  41 function getPaddingTop() { return getPadding("Top"); }\r
  42 function getPaddingBottom() { return getPadding("Bottom"); }\r
  43 /* end padding getters */\r
  44 \r
  45 function getBoxSizing() {\r
  46         var s = element.style;\r
  47         var cs = element.currentStyle\r
  48 \r
  49         if (typeof s.boxSizing != "undefined" && s.boxSizing != "")\r
  50                 return s.boxSizing;\r
  51         if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")\r
  52                 return s["box-sizing"];\r
  53         if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")\r
  54                 return cs.boxSizing;\r
  55         if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")\r
  56                 return cs["box-sizing"];\r
  57         return getDocumentBoxSizing();\r
  58 }\r
  59 \r
  60 function getDocumentBoxSizing() {\r
  61         if (doc.compatMode == null || doc.compatMode == "BackCompat")\r
  62                 return "border-box";\r
  63         return "content-box"\r
  64 }\r
  65 \r
  66 /* width and height setters */\r
  67 function setBorderBoxWidth(n) {\r
  68         element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -\r
  69                 getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";\r
  70 }\r
  71 \r
  72 function setBorderBoxHeight(n) {\r
  73         element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -\r
  74                 getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";\r
  75 }\r
  76 \r
  77 function setContentBoxWidth(n) {\r
  78         element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +\r
  79                 getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";\r
  80 }\r
  81 \r
  82 function setContentBoxHeight(n) {\r
  83         element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +\r
  84                 getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";\r
  85 }\r
  86 /* end width and height setters */\r
  87 \r
  88 function updateBorderBoxWidth() {\r
  89         element.runtimeStyle.width = "";\r
  90         if (getDocumentBoxSizing() == getBoxSizing())\r
  91                 return;\r
  92         var csw = element.currentStyle.width;\r
  93         if (csw != "auto" && csw.indexOf("px") != -1) {\r
  94                 if (getBoxSizing() == "border-box")\r
  95                         setBorderBoxWidth(parseInt(csw));\r
  96                 else\r
  97                         setContentBoxWidth(parseInt(csw));\r
  98         }\r
  99 }\r
 100 \r
 101 function updateBorderBoxHeight() {\r
 102         element.runtimeStyle.height = "";       \r
 103         if (getDocumentBoxSizing() == getBoxSizing())\r
 104                 return;\r
 105         var csh = element.currentStyle.height;\r
 106         if (csh != "auto" && csh.indexOf("px") != -1) {\r
 107                 if (getBoxSizing() == "border-box")\r
 108                         setBorderBoxHeight(parseInt(csh));\r
 109                 else\r
 110                         setContentBoxHeight(parseInt(csh));\r
 111         }\r
 112 }\r
 113 \r
 114 function checkPropertyChange() {\r
 115         var pn = event.propertyName;\r
 116         var undef;\r
 117 \r
 118         if (pn == "style.boxSizing" && element.style.boxSizing == "") {\r
 119                 element.style.removeAttribute("boxSizing");\r
 120                 element.runtimeStyle.boxSizing = undef;         \r
 121         }\r
 122 \r
 123 \r
 124         switch (pn) {\r
 125                 case "style.width":\r
 126                 case "style.borderLeftWidth":\r
 127                 case "style.borderLeftStyle":\r
 128                 case "style.borderRightWidth":\r
 129                 case "style.borderRightStyle":\r
 130                 case "style.paddingLeft":\r
 131                 case "style.paddingRight":\r
 132                         updateBorderBoxWidth();\r
 133                         break;\r
 134                 \r
 135                 case "style.height":\r
 136                 case "style.borderTopWidth":\r
 137                 case "style.borderTopStyle":\r
 138                 case "style.borderBottomWidth":\r
 139                 case "style.borderBottomStyle":\r
 140                 case "style.paddingTop":\r
 141                 case "style.paddingBottom":\r
 142                         updateBorderBoxHeight();\r
 143                         break;\r
 144                 \r
 145                 case "className":\r
 146                 case "style.boxSizing":\r
 147                         updateBorderBoxWidth();\r
 148                         updateBorderBoxHeight();\r
 149                         break;\r
 150         }\r
 151 }\r
 152 \r
 153 init();\r
 154 \r
 155 //]]>\r
 156 </script>\r
 157 </component>