Cynosure.X International LLC: Nifty Corners

Nifty Corners

This technology, when used on your web site, allows you to surround boxes with round corners. The following is an example.

This is a line of text.

The beauty of this technology is that it not only works with the latest browsers that support JavaScript, it is also backward compatible with non-JavaScript-supporting browsers. When a visitor has JavaScript disabled, the box remains with angular corners.

Comments & Discussion >>

How to implement it on your web site?

To use this technology on your web site is extremely easy. All you have to do is add the following lines into the <head></head> section of your web page. These lines have to be located in the "head" section and have to be on every web page that will use this technology.

<link rel="stylesheet" type="text/css"
      href="http://www.cynosurex.com/Software/NiftyCorners/niftyCorners.css">
<link rel="stylesheet" type="text/css" media="print"
      href="http://www.cynosurex.com/Software/NiftyCorners/niftyPrint.css">
<script type="text/javascript"
        src="http://www.cynosurex.com/Software/NiftyCorners/nifty.js">
</script>
<script type="text/javascript">
  window.onload = function ()
  {
    if (NiftyCheck ())
    {
      Rounded ("div#box", "#DFDFDF", "#ff0000");
    }
  }
</script>

Note the line above starting with "Rounded". You have to call the "Rounded" method for every box that you want the corners to be rounded. The first parameter "div#box" identifies that you want the <div id="box"></div> to be rounded. You can specify any name for the box. In this example, I simply used "box". You have to specify a different ID for each box to be rounded. So if you have multiple boxes on a web page, you'll need multiple lines of "Rounded". The second parameter is the color specification of your web page's background color. The third parameter is the background color specification of your box.

Next, add '<div id="identification" style="background:#000000"></div>' around every box that you want rounded. The 'identification' must match the identification you specified in the header. The background color should match the third parameter you specified in the Rounded function in the header. In the example on this web page, we use the following code:

<div id="box" style="background:#ff0000">
  <font color="ffff00">
    This is a line of text.
  </font>
</div>

That's it! You are done. That's all you have to do to use this technology. Simple, huh?

Comments & Discussion >>

Why are we providing this web service?

When we saw the Nifty Corners implementation by Alessandro Fulciniti on his web site, we thought it was very cool. The first thing we thought was that we'd like to use this on our web sites. We have several web sites with several hundred pages that could take advantage of this technology. But it would be a nightmare to maintain if we have to put the JavaScript and associated files on every directory for every web page that we want to use it on. It would be awesome if the JavaScript and the required resource could be located on a central server. We are strong believers of "reuse".

Then we thought, "Wouldn't it be cool if we can provide this technology as a web service for anyone who'd want to use it on their web sites without them having to install the software and the resources?" So, we decided to provide this service and donate our bandwidth.

Comments & Discussion >>

The Catch

So what is the catch of using this web service technology, versus downloading the technology from Alessandro Fulciniti's web site?

You don't have to mess with installation/modification/test of the JavaScripts and resources.
The technology is ready for use on any web page.
You'll have to live with whatever small/large changes we make to this technology in the future. See our Change Log.
We may eliminate this service in the future.
If our server ever goes away, you'll have to make changes to your web pages.

Comments & Discussion >>

Fun for Photographers