Anti-aliased Rounded corners with JQuery
Recently I’ve been searching for a method of creating nice looking rounded corners with Javascript & JQuery.
First I found the “JQuery Corner” plugin for rounded corners, but was disappointed that it did not include smooth, anti-aliased corners.
I then did some more google-trawling and found this post, which contained a modified version of Curvy Corners for use with JQuery. Now this script was much much better.
However…the filesize was a massive 40kb, way too big for production use, and to make things worse the code was not compatible with packer so I could not reduce the filesize.
Well, I got busy, and fixed the errors. It is now fully packer friendly meaning easy rounded corners in JQuery at only 9kb 8kb 15kb 20kb 16kb 10kb. Excellent. Read more for the download link.
Demo and download
You can also grab the plugin from Google Code.
The packed version is only 10kb, the uncompressed version is 23kb (thats half the size of the original script!).
Quick example
To make a curvy cornered box simply use:
1 | $('.round_this').corner(); |
Thats all there is too it. A great script!
For more information on Curvy Corners, check out its official site.!
*Edit: Found a small error in IE7 with the backgroundPosition property, fixed now. New file uploaded.
*Edit 2 – 25th Sep 07: More optimizations, smaller file!
*Edit 3 – 29th Sep 07: More optimizations, smaller file, and demo page up!
*Edit 4 – 6th March 08: New version up with better background image support.
*Edit 5 – 19th May 08: No extra padding, safari fixed, larger filesize to reduce overhead and increase speed.
*Edit 6 – 9th Aug 08: General fixes from feedback
*Edit 7 – 7th Oct 08: Major overhaul to improve compatibility with other plugins
*Edit 8 – 2nd June 09: Now compatible with jquery 1.3.2 – All future updates will be on Google Code (http://code.google.com/p/jquerycurvycorners/) – Hence im closing comments here. Post your contributions either on google code or in the forum.
Found this post useful? Why not buy me a coffee!
Ryan says:
$($$ +" *").css("zoom","normal");I found commenting only this line out made it work in IE6/IE7 and Firefox. I haven’t tested anything else yet, but I’m feeling lucky.
Thanks Niels.
Comment made on January 30, 2009 at 10:38 pm
jeroen says:
Thanks Niels & Ryan for trying to solve the problem.
However, with the latest solution I´m seeing some very strange things in IE6: After loading of the page, counting down to 0 Items Remaining (loading photos etc.), it goes up again to hundreds of Items Remaining and the background in the corners of the rounded boxes is filled in pixel by pixel, taking about a minute for a few rounded boxes with background images.
I should say that I only have MultipleIEs to test IE6, but as far as I know, that´s a valid IE6 version.
Does anybody else notice this behaviour?
By the way, the end result looks good!
Comment made on January 31, 2009 at 12:08 am
Mike Jolley says:
Thanks for trying fixes; Ill may patch this version, however, I would much rather wait for the official CC script beforehand because its new version (2) is in beta and soon to be finished.
Comment made on January 31, 2009 at 1:59 pm
jeroen says:
@Mike Jolley: Thanks for a great plugin, looking forward to version 2!
Comment made on January 31, 2009 at 7:57 pm
Ryan says:
jeroen - I was having this issue too. I thought it was something else in the intense AJAX app I’m building though. We have a testing machine here with an actual version of IE6, and although I get the same issue as you in the standalone (MultipleIEs), the real version seems ok. Everything is very slow however, but we test on an old PIII 450mhz with 256mb of RAM, and everything is generally quite slow on that machine. Mike, thanks for the script. I may just not give IE6 rounded corners if it comes to that.
Comment made on February 2, 2009 at 9:28 pm
Aaron says:
I am having the same issues in IE using jQuery 1.31 and get an error.
I have commentted out the $($$ +” *”).css(“zoom”,”normal”); but was wondering if anyone had any luck or a new version is going to be released with a fix for the new jQuery code?
Great script!!!!
Cant wait to see an update fixing this problem!
Comment made on February 4, 2009 at 5:37 pm
jeroen says:
Ryan – Thanks for the confirmation, I think I´ll just stick with jquery 1.2.6 for the time being: The site requires IE6 support and doesn´t use much jquery / javascript functionality apart from the rounded corners.
Comment made on February 6, 2009 at 2:58 pm
manuel says:
guys, i download the example as it is, and it’s not working in IE6, please, ig some of you know what could it be, i will appreciate it
regards.
Comment made on February 7, 2009 at 9:25 am
Mike says:
IE7 support breaks with jquery 1.3.1. No huge deal to drop down to 1.2.6. for me though, just thought I’d let you know.
Comment made on February 11, 2009 at 11:15 pm
gremki says:
Regarding IE6 error: just change
$($$ +" *").css("zoom","normal");to
$("*", $$).css("zoom","normal");and should work just fine on jQuery 1.3
Comment made on February 16, 2009 at 11:15 am
Tom says:
Hi… I am having some trouble with jQuery 1.3 and this script in IE7… could you fix it?
Comment made on February 17, 2009 at 11:32 pm
Tom says:
@Tom:
The solution of gremki is the best, I think.
Comment made on February 17, 2009 at 11:40 pm
Zajda says:
Nice. But it doesnt work in Google Chrome when DIV has transparent PNG background. It makes DIVs top and bottom color red…
Comment made on February 23, 2009 at 11:31 pm
topherez says:
Same here… top and bottom of the cornered div is red in Safari. Auto-pad is also broken.
The div style that is being rendered-out appears like this:
overflow: hidden; height: 1px; width: 1px; position: absolute; font-size: 1px; background-color: rgb(255, 0, 0); opacity: 0.974937; top: 9px; left: 0px;
Comment made on February 24, 2009 at 7:50 pm
sven says:
It does not work on IE7 and latest(1.3) jQuery
Comment made on February 26, 2009 at 12:47 pm
wingrunr says:
I have fixed the Safari problem. There were a number of edits needed for the code to function properly. The problem lies in the fact that Safari does not return a transparent background as “transparent” but rather returns “rgba(0, 0, 0, 0)”. A filter for this needs to be added in format_color so the new if statement looks like this:
if(colour != "" && colour != "transparent" && colour != "rgba(0, 0, 0, 0)")Likewise in rgb2Array an improper substring was being extracted for rgba attributes so the code needs to be changed to this:
var rgbValues = null;if (rgbColour.substr(0, 4) == "rgba")
rgbValues = rgbColour.substring(5, rgbColour.indexOf(")"));
else
rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));
var rgbArray = rgbValues.split(", ");
return rgbArray;
That will render the corners correctly in Safari.
Comment made on March 1, 2009 at 6:47 am
wingrunr says:
By the way, for anyone that would like a minified/source fixed version including gremki’s fix for IE7, you can get them at these two URLs for now:
http://www.northpolesoftware.com/files/jquery.curvycorners.min.js
http://www.northpolesoftware.com/files/jquery.curvycorners.source.js
I’ll leave these up until Mike can grab them and mirror them again.
Comment made on March 1, 2009 at 7:11 am
Bruno says:
It isn’t working for me on both IE’s, any idea why? Thanks!
Comment made on March 2, 2009 at 7:48 pm
Bruno says:
So the problem is that this plugin doesn’t run on jquery latest version… can this be solved? last versions (1.3.2) is much faster. Maybe because the new CSS selector?
Comment made on March 3, 2009 at 11:31 am
Bruno says:
But this works:
——————
#
311 – gremki says: Reply to this comment
Gravatar
Regarding IE6 error: just change
$($$ +” *”).css(“zoom”,”normal”);
to
$(“*”, $$).css(“zoom”,”normal”);
and should work just fine on jQuery 1.3
Comment made on February 16, 2009 at 11:15 am
Comment made on March 3, 2009 at 11:40 am
David Resseguie says:
Bruno/gremki,
Thanks! Making the change suggested in #311 did, in fact, fix the problems I was having in IE 7 using the latest jQuery.
Added the info to the bug tracking system here:
http://plugins.jquery.com/node/5756
Much appreciated!
David
Comment made on March 3, 2009 at 9:58 pm
Niels says:
Another bug with IE7 (maybe 6 also).
At least one top or one bottom corner needs to be specified. If both top or both bottom corners are omitted (false in options), IE gives an error stating “invalid argument”.
Bug doesn’t occur in FF3 or Safari 3.
Comment made on March 11, 2009 at 3:56 pm
Niels says:
With regard to the bug in 330.
The error only occurs when a border is set on the DIV segment.
*does further investigation*
Comment made on March 11, 2009 at 4:27 pm
Niels says:
@Niels:
Ok, bug found and fixed.
On line 306: $(contentContainer).css({position:”relative”, ‘float’:”left”,width:”100%”, “margin-top”:”-” + (topMaxRadius-borderWidth) + “px”, “margin-bottom”:”-” + (botMaxRadius-borderWidth) + “px”}).addClass = “autoPadDiv”;
Change to:
$(contentContainer).css({position:”relative”, ‘float’:”left”,width:”100%”, “margin-top”:”-” + Math.abs(topMaxRadius-borderWidth) + “px”, “margin-bottom”:”-” + Math.abs(botMaxRadius-borderWidth) + “px”}).addClass = “autoPadDiv”;
Maybe not even a IE bug but a FF bug. I think the original line causes a double – (minus) sign when borderWidth > 0 and corner radius = 0 for both top or bottom corners.
Comment made on March 11, 2009 at 4:53 pm
Jakobud says:
@Niels:
That fix you posted in 332, not sure what that was supposed to fix (as I wasn’t getting that javascript error in IE) but when I apply it, it breaks the rounded corner functionality in Firefox.
I have another issue though:
In IE6/7, has anyone noticed the small pink background that shows through when you apply a border of any size to the rounded corner element?
Take a look at the following screenshot. These are simply just DIV elements with a white background that I have black borders applied to them. That pink only shows up when borders are present. Doesn’t seem to matter what size/width the borders are.
http://img3.imageshack.us/my.php?image=roundedcornerpink.jpg
Any thoughts?
Comment made on March 12, 2009 at 5:41 pm