jquery

Ever wanted to create nice rounded corners on your webpages without having to write lots of elaborate code?

Want to freshen up the look of your website by changing those clunky square content boxes into neat rounded boxes?

Then why not take a look at the easy to use jQuery plugin from the Malsup Site

Download the plugin and put it in a directory of your choosing on your website, then let the magic begin. I’ll take you through a few simple steps to get the plugin up and running, then you can let your creativity do the rest!

Firstly, download the plugin, and add the code to your page in order to load the plugin:

<script src=”js/jquery.corner.js” type=”text/javascript”></script>

Please note: you’ll need to use whatever path/filename you chose for the plugin – I put mine in a folder called js Once you have done this, we need to make the plugin run on our selected divs:

<script type=”text/javascript”>
$(document).ready(function(){
$(“#content”).corner();
$(“#rightmenu”).corner();
});
</script>

This code would round the corner of the divs with an ID of “content” and “rightmenu”

If you wish to round a large amount of divs that are using class instead of id, then you would use:

$(".classname").corner();

Note the “.” which is the prefix for a css class.

The limitations of this great plugin don’t end there, far from it – You can change the radius of corners, set only top corners, or bottom corners to be rounded, change them to bevels or other weird and wonderful things, just take a look at the examples and see for yourself.

Share

Related posts:

  1. Mozilla Firefox, without the mouse.