LearnNowOnline

Blog

Soften Your Look with jQuery

By Don Kiely | October 26, 2012

As mentioned in a previous blog post, Microsoft made two commitments when it decided to embrace jQuery as its one and only client-side JavaScript library. First, they were going to replace their Ajax Library with jQuery in every appropriate ASP.NET Web technology, including both Web Forms and MVC applications. Second, they would contribute plugins and other extensions to the jQuery Library, primarily by adapting their work on enhancements for the Ajax Library to the jQuery Library. These contributions might end up in the core jQuery Library, as official jQuery extensions, or, as a last resort, freely distributed, open source extensions.

In this article, we'll discuss one such extension.

Creating Rounded Corners

Putting rounded corners on elements is a desirable feature to soften the look of a Web page. But it is surprisingly hard to do well across all browsers, both because there are so many ways to accomplish the effect and so many variations among browsers. Web designers have long resorted to using images, even though CSS and other Web technologies support rounded corners. ACT has a nice RoundedCorners extender that applies the effect to HTML elements, letting you vary the appearance by changing the radius of the corner, which corners are rounded, and other options, giving a lot of flexibility for creating a nice page appearance. The Figure below shows the RoundedCorners extender demo from the ACT sample pages, with options set to round the upper right and lower left corners of the image.

Rounded corners seems to have been an area of particular creativity for jQuery plugin developers, probably because of the cross-browser issues and the lack of a single right way to achieve the effect. The result is a lot of plugins that let you get as creative as you want. We chose one of the simpler plugins to use on the Toolkit page, shown in the Figure below. The first box is a plain, square div element and the second has rounded bottom left and upper right corners using the Cornerz plugin for "bullet proof corners." The plugin has a few options such as to set the border and background color, set the radius, and select which corners to round. But overall it is a pretty simple plugin that does its job quite well.

The page uses the following HTML code for the Rounded Corners section. It is very simple markup, using a couple of div elements that each contain a p and cite elements.

<h3>Rounded Corners</h3>

<div id="divNormal" class="twain">

<p>It is better to keep your mouth closed and let

people think you are a fool than to open it and remove all

doubt.</p>

<cite>Mark Twain </cite>

</div>

<br />

<div id="divRounded" class="twain">

<p>It is better to keep your mouth closed and let

people think you are a fool than to open it and remove all

doubt.</p>

<cite>Mark Twain </cite>

</div>

The page uses a twain class to style the div elements, setting padding and the background color. Padding is important for most rounded corner plugins, providing room around the text to round the corner. You could have a border of a different color-as is commented out in the style below-and the border would be rounded as well.

.twain

{

/* border: 2px solid Blue; */

padding: 5px;

background-color: Silver;

width: 500px;

}

Then the page includes a single JavaScript statement to round the corners, shown in the following code. It calls the cornerz method, passing two optional arguments. fixIE attempts to overcome a problem with some inline elements in Internet Explorer due to a wrong reporting of width, and the second specifies that only the top right (tr) and bottom left (bl) corners should be rounded.

$('#divRounded').cornerz({

fixIE: true,

corners: "tr bl" })