Adding Corners to Paragraphs in IE

[Kevin Dalman]

I am using your plug-in in a project I am doing. There are a few
changes I have made to do what I need. I'll provide these in 2
separate posts. First, corners on paragraphs...

I need to round some paragraphs. This will not work in IE7 because it
causes an error when you try to add append the cornerz DIV to the
paragraph innerHTML. So I simply changed the element to a SPAN and
added "display:block" to the CSS. Seems to work fine with no negative
consequences - tested in IE and FireFox.

Here is the modified mark-up - I also cleaned up the formatting a
little...

;(function($){

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);}"
}

$.fn.cornerz = function (options) {

function canvasCorner (t,l, r,bw,bc,bg){
var sa,ea,cw,sx,sy,x,y, p = 1.57, css="position:absolute;";
if (t) {sa=-p; sy=r; y=0; css+="top:-"+bw+"px;";}
else {sa=p; sy=0; y=r; css+="bottom:-"+bw+"px;";}
if (l) {ea=p*2;sx=r; x=0; css+="left:-"+bw+"px;"}
else {ea=0; sx=0; x=r; css+="right:-"+bw+"px;";}

var canvas=$("<canvas width="+r+"px height="+ r +"px style='" + css
+"' ></canvas>");
var ctx=canvas[0].getContext('2d');
ctx.beginPath();
ctx.lineWidth=bw*2;
ctx.arc(sx,sy,r,sa,ea,!(t^l));
ctx.strokeStyle=bc;
ctx.stroke();
ctx.lineWidth = 0;
ctx.lineTo(x,y);
ctx.fillStyle=bg;
ctx.fill();
return canvas;
};

function canvasCorners (corners, r, bw,bc,bg) {
var hh = $("<div style='display: inherit' />"); // trying out
style='float:left'
$.each(corners.split(" "), function() {
hh.append(canvasCorner(this[0]=="t",this[1]=="l", r,bw,bc,bg));
});
return hh;
};

function vmlCurve (r,b,c,m,ml,mt, right_fix) {
var l = m-ml-right_fix;
var t = m-mt;
return "<v:arc filled='False' strokeweight='"+b+"px'
strokecolor='"+c+"' startangle='0' endangle='361' style=' top:" + t
+"px;left: "+ l + ";width:" + r+ "px; height:" + r+ "px' />";
}

function vmlCorners (corners, r, bw, bc, bg, w) {
//var h ="<div style='text-align:left; '>";
var h ="<span style='text-align:left; display:block; '>";
$.each($.trim(corners).split(" "), function() {
var css,ml=1,mt=1,right_fix=0;
if (this.charAt(0)=="t")
css="top:-"+bw+"px;";
else {
css= "bottom:-"+bw+"px;";
mt=r+1;
}
if (this.charAt(1)=="l")
css+="left:-"+bw+"px;";
else {
css +="right:-"+(bw)+"px; "; // odd width gives wrong margin?
ml=r;
right_fix = 1;
}

//h+="<div style='"+css+"; position: absolute; overflow:hidden;
width:"+ r +"px; height: " + r + "px;'>";
h+="<span style='"+css+"; position: absolute; display:block;
overflow:hidden; width:"+ r +"px; height: " + r + "px;'>";
h+= "<v:group style='width:1000px;height:
1000px;position:absolute;' coordsize='1000,1000' >";
h+= vmlCurve(r*3,r+bw,bg, -r/2,ml,mt,right_fix);
if (bw>0) h+= vmlCurve(r*2-bw,bw,bc, Math.floor(bw/
2+0.5),ml,mt,right_fix);
h+="</v:group>";
h+= "</span>";
//h+= "</div>";
});
h += "</span>";
//h += "</div>";
return h;
};

var settings = {
corners: "tl tr bl br"
, radius: 10
, borderWidth: 0
, background: "white"
, fixIE: true
};
$.extend(settings, options || {});

var incrementProperty = function(elem, prop, x) {
var y = parseInt(elem.css(prop)) || 0 ;
elem.css(prop, x+y);
}

return this.each(function() {
var
$E = $(this)
, r = settings.radius*1.0
, bw = (settings.borderWidth || parseInt($E.css
("borderTopWidth")) || 0)*1.0
, bg = settings.background
, bc = settings.borderColor || ( bw > 0 ? $E.css
("borderTopColor") : bg)
, cs = settings.corners
;

if (this.style.position != "absolute")
this.style.position = "relative";

if(!$.browser.msie)
$E.append(canvasCorners(cs,r,bw,bc,bg));
else {
// IE requires innerHTML rather than jQuery.append
this.style.zoom = 1; // give it a layout in IE
var w = $(this).width(); // if element is 'hidden', then has no
width in IE
if (w==0) return true; // SKIP - no width - avoid error
this.innerHTML += vmlCorners(cs,r,bw,bc,bg,w);
if (settings.fixIE) {
if ($E.outerWidth() %2 == 1) {
incrementProperty($E, "padding-right", 1);
incrementProperty($E, "margin-right", 1);
}
if ($E.outerHeight() %2 == 1) {
incrementProperty($E, "padding-bottom", 1);
incrementProperty($E, "margin-bottom", 1);
}
}
}

});

}

})(jQuery);