Recipe 3.17. Rounding Corners with JavaScript

Problem

You want to include rounded corners on elements without the hassle of introducing new markup or images manually.

Solution

Use Nifty Corners Cube code by Alessandro Fulciniti.

First down the components of the Nifty Corners Cube solution, which include one CSS and one JavaScript file, at http://www.html.it/articoli/niftycube/NiftyCube.zip.

Upload both the JavaScript and CSS files associated with the Nifty Corners Cube solution. Then link the JavaScript to the web page by using the src attribute in the script element:

<script type="text/javascript" src="/_assets/js/niftycube.js"></script>

You won't link directly to the CSS file because the JavaScript file does that. Also, make sure to reference the JavaScript correctly. In this example, the JavaScript is located in the js folder that is placed in the _assets folder.

Next modify the markup that will have rounded corners (see Figure 3-42) by giving it a unique value in the id attribute:

<div id="box">
<h2>Marquee selectus</h2>
<p>...<p>
</div>

Figure 3-42. Default rendering of the column

Next, make a separate JavaScript call to tell the browser which element gets the rounded corners and then define the size of the rounded corners (see Figure 3-43):

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
 window.onload=function(  ) {
  Nifty("div#box","big");
}
</script>

Figure 3-43. The rounded corners appear

Discussion

Since it's almost a completely worry-free method for creating rounded corners, the Nifty Corners Cube solution has been called more of a tool than a technique.

Different colors

Colors are detected automatically. The JavaScript automatically changes the colors to match the background color within the element as well as its parent element (usually the body of the web page). This means a developer only has to be worried with setting which element gets the curves and the size.

Different sizes

There are four keywords sizes written in to the Nifty Corners Cube JavaScript: none, small, normal (default), and big. Small is equal to the value of 2 pixels, normal is 5 pixels and big is 10 pixels.

For example, to adjust the corners so that they are small, the JavaScript call would look like:

<script type="text/javascript">
 window.onload=function(  ) {
  Nifty("div#box","small");
}
</script>

Different elements

Nifty Corners Cube accepts numerous selectors making it easier to dictate which elements should receive rounded corners; the selectors are listed in Table 3-1.

Table 3-1. Selectors understood by Nifty Corners Cube JavaScript

"div"
"h3"

id

"div#box"
"h3#main"

class

"div.box"
"h3.box"

"div#box h3"
"h3#main div"

"div.box h3"
"h3.main div"

"div, h3"
"div, h3.main div, p"

For example, to apply rounded corners to multiple elements, the JavaScript function may look like this:

<script type="text/javascript">
 window.onload=function(  ) {
  Nifty("div, h3.main div, p","small");
}
</script>

Specific corners

The Nifty Corners Cube also makes allowances for developers who may not want to apply rounded edges to all the corners. Table 3-2 lists the keywords that allow developers to single out which corner or corners to round.

Table 3-2. Keywords understood by Nifty Corners Cube JavaScript

tl

tr

bl

br

top

bottom

left

right

all (default)

For example, to apply rounded corners to just the top corners of multiple elements within a web page, the JavaScript function may look like the following:

<script type="text/javascript">
 window.onload=function(  ) {
  Nifty(

"div, h3.main div, p","small top"

);
}
</script>

See Also

For more information about Nifty Corners Cube at http://www.html.it/articoli/niftycube/index.html.