JRC

jquery-roundcorners-canvas (jrc)

A plugin for jQuery to make round corners using canvas.

For MSIE to support canvas it uses explorercanvas (http://code.google.com/p/explorercanvas/).

This plugin has been tested on ie6/ie7/firefox2/opera9/safari3

Notes

- The current version does not work with ie8

- JRC might not work in standalone versions of ie6

Demo

demo

Download

Download jquery-roundcorners-canvas:

http://plugins.jquery.com/node/99/release

Usage

Load jquery.corner.js:

<script type=”text/javascript” src=”jquery.corner.js”></script>

Some api examples:

Basic:

$(”#id”).corner();

Specify corner size:

$(”#id”).corner(”30px”);

Specify which corners to round:

$(”#id”).corner(”tl”); => top-left
$(”#id”).corner(”tl br”); => top-left & bottom-right
$(”#id”).corner(”top”); => top-left & top-right
$(”#id”).corner(”bottom”); => bottom-left & bottom-right

The background-color of the corners (in case you need to manualy set it):

$(”#id”).corner(’#ffffff 4px’);

Different corners:

$(”#id”).corner(”tl bl 20px”).corner(”tr 40px”);

Corner Effects:

$(”#id”).corner(”tl bevel 25px”).corner(”br notch 25px”);

Hover support

$(”#id”).corner(”10px Hover”);

#id a.jrcHover { … }

Removing corners:

$(”#id”).corner(”destroy”)

If you want to renden corners inside a hidden element use “hiddenParent”:

.corner(”10px hiddenParent”)

Callback function (gets called when all the selected elements are rounded)

$(”input”) .corner(”10px”,function(elm){

// elm is same as $(”input”)

})

MSIE6 Troubleshooting

Msie6 has some trouble with absolute positioning. There are 2 bugs in msie6 which you may encounter using JRC.

> bug1: One creates a “1px gap” (more info: http://www.pmob.co.uk/temp/onepxgap.htm)

> bug2: A other one which accures when the height or width is changed and the absolute positioned elements stay at their “old” position.

By default jrc already tries to fix bug1 by adding 1px if it has a pixel height or width that is an odd number. But if the height or width changes after the element is rounded the bug reappears.

I have tried to make solutions for both bugs, but different situations require different solutions. So i created a way to choose the fix you need.

You can add the name of the fix in the (string) argument. –> $(”#id”).corner(”NameOfFix”);

Fixes:

“ie6fixonload”

(bug1) will add 1px (if needed) when the onload event accures (usefull when the height changes after the element is rounded)

“ie6fixwidthint” “ie6fixheightint” “ie6fixbothint”

(bug1+bug2) does the same thing only at a interval of 0.1 second + changes the height and/or width to fix bug2.

“ie6fixexpr”

(bug1) Uses “Expression” to fix the 1px gap

Problems, bugs or suggestions?

Report a bug or Request support: http://plugins.jquery.com/project…

Other jQuery plugins to make round corners

without images (it uses divs to render/ same api!): http://methvin.com/jquery/jq-corner-demo.html