You can also download the latest stable version of CurvyCorners from the downloads section.
Some earlier versions are also available from the Google Code Downloads page.
As from 2.0.x, CurvyCorners allows you to put rounded corners on your page elements using CSS. At present, there are two proprietary CSS syntaxes, one for Mozilla/Firefox and one for Safari and the older WebKit browsers. Opera 10.5 and Chrome now support the standard CSS3 syntax.
All you need to do is to put the appropriate rounded corner styles into the appropriate rules, and CurvyCorners will automatically draw corners for the affected boxes, whilst leaving it to the newer browsers to draw them using their native methods.
Suppose that you have a DIV in your page with class rounded. You want all four corners rounded, with a radius of 3 ex. The following CSS will accomplish this:
If you want (say) only the top left and bottom right corners rounded, then you can do it like this:
(Note that the CSS3 syntax, listed first, is similar to the WebKit version, but of course without the "-webkit-" prefix. On start-up, curvyCorners looks for the Mozilla syntax and ignores the Webkit version. This is because support for the CSS3 syntax (in Chrome and Opera 10.5) is only recent, the "-webkit-" syntax is laborious and obsolescent, and the Mozilla syntax is likely to be needed for some time yet. In a later version, curvyCorners will look for the CSS3 standard syntax.)
Because of the need for the mechanism to operate across all browsers, the CSS selector syntax supported is necessarily limited. This sets out what is supported:
#myID, or a tag-class-selector.div);.myClass); ordiv.myClass).The following are examples of supported selectors:
Warning: because CurvyCorners appends extra DIVs to the boxes you wish to round, the following selector will reliably not work:
#myBox div
This is because the style will be applied not just to the top-level DIVs
within the element whose ID is myBox, but also to the DIVs inserted
by CurvyCorners.
The following unsupported selectors may not work as expected:
Because an ID identifies a page element uniquely, qualifying it with an enclosing scope may cause the selector to fail (e.g. if #mybox is a top-level DIV, or if it is not located within a DIV of class rounded). However, CurvyCorners assumes that the element is to be referenced anyway and will apply the appropriate rounding styles. To put it another way, if there is an ID of the form #id anywhere in a selector, then CurvyCorners ignores everything to the left.
CurvyCorners does not support sibling ('+'), child ('>') or attribute ([]) selectors.
CurvyCorners now has limited support for dynamic HTML. In particular, you may change the contents of a box and have the box re-sized (re-drawn) to fit. However, because of the technique CurvyCorners uses to draw the corners, this cannot happen automatically. Instead, you must do the following:
curvyRedraw; andcurvyCorners.redraw().curvyCorners.redraw() takes no parameters and returns no
usable value.
If you need to change some attributes or styling of the redrawable elements,
this should not be done directly through the
DOM.
Instead, having identified the
DOM object (e.g. with document.getElementById()), call
curvyCorners.adjust(DOMObj, propertyName, newValue);
where:
curvyRedraw that needs to be changed;'style.property'.'none'.curvyCorners.adjust() must take all three parameters described
above. It returns no useful value.
An extensive example of this technique is contained in demo 5.
To change the child elements of a resizable cornered box, you should
not attempt to do this by using the innerHTML "property" of
the rounded box itself (not even using curvyCorners.adjust()).
Instead, nest an inner div inside the cornered box, and apply the changes
directly to that inner div before calling curvyCorners.adjust().
For example:
<div class="curvy curvyRedraw"><-- the rounded DIV -->
<div id="nested1"><!-- the nested DIV -->
<p>Initial contents here</p>
</div>
</div>
<script type="text/javascript"><[CDATA[
// ...
// new box contents in HTML string str
document.getElementById('nested1').innerHTML = str;
curvyCorners.redraw();
// ...
//]]></script>
(Of course, it is likely to be more efficient to use the DOM to add or change child elements, but the above illustration uses innerHTML for the sake of simplicity.)
curvyCorners supports redrawing curved boxes in response to a change
in the browser window size. If you wish to take advantage of this,
you can add an event handler to trigger a redraw. However, some
DOM changes will fire spurious window resize events in some browsers.
These can happen in the midst of DOM changes (including those that
curvyCorners itself makes whilst redrawing). Therefore, do not
make your handler call curvyCorners.redraw() directly.
Instead, set your resize handler function to call
curvyCorners.handleWinResize().
Next, if you find that some of your code is triggering window resize events (which will cause a noticeable delay!), surround the code with:
curvyCorners.setWinResize(false); // block redraw on resize
// ... your DOM-manipulating code here
curvyCorners.setWinResize(true); // re-enable redraws on window resize
An example of this technique is contained in demo 5.
If it is planned to add a number of elements to the page after it has loaded, and if these elements are to have rounded corners, it can be advantageous to delay the running of the startup code. This can be done as follows:
<script type="text/javascript">
var curvyCornersNoAutoScan = true;
</script>
curvyCorners.init();
If you specify in CSS the ID of an element with rounded corners that is not yet added to the page, CurvyCorners will warn of the problem by using alert(). See below under options and settings for how to suppress this message.
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
If you use ASP.Net Validator Controls with the Display Property set to Dynamic within a rounded box, client-side error messages within an element using curvycorners will not display correctly, as the containing element needs to be redrawn to accommodate the message. It is necessary to hook the client side validation by overloading the validation to callcurvyCorners.Redraw whenever client side error messages are shown by these controls. This can be done by including something like the following after the validator markup (e.g. at the end of the aspx file):
<script type="text/javascript">
ValidatorUpdateIsValid = function() {
if (!AllValidatorsValid(Page_Validators)) curvyCorners.redraw();
}
</script>
Similar action should be taken where an ASP.Net UpdatePanel resides within a box rounded by curvyCorners, to ensure that the element (and thus the corners) are redrawn after the partial postback.
CurvyCorners supports the styling of boxes that are not currently
displayed, i.e. which have the style display:none. In such cases,
it may be necessary for CurvyCorners temporarily to display the box, and
this may cause a brief flicker as the page is loaded.
Instead of targeting your styles more precisely, it may be
convenient to force curvyCorners to skip certain elements in the page.
This can be done by giving them the special curvyIgnore
class. Once curvyCorners has added rounded corners to a box,
it automatically adds the curvyIgnore class to that box.
<link href="mystyle.css" rel="stylesheet"/>
element, or using an @import rule, old versions of Opera won't be able to access it.
It has access only if the style is included in the HTML page itself.
Also, old versions of Opera still parse -webkit- style declarations
(whereas IE now uses the -moz- declarations).
solid: other styles are not supported.border-radius:1em/2em;) are not
supported. The first dimension will be understood as the only dimension.document.body.onload function
will not work. Instead, it is necessary to delay curvyCorners
startup as described above.The following instructions will round the corners of a DIV element with a 20 pixel radius.
Once you have downloaded the file, copy it to your site. Then copy the code below and paste it into the head section of your web page. If you saved the file anywhere other than the root of the site, amend the src location below.
Next create a DIV element. If you already have a DIV whose corners you want to round then all you need to do is give the DIV an ID.
CurvyCorners will automatically pick up style information from the DIV element. So for example if you give the DIV a 2px black border in a stylesheet, then the borders will be automatically added to the rounded corners.
Next we need to add some JavaScript to load when the web page loads. In the HEAD section of your webpage add the following:
That's it, run your script to give it a try.
I don't have the time to write a full API so this part will try and go into as much detail as possible.
The first part of the previous example creates a variable called settings; you can change this to any variable name you want. You will need to use this variable later on in the script. This variable holds all the settings needed for the curvyCorners object to work.
Each line of the settings object is a particular setting:
for example the first line tl: { radius: 20 }, tells the script
that you want the top right corner of your box to have a 20 pixel corner radius.
The next three lines set the radii for the other three corners. So for example if you wanted the corner radii to be 20, 40, 60 and 80 from top left to bottom right, your settings object would look something like the example below.
(Note that if you are using borders or a background image, you should be mindful of the limitations documented above.)
What about square corners? Say you did not want the top right and bottom left corners to be rounded at all and remain square: in this case, either specify a zero radius, or omit the corner specification entirely. See example below.
Changing the value of antiAlias from true to
false will toggle the anti-aliasing. Turning off anti-aliasing will
reduce the smoothness of the corners but will greatly reduce the rendering time
required to draw the corners.
The are two different ways of specifying which DIVs (or other HTML boxes) you want the script to round. The first method is to pass one or more objects when creating a new instance of the curvyCorners object.
Let's break the code above down. The first line uses the
DOM's
document.getElementById() method to return an object reference to
myDiv called divObj. Change myDiv to
the ID of the DIV element that you want to round.
The next line calls the curvyCorners function. The first param is the settings object we created earlier. The second param must be an object reference to the DIV you want to round. We retrieved this on the first line of the above code sample.
Note: You can pass more than one object when calling the curvyCorners function. To supply additional objects just follow the API info below. Each additional object passed will have the same corner settings applied, as supplied in the first parameter. If you need additional DIVs rounded with different settings, then you will need to call the curvyCorners function once for each different setting, followed by the objects to which you wish to apply those settings.
The other way to specify which boxes you want to apply rounded corners to, is to supply a CSS selector string as the second parameter insted of the DOM object as described above. Any block elements that have that class applied will have their corners rounded. See example below.
(Note that unlike older versions of CurvyCorners, from version 2.0.x you must put a dot in front of the class name.)
Instead of a simple class name, you can use a tag name qualified by a
class name, e.g. div.myClassName — this will affect DIV
elements but not other elements with myClassName as their class.
You can also use an ID prefixed with a hash, like this: #myDiv
Finally, you can restrict the range of elements by separating two simple
selectors with a space, e.g. #myDiv div.rounded. This will apply
rounded corners only to those DIVs with class name rounded that
are contained within the DIV with ID myDiv.
For further details on CSS selectors, see CSS Selector Limitations above.
If you have pages that work with CurvyCorners v1.x, and would like to upgrade them to work with v2.0.x, you have two routes: retain the explicit style, or migrate to the CSS style.
The changes are these:
true in 2.x).false.applyCornersToAll() function is now deprecated and will
be removed in a future release. It is no longer necessary to create a
curvyCorners object: simply call the curvyCorners function as before.The following example shows the changes you should make.
Things that you should delete are shown like this;
things you should insert are shown like this.
To use the new CSS style, first place appropriate CSS directives in the <style> element of the <head> section of your page. To replicate the example immediately above, do this:
Then, entirely delete the window.onload function (or that
part of it relating to CurvyCorners).
If CurvyCorners detects an error that prevents onward execution, it throws an object of type Error.
If CurvyCorners detects an error that does not prevent onward execution, it issues an alert. To suppress alerts in production pages, include the following script in the <head> section of your page before the script tag that includes the CurvyCorners script:
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
To delay or prevent execution of the CurvyCorners startup code, set
curvyCornersNoAutoScan true in the same way: see
the explanation above.
If you need more information then just checkout the script's source, it's well commented.
If you find a bug in CurvyCorners, please use the issue tracking system at Google Code. Please check first that the bug has not already been fixed in the latest version. When providing sample pages for us to investigate, please use the uncompressed version of the script, curvycorners.src.js. (It is not possible to debug using the script in its compressed form.)
If you have any questions, comments or ideas, then please use the forum by clicking the forum tab above.
Have fun!