--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24
Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
- Added partial support for 'box-shadow' style
- Checks for VML support before doing anything
- Updates VML element size and position via timer and also via window resize event
- lots of other small things
Published date : 2010/03/14
http://fetchak.com/ie-css3
Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter
<public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">
timer_length = 200; // Milliseconds
border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues
// supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return supportsVml.supported
}
// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return({
'x': curleft,
'y': curtop
});
}
function createBoxShadow(element, vml_parent) {
var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';
var match = style.match(/^(∖d+)px (∖d+)px (∖d+)px/);
if (!match) { return(false); }
var shadow = document.createElement('v:roundrect');
shadow.userAttrs = {
'x': parseInt(RegExp.$1 || 0),
'y': parseInt(RegExp.$2 || 0),
'radius': parseInt(RegExp.$3 || 0) / 2
};
shadow.position_offset = {
'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
};
shadow.size_offset = {
'width': 0,
'height': 0
};
shadow.arcsize = element.arcSize +'px';
shadow.style.display = 'block';
shadow.style.position = 'absolute';
shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
shadow.style.width = element.offsetWidth +'px';
shadow.style.height = element.offsetHeight +'px';
shadow.style.antialias = true;
shadow.className = 'vml_box_shadow';
shadow.style.zIndex = element.zIndex - 1;
shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';
element.parentNode.appendChild(shadow);
//element.parentNode.insertBefore(sha
