Web2Coder | Rico Rounded Corner | Make, Here, Division, These, Rounded, Use, Website, Web, Prototype, Ajax

You are here: Home

Rico Rounded Corner

Rico Rounded Corner

Print

E-mail

Written by Administrator
Friday, 29 December 2006
Tag it: Have you ever wanned to make a simple rounded corner without making all those breath taking CSS styles?! Here by Rico everything seems to be as simple as apple pie. In this tutorial you will learn how to make division rounded corners for your website. 1. First Step: knowing some simple points about prototype Prototype is a fully Ajax library that you can use on your website. Knowing how to use this Library offers developers a powerful hand on making dynamic website as well as using Ajax technology. Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the code base of choice for web application developers everywhere. Rico is an open source Java Script library for creating rich internet application. Rico provided full Ajax support, Drag and drop management and cinematic effects library! There are also more java script libraries that work with prototype such as script.aculo.us and jQuery that i will write couple of tutorials about each one of them in the near future. 2. Second Step: Downloading these two libraries In order to download Prototype click here for direct download or go to their website http://prototype.conio.net/ and for downloading Rico again click here for direct download or go to their website http://openrico.org 3. Third Step: Starting to build your rounded corner web page: Ok from now on im going to show you how easy you can use these two libraries to make your rounded corners boxes of your website. I made an example for this tutorial, you can download it here . rounded_corner_example.zip First of all you need to make an html file, simply you can edit this by notepad or any other editor. In the head of the html code you should include these two java scripts libraries.Please note that all these files should be located at the same folder! <html> <head> <title>Your Website Title</title> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="rico.js"></script> </head> ok now these two scripts are going to be used in our web page. we can call any functions of these two scripts. Since prototype make it easy to use Ajax technology you will find it very useful if you are really willing to know how to use Ajax in your web application. Now its time to make some divisions in our web page. Its important that you know that for each division that you want to make its corners rounded you need to call a function and each division needs to have a unique ID. Without that it wouldn't work at all. An Example of making a division: <div id="firstdiv" style="background-color: #B7E1FE;"> <br /> <br /> <br /> </div> <br /> <div id="seconddiv" style="background-color: #B7E1FE;"> <br /> <br /> <br /> </div> Here you see that im putting some breaks between these division. From my own experience if the division is empty and you define a style or class element of height for showing the exact height of it, this script wouldn't work. you can place any other things instead of breaks, i just put these to show how it works. Well, until now everything seems to be so simple, right?! yea, its really simple. Next step is to call our functions. Note that its the hard part of our work, if you make a mistake here it wouldn't work! By this script you can simply call the functions to make these divisions corners rounded.You should place this script at the bottom of html code where the body tag will be closed. <script type="text/javascript"> var roundCorners = Rico.Corner.round.bind(Rico.Corner); roundCorners('firstdiv',{corners:"top",color: "transparent"}); roundCorners(seconddiv',{color: "transparent"}); </script> </body> </html> As you see this is also simple but as i mentioned before you can only use each functions only for a specific division no iteration is allowed to occur here. Here the main difference that came into my consideration was the transparency element that i couldn't find in any other libraries it really helps to make a wonderful rounded corner because you use a background in the division and by using this color:"transparent" it would make the division corners rounded by this picture. this is the way that so many rounded corners button has been made as you can see in yahoo website or even amazon. Please Check this page to get to know all of its elements and how to use each one of them so easily in your web page. http://openrico.org/rico/demos.page?demo=rico_corner Please leave your comments below here so i can see if my tutorial is useful for you or not. Trackback(0) TrackBack URI for this entry Comments (2) Subscribe to this comment's feed Helpfull written by David, February 19, 2007 Thank you it was really helpfull can oyu raed tihs? written by hmrtk, April 12, 2007 Cna yuo raed tihs? fi yuo cna raed tihs, yuo hvae a sgtrane mnid too. I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg. The phaonmneal pweor of the hmuan mnid, aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it dseno't mtaetr in waht oerdr the ltteres in a wrod are, the olny iproamtnt tihng is taht the frsit and lsat ltteer be in the rghit pclae. The rset can be a taotl mses and you can sitll raed it whotuit a pboerlm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Azanmig huh? yaeh and I awlyas tghuhot slpeling was ipmorantt! Write comment Name Email Website Title Comment Write the displayed characters Copyright 2007. All Rights Reserved.
Last Updated ( Tuesday, 10 July 2007 )

Menu

Submit your News

Login

Latest News

Sections

Archive

[+]