anonnews2/public_html/boxsizing.htc

<component lightWeight="true">
<attach event="onpropertychange" onevent="checkPropertyChange()" />
<attach event="ondetach" onevent="restore()" />
<script>
//<![CDATA[


var doc = element.document;

function init() {
	updateBorderBoxWidth();
	updateBorderBoxHeight();
}

function restore() {
	element.runtimeStyle.width = "";
	element.runtimeStyle.height = "";
}

/* border width getters */
function getBorderWidth(sSide) {
	if (element.currentStyle["border" + sSide + "Style"] == "none")
		return 0;
	var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
	return n || 0;
}

function getBorderLeftWidth() { return getBorderWidth("Left"); }
function getBorderRightWidth() { return getBorderWidth("Right"); }
function getBorderTopWidth() { return getBorderWidth("Top"); }
function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
/* end border width getters */

/* padding getters */
function getPadding(sSide) {
	var n = parseInt(element.currentStyle["padding" + sSide]);
	return n || 0;
}

function getPaddingLeft() { return getPadding("Left"); }
function getPaddingRight() { return getPadding("Right"); }
function getPaddingTop() { return getPadding("Top"); }
function getPaddingBottom() { return getPadding("Bottom"); }
/* end padding getters */

function getBoxSizing() {
	var s = element.style;
	var cs = element.currentStyle

	if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
		return s.boxSizing;
	if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
		return s["box-sizing"];
	if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
		return cs.boxSizing;
	if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
		return cs["box-sizing"];
	return getDocumentBoxSizing();
}

function getDocumentBoxSizing() {
	if (doc.compatMode == null || doc.compatMode == "BackCompat")
		return "border-box";
	return "content-box"
}

/* width and height setters */
function setBorderBoxWidth(n) {
	element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
		getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
}

function setBorderBoxHeight(n) {
	element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
		getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
}

function setContentBoxWidth(n) {
	element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
		getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
}

function setContentBoxHeight(n) {
	element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
		getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
}
/* end width and height setters */

function updateBorderBoxWidth() {
	element.runtimeStyle.width = "";
	if (getDocumentBoxSizing() == getBoxSizing()) return;
	if (element.currentStyle.width == 'auto') return;
	var csw = getPixelValue(element, element.currentStyle.width);
	if (getBoxSizing() == "border-box")
		setBorderBoxWidth(csw);
	else
		setContentBoxWidth(csw);
}

function updateBorderBoxHeight() {
	element.runtimeStyle.height = "";	
	if (getDocumentBoxSizing() == getBoxSizing()) return;
	if (element.currentStyle.height == 'auto') return;
	var csh = getPixelValue(element, element.currentStyle.height);
	if (getBoxSizing() == "border-box")
		setBorderBoxHeight(csh);
	else
		setContentBoxHeight(csh);
}

function checkPropertyChange() {
	var pn = event.propertyName;
	var undef;

	if (pn == "style.boxSizing" && element.style.boxSizing == "") {
		element.style.removeAttribute("boxSizing");
		element.runtimeStyle.boxSizing = undef;		
	}


	switch (pn) {
		case "style.width":
		case "style.borderLeftWidth":
		case "style.borderLeftStyle":
		case "style.borderRightWidth":
		case "style.borderRightStyle":
		case "style.paddingLeft":
		case "style.paddingRight":
			updateBorderBoxWidth();
			break;
		
		case "style.height":
		case "style.borderTopWidth":
		case "style.borderTopStyle":
		case "style.borderBottomWidth":
		case "style.borderBottomStyle":
		case "style.paddingTop":
		case "style.paddingBottom":
			updateBorderBoxHeight();
			break;
		
		case "className":
		case "style.boxSizing":
			updateBorderBoxWidth();
			updateBorderBoxHeight();
			break;
	}
}

// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
// Dean Edwards
var PIXEL = /^\d+(px)?$/i;
function getPixelValue(element, value) {
	if (PIXEL.test(value)) return parseInt(value);
	var style = element.style.left;
	var runtimeStyle = element.runtimeStyle.left;
	element.runtimeStyle.left = element.currentStyle.left;
	element.style.left = value || 0;
	value = element.style.pixelLeft;
	element.style.left = style;
	element.runtimeStyle.left = runtimeStyle;
	return value;
};

init();

//]]>
</script>
</component>