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="/books/3/27/1/html/2//_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 > <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="/books/3/27/1/html/2/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
SelectorExample
Type
"div" "h3"

id

"div#box" "h3#main"

class

"div.box" "h3.box"

Descendent with id
"div#box h3" "h3#main div"

Descendent with class
"div.box h3" "h3.main div"

Grouping
"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
KeywordMeaning
                                  tl

Top-left corner
                                  tr

Top-right corner
                                  bl

Bottom-left corner
                                  br

Bottom-right corner
                                  top

Upper corners
                                  bottom

Lower corners
                                  left

Left corners
                                  right

Right corners
                                  all (default)

All the corners


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.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net