Skip to content

Instantly share code, notes, and snippets.

@comfuture
Created October 31, 2011 15:15
Show Gist options
  • Save comfuture/1327720 to your computer and use it in GitHub Desktop.
Save comfuture/1327720 to your computer and use it in GitHub Desktop.
make ie<9 to support border-radius
;(function($){
// append vml xmlns to document
if ($.browser.msie && document.namespaces["v"] == null) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var ss = document.createStyleSheet().owningElement;
ss.styleSheet.cssText = "v\\:*{behavior:url(#default#VML);}"
}
var getHTML = function(o) {
return '<div class="ie_border_radius" style="position: absolute; left: 0px; top: 0px; z-index: -1; width:' +
o.width + "px;height:" + o.height + 'px;">' +
'<v:roundrect arcsize="' + o.arcSize + '" strokecolor="' +
o.strokeColor + '" strokeweight="' + o.strokeWeight +
'" style="behavior: url(#default#VML); position:absolute; antialias: true; width:' +
o.width + "px;height:" + o.height + 'px;' + "" + '" >' +
'<v:fill color="' + o.fillColor + '" src="' + o.fillSrc +
'" type="tile" style="behavior: url(#default#VML);" />' +
'</v:roundrect>' +
'</div>';
};
$.fn.borderRadius = !$.browser.msie ? function() {} : function(options) {
var options = options || {};
return this.each(function(index, element) {
var opts = {};
$(this).attr('data-force-radius', 1);
if (this._border_radius_opts) {
opts = this._border_radius_opts;
$(this).find(".ie_border_radius").remove();
} else {
opts.strokeColor = this.currentStyle.borderColor;
opts.strokeWeight = this.currentStyle.borderWidth;
opts.fillColor = this.currentStyle.backgroundColor;
opts.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
this.style.border = 'none'; // perhaps add onto padding?
this.style.background = 'transparent';
this._border_radius_opts = opts;
}
opts.width = $(this).outerWidth() ;
opts.height = $(this).outerHeight();
var s = this.currentStyle, r = options.radius || parseInt(
s['-ie-border-radius'] ||
s['-moz-border-radius'] ||
s['-webkit-border-radius'] ||
s['-border-radius'] ||
s['ie-border-radius'] ||
s['moz-border-radius'] ||
s['webkit-border-radius'] ||
s['border-radius']
);
opts.arcSize = Math.min(r / Math.min(opts.width, opts.height), 1);
if (r)
this.innerHTML += getHTML(opts);
if (this.currentStyle.position != "absolute")
this.style.position = "relative";
this.style.zoom = 1; // give it a layout
});
};
$(document).resize(function(event) {
if ($.fn.borderRadius.resizeHolder)
clearTimeout($.fn.borderRadius.resizeHolder);
$.fn.borderRadius.resizeHolder = setTimeout(function() {
$('[data-force-radius]').borderRadius();
}, 50);
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment