Hot!Ajax

Nifty Corners Cube are a solution to get rounded corners without images.

by:http://www.html.it/articoli/niftycube/index.html

dwonload:download/otherjs/NiftyCube.zip

Nifty Corners Cube are a solution to get rounded corners without images, and this third version is build by three main components:

• A javascript file, named "niftycornerscube.js"
• A CSS file, named "niftycorners.css"
• The javascript calls specific for the pages

Now we're now ready to look at the first example: it's a div with big rounded corners thanks to Nifty Corners. As I said before, the CSS file it's added automatically by javascript. In fact, the only reference to an external file in the example is the following:

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

<p>Regarding the third point, as is the javascript calls needed for the page, the code for the <a href="/download/otherjs/NiftyCube/nifty1.html">

example is the following:

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

In bold I've reported the part of the script that depends on the page, and that is the call for the function Nifty. This function is the core of the whole library, and receives two parameters that are the strength point of the script. Parameters have to be specified between quotes and separated by a comma. The first parameter is for the CSS selector that targets the elements to round, while the second parameter is for options for default cases could be omitted. Let's see them in depth.

Here you can find many parameters.

Example 1: a single div

The first example has been already presented. The code to round the div with id="box" is the following:

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

 < script   type="text/javascript">

 window.onload=function(){

Nifty("div#box","big");
 }

The first line is needed to link the nifty corners library, while the others are for the specific page. Background colors of the page and the div id="box" are detected automatically by the script. Another thing to note is that the padding of the div (20px on vertical sides in this case) is preserved.

The part reported in bold is the call to the Nifty function. For the sake of brevity, starting from the next example, I'll report just the calls for this function, but please keep in mind that these have to be incorportated in an embedded script tag or, even better, in an external js file.

Example 2: two divs

In the second example nifty corners were used to round two divs with one single call:

Nifty("div#content,div#nav");

In this case just the first parameter has been used, as is the CSS selector with grouping: the two id selector are separated by a comma. The second parameter hasn't been used, therefore nifty corners will be of medium size (5px) and with antialias by default.

Example 3: transparency

In the example three nifty corners were applied on a div with a gradient background. In such cases the use of inner transparency could be really useful, and will be obtained via the transparent option. Let's see the javascript call:

Nifty("div#box","transparent");

The transparency option is compatible with all others, and is used by default on elements with no background-color set.

Example 4: nifty tabs

The fourth example is one of the major request on nifty corners: a tabbed menu without images. The javascript call is the following:

Nifty("ul#nav a","small transparent top");

Links are rounded on the top side, with small and transparent inside corners. Inner transparency is essential for the rollover effect. In the case rollover with background-color is not needed, here's a small variant where each tab is smooth-rounded and has got a different color. The js call in this case is:

Nifty("ul#nav a","top");

There's a thing to highlight, as is the fact that in both examples the tabs are perfectly elastic, since they're em-dimensioned.

Example 5: nifty buttons

In thefifth example a mini-navigation, suitable for blogs and such, is obtained with nifty corners. The code is the following:

Nifty("ul.postnav a","transparent");

In this markup, a class for the buttons has been used, so it would be possible to get several sets of of link-buttons in the same page. On the nifty corners side, the descendant selector with a class has been therefore used.

Example 6: boxes

In the sixth example nifty corners are used to round six divs with fixed height and bold corners. Each of div has a different color, even the lower-right one which is white like the background of the page. Antialias is automatically done, and padding of the list-items, both vertical and horizontal, has been preserved. But in order to honour the fixed height specified via CSS, the fixed-height keyword has to be specified. Here's the only js call used:

Nifty("div#about li","tl bottom big fixed-height");

Example 7: nifty columns

With the seventh example we introduce one of the biggest new features of nifty corners: nifty columns. This feature allow to get a faux-column effect without background. The option that does the trick is same-height, and the elements must be specified within the first parameter. The call for the example is:

Nifty("div#content,div#nav","same-height");

The option same-height tells the script to detect the height of the elements targetted by the css selector and to assign them the same height, as is the maximum value detected, without the need for background-images.

Example 8,9 and 10: more nifty columns

The examples eight, nine and ten are built on the same markup, which is the following:

<ul id="split">

 <li id="one"> 
 
<h3>Title</h3>  

<div>Content</div></li> 

<li id="two"> 

<h3>Title</h3> 

<div>Content</div></li>  

<li id="three"> 

<h3>Title</h3>

<div>Content</div></li> 

 </ul>

The only things that vary are in fact CSS and the calls to nifty corners, which use nifty columns in the three cases. In the example height the javascript call is the following:

Nifty("ul#split li","same-height");

In example 9 two calls were used: one for the headings, and one, with the same-height options, for lower divs:

Nifty("ul#split h3","top");
 Nifty("ul#split div","bottom   same-height");

If you don't need rounded corners on the lower part, but you'd like to get anyway elements with the same height, as in the example 10, simply specify the none option:

Nifty("ul#split h3","top");

 Nifty("ul#split div","none   same-height");

Example 11 and 12: Nifty Corners Layout

We've arrived to two major examples of the article, as is Nifty Corners Layouts. In the example eleven and twelve nifty corners are used extensively for layout and page elements.

In example eleven, as in the previous examples, I left for ease of consultation the CSS and the script embedded in the page. The javascript section is the following:

window.onload=function(){
 Nifty("div#container");
 Nifty("div#content,div#nav","same-height   small");
 Nifty("div#header,div#footer","small");
 }

When the page has loaded, Nifty Corners are applied on container, small and with faux columns on content and sidebar for navigation, and just small on the footer. The effect o a white border around all the page is achieved with a padding on the container.

The example twelve represent a two-column layout, tabbed navigation and some elements (like dates and comments) common in blog design. In this case CSS and javascript are kept in external files, here is the regarding code in the head section:

<link media="screen" href="/NiftyLayout.css" type="text/css" rel="stylesheet" />

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

Apart from the CSS, two javascript files are linked in; one is the library for nifty corners, while the second one contain the specific call for the page:

window.onload=function(){
 Nifty("div#menu a","small   transparent top");
 Nifty("ul#intro   li","same-height");
 Nifty("div.date");
 Nifty("div#content,div#side","same-height");
 Nifty("div.comments   div");
 Nifty("div#footer");
 Nifty("div#container","bottom");
 }

The option same-height has been used in two cases: on the three boxes of introduction and between content and navigation. In this second case, rounded corners are not visible, since they're done with transparency inside because the content has not a background-color specified.

Example 13: NiftyLoad

We've finally arrived at the last example. One of the frequent reported question is in fact how to make coexist Nifty Corners with other script, given the fact only one assignation to window.onload is possible.

In the example 13 an alert message, attached to window.onload, is shown before nifty corners proceed. This is done thanks to the function NiftyLoad, that will preserve a previous window.onload function. The javascript section, embedded on the page this time, is the following:

NiftyLoad=function(){
 Nifty("div#box","big");
 }

In order to make nifty corners work together with other script, you just have to use NiftyLoad instead of window.onload. Obviously the function could go even in an external file, the only important thing is that the two script blocks for nifty corners, as is the library and the page-centric calls, are the last two script blocks of head section of the page. The NiftyLoad function can also be used when nifty corners are the only script of the page, as is in any of the previous examples we've seen.

< Prev		Next >