Yesterday at 5:15 PM, I was jones-ing for my quick email fix after being away from the computer for almost 48 hours so I fired up Thunderbird and instantly grabbed a few RSS feeds I subscribe to. (On the weekends I’m swamped with home renovation projects and all my free time is spent with friends and family… AWAY from the computer)

My new “buddy” Dustin Diaz (who included a reference to me and this site in his most recent audioblog) posted an edgy “take-it-or-leave-it” kind of post called “Enough With Rounded Corners”.

So I checked out this new resource for rounded corners and saw that the html would be perfect for an impromptu tutorial on jQuery – combining the wrap(), prepend(), and append() functions.

Here’s the html markup that we’re going to use as our starting point:

<div class="dialog">
 <div class="hd">
  <div class="c"></div>
  </div>
 <div class="bd">
  <div class="c">
<div class="s">
  <-- main content goes here -->
</div>
  </div>
  </div>
 <div class="ft">
  <div class="c"></div>
  </div>
</div>

So, how would we take this html, and use jQuery to clean up the code?

Well, first we need a “hook” – a unique html element, or an id, or a class name – to tell jQuery to target.

The solution I’m gunning for will remove all of the divs you see above. Therefore, I think a great “hook” would be a simple div with either a unique id or class name.

Let’s try this:

<div class="roundbox">
  <-- main content goes here -->
  </div>

Next step… we use jQuery to add in our html code:

$(document).ready(function(){ $("div.roundbox") .wrap('<div
        class="dialog">'+
        '<div class="bd">'+
        '<div class="c">'+
        '<div class="s">'+
        '</div>'+
        '</div>'+
        '</div>'+
        '</div>');
});

Where Are The Other Divs?

Look closely at the code above and you’ll see that all of the divs fit nicely inside of each other and also wrap nicely around the content that will go inside our rounded box we’ll soon create.

You should also notice that I’ve left out quite a bit of the markup from the original. That’s because the wrap() function in jQuery needs perfectly nested divs in order to work.

Specifically, I’ve left out these two parts:

<div class="hd"><div class="c"></div></div>

<div class="ft"><div class="c"></div></div>

Append and Prepend All At Once

If you notice, the parts that I left out go just inside, but at the beginning and at the end of the class=”dialog” div. This is a perfect opportunity to use append and prepend functions of jQuery and chain them together.

$('div.dialog').prepend('<div class="hd">'+
        '<div class="c"></div>'+
        '</div>')
.append('<div class="ft">'+
        '<div class="c"></div>'+
        '</div>');

Example And Code

I’ve put a Rounded Corners with jQuery example online for you to see. Be sure to view the source code because I want you to see how clean the html looks when all the javascript and CSS is packaged off into separate files.

The code comes from an article on Schillmania and that’s where I would recommend grabbing the zip file with the image slices that make the rounded corners so pretty.

Rounded Corners Without Images

There are many other ways to create rounded corners – some involving no images whatsoever.

On the jQuery site there’s a plugin for making rounded corners without images. It’s not for everyone (or every application) but worth checking out. Don’t ask me to break down the code because it’s pretty intense and chok full of trig functions that I am a little rusty on.

But look at how nice the code looks (using the plugin):

	$(document).bind("load", function(){
		$("#box1").corner();
	});

[tags]rounded corners, javascript, jQuery, DOM, CSS, Dustin Diaz, Schillmania[/tags]