Aug 10 2006

Rounded Corners With Rico

I’ve seen and tried a ton of HTML/CSS/JavaScript tricks and hacks to get rounded corners on DIV elements. So far I have found that the easiest way to get rounded corners on divs is by using the Rico JavaScript framework. To demonstrate this in code let me define a snippet of HTML:

<DIV id="mydiv" style="background-color: #FFE6BF">
  some text
</DIV>

To make the DIV element have rounded corners just execute the following bit of JavaScript, perhaps in the document.onload event method:

Rico.Corner.round('mydiv');

You can also pass in some additional options to Rico’s round function which indicates which corner(s) to round. Here is another example which rounds only the top-right and bottom-left corners:

Rico.Corner.round('mydiv', {corners:'tr bl'});

And of course, br and tl also work.

As a convenience, you can round the corners of multiple elements at once. To round all DIV elements that use a given class use the following JavaScript:

new Rico.Effect.Round('div', 'roundCssClass');

With the above JavaScript, only those DIV element that use the CSS class roundCssClass will be rounded off.


Sep 24 2005

Hide Your HTML Source

Sometimes you might not want to allow guests to your website to view the HTML source code. You can disable the right click context menu by using the following bit of code in your page:

<body oncontextmenu='return false;'>

You can use this feature to prevent users from right clicking and saving an image from your site. This is support by IE and Firefox. I have seen sites use similar functionality to this to pop up an alert with a copyright message is a user tries to right click on an image.

Keep in mind that a user can always disable JavaScript altogether, view the source from the application menu, and/or even save the whole HTML file onto his/her desktop and view the source from Notepad.