JQuery Curvy Corners 2 Early Beta Available
I have uploaded a beta of JQCC2, based on the beta version 2.0 of the official script. This now includes support for jQuery 1.3.
There are still many optimisations to make and tests to perform, but the examples included in the zip work in IE6, IE7, Chrome, Safari, Firefox, and (excluding the CSS selector feature) Opera. My version does differ from the official script; mainly the fact that boxes are not fixed width/height.
If you find bugs, want to contribute fixes, or want to help extend the plugin please leave your comments.
Finally, special thanks to Terry Riegel, Cameron Cooke and Tim Hutchison who made the original CurvyCorners script; they did all the hard work!
Update: Beta 2 uploaded
Download: JQuery Curvy Corners 2 (2607)
Found this post useful? Why not buy me a coffee!










ndee says:
Hi Mike,
thank you for your continuing effort to make this plugin becoming better and better. You wrote above “JQuery 3.x”, do you mean 1.3.x? If yes, does the latest stable version not work with 1.3.x?
Greets,
ndee
Comment made on March 21, 2009 at 11:12 am
Mike Jolley says:
@ndee: Whoops, thanks. This version works with 1.3, the the older one does not.
Comment made on March 21, 2009 at 11:29 am
ndee says:
Hi again,
I have troubles with this version. Using jQuery 1.3.2 in noConflict() mode. I get the following error “settings[cc].is.undefined” on line 341 (curvycorners.source.js) where it says
}).height(settings[cc].radius + "px").width(settings[cc].radius + "px");Old version 1 with jQuery 1.2.6 works on the same site.
If I replace every call of settings[cc].radius with a fixed size e.g. “8″ the curvy corners work with beta too. I do not know how to fix but it seems that the array is somehow out of scope when it is called.
Thanks!
Comment made on March 21, 2009 at 1:18 pm
ndee says:
@ndee: sorry my error, seems that the minification service i used produced the error. Works perfectly thanks.
Comment made on March 21, 2009 at 7:00 pm
VN Webdesign says:
I’m using jQuery 1.3.2 in noConflict() mode. I got the following problem with this version:
I did for primary-nav div with navigation structure like this:
Item 1
Item 2
Item 3
The background of primary-nav div is image background.
The problem is all css inside primary-nav div be changed, and the background doesn’t appear in IE.
Thanks!
Comment made on March 22, 2009 at 7:16 pm
Krist says:
i seem to have found a curvy corner bug in google chrome.
it’s the second time i used cc on a project but this is the first time this happened.
if you look here, the rounded corners are colored red even when it isn’t specified in the css: http://hellowala.org/fss/cc/index_bug.html
the fix i found was to apply an inline style to the cornered div to enforce the background color directive:
http://hellowala.org/fss/cc/index.html
the bug seems to disappear at random. like if I click on the link on the page, when I return back, the red color is gone. but the first time I load the page in chrome it’s sure to be there.
Comment made on March 23, 2009 at 8:12 am
Kai Sellgren says:
Thanks for creating a fantastic script!
Comment made on March 31, 2009 at 1:26 pm
JJ says:
The rounded element has its ID replaced with ‘ccoriginaldiv’ which breaks all styles that used the original ID as the selector.
Also, the autoPadDiv needs to have overflow: hidden applied to it to properly wrap all floated content.
Thanks for the work.
Comment made on April 2, 2009 at 5:42 pm
Chuck says:
The script throws errors in IE8 using jquery1.3.2.
jquery1.3.2 line 1065 Invalid agrument
elem[ name ] = value;After a little debug session I determined your beta script tries to set the css value of paddingTop equal to “–7px” which is invalid.
Comment made on April 10, 2009 at 7:51 pm
Chuck says:
The previous post should have shown 2 minus signs
–7px
Comment made on April 10, 2009 at 7:53 pm
Chuck says:
--7pxSorry for the duplicate posts…form post does not like the 2 minus signs in a row
Comment made on April 10, 2009 at 7:54 pm
Mike Jolley says:
Thanks for the reports and fixes. Ill get to it when I have time :s
Comment made on April 10, 2009 at 8:13 pm
Chuck says:
The w3c spec states that all padding values must be non-negative, therefore all padding values should be set after a call to
Math.abs()…otherwise IE8 fails in standard mode.http://www.w3schools.com/css/pr_padding-top.aspComment made on April 11, 2009 at 3:46 pm
Chuck says:
I have patched the beta and can send the changes. Shoot me an email.
Comment made on April 11, 2009 at 3:58 pm
Chuck says:
There is also a layout issue when applied to a ul that has a repeating background image (the issue may apply to other containers as well)
The ul in question has this css
margin: 0;padding: 0;
list-style-type: none;
text-align:center;
border-top: 1px solid;
border-bottom: 2px solid;
background-image: url('/templates/millstone1.0/images/dingbat1.gif');
background-repeat: repeat;
When cc is applied to the ul the top right and bottom right corners are inset by 2 pixels from the right border of the ul.
I’ll see if I can determine the bug
Comment made on April 11, 2009 at 5:53 pm
Chuck says:
The above layout issue is due to the different border style for top and bottom. If I remove
border-top: 1px solid;border-bottom: 2px solid;
and use
border: 1px solid;the problem does not occur.
Comment made on April 11, 2009 at 6:25 pm
Rodrigo Barba says:
I tried to ‘packer’ the script but not work… work only minified…
Comment made on April 16, 2009 at 9:42 pm
Eric Peters says:
Would you mind uploading the project to github? I’d love to be able to fork/make some modifications and be able to send you a pull request?
Might make for an easier method of keeping it updated letting the community chime in
Regards,
Eric
Comment made on May 30, 2009 at 7:34 pm
Mike Jolley says:
@Eric Peters: I did not upload to github because I’m not familiar with it (command line stuff is over my head) – but I’m in the process of uploading to google code
Comment made on June 2, 2009 at 1:09 pm
Cynthia G says:
If you experience the issue with Chrome displaying red areas, try moving the .css calls above the curvycorner .js in the head of the page.
Comment made on October 28, 2009 at 10:29 pm
B. says:
The demos don’t work in IE8.
Comment made on January 4, 2010 at 4:41 pm
anagha says:
@Chuck:
Hi Chuck,
Thanks for your finding . I am also getting 2 minus signs in roundcorner java script . could you please let me know where and what the solution you applied?
I have jquery.curvycorners.source.js and service pack jquery.1.2.6.pack.js
Comment made on January 5, 2010 at 10:11 pm