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