How-To create Rounded Corners using RICO Library!!!

How-To create Rounded Corners using RICO Library!!!

In my previous two posts I have covered some tutorials using Script.aculo.us to enhance the User Experience. But, Script.aculo.us doesnt have the beauty of adding Rounded Corners, which RICO is rich in!!!!

1. Making a simple SlideShow using Script.aculo.us
2. How to Use Script.aculo.us Effects to add beauty

In this tutorial, we will explore yet another AJAX library. RICO Library

RICO is a powerful, creative ajax library which gives you control over UI designing as well as functionality.

In this tutorial, we will see how to create Rounded Edge Corners.
I assume these steps are already done before you see the naked code.

1. You have downloaded RICO library. If not, you can do it here
2. You have downloaded the Prototype Library. If not, you can do it here
3. Enable javascript in your system.

OKay, so lets see the code:

Include all the files{Rico & Prototype} inside the html code.

<head>
<script type=”text/javascript” src=”../src/rico.js” mce_src=”../src/rico.js”>  {SRC should be ur rico.js path}
<script type=”text/javascript” src=”../src/prototype.js” mce_src=”../src/prototype.js”>  {SRC should be ur prototype.js path}
</head>

so once, we are done with including the libraries to your html file.

Now, time to add some content to the Body of the html file.

<body>
<div id=”roundMe” style=”position:absolute;top:240px;left:35px;width:250px;background:’lightblue’;color:’red’;”>
<div id=”Content” style=”height:200px;width:250px;padding:8px;”>

Hello This is me, a Rounded Corner hell.

</div>
</div>
</body>

Understanding this particular code is very important, from the compatibility point of view. Coz if you skip some of the style parameters, this code wont work properly in IE.

U know IE sucks!!! {Keep an eye on Padding, it stinks in IE}

Okay, so no big deal here in code. Just two DIV tags and inside the child DIV the content is placed.

Simple, Isnt it? kooool. Lets go and add a simple line and see the magic.

Now, that we have decided the structure and included the libraries, what are we waiting for? Oh, yeah we still need to call the functions of RICO.

<script type=”text/javascript”>
Rico.Corner.round(’roundMe’);  // The parameter is the id of the outer DIV tag
</script>

What else? Not much. Just save it and see the magic.

If you still want to keep on hacking other options, you are always welcome!!!

Just add these parameters to the same line.

Rico.Corner.round(’roundMe’,{color:’transparent’,compact:true,blend:true;});

What all other options one can add to Corners?

1. Color
2. Blend
3. Compact
4. Color
5. BgColor
6. Specify which corners to be rounded
7. border.

For more information. Visit Demos @officially site of RICO.

Yes, some folks out there can argue that we can do it with CSS also. I agree with you. But can you do it in just one line of code?

Sorry dude!!!

Anyways I have attached a simple code for the same at the bottom if you can want. Take it, use it, try it and please let me know as well, if I missed any.

Cheerz
Sridhar

Download COde: ROunded Corner Using RICO Library

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

mybook

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Advertisements

About srinix

I am Sridhar, a matured nut, on this planet with water, air and love ;)

3 responses to “How-To create Rounded Corners using RICO Library!!!”

  1. jbschwi says :

    Rico Rounded Corners

    function init()
    {
    Rico.Corner.round('roundedCorner', {corners:'all'});
    }

    #roundedCorner{
    position:absolute;
    top:10px;
    left:35px;
    width:250px;
    background:#a4a4a5;
    }
    #roundedContent{
    height:100px;
    width:250px;
    padding:5px;
    }

    This is a sample of a div with rounded corners. The size is specified in an inner div. IE also requires
    the width to be specified in the outer div.

  2. timmy says :

    When i tried it , it didn’t work. But second time it did!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: