Rounded Corners With Javascript (jQuery)

5 June 2006 | Tutorials | 28 Comments

From the creator of "15 Days of jQuery" (me):

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();
	});

Technorati Tags: , , , , , ,

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Subscribe

Email Updates:
Email:
RSS Feed:

RSS information | Email Policy | RSS to Email by Aweber

28 Comments

  1. Dustin Diaz said on 5 Jun 2006 at 1:02 pm:

    Sweet! Good stuff Jack. I am most definitely comfortable with JavaScript doing this for me as only a very little percentage of my users are actually going to be seeing the fallback.

  2. Jack said on 5 Jun 2006 at 1:14 pm:

    Dustin,
    Great to see you back! How’s that for a quick turnaround…? I see your post yesterday and in 24 hours I’ve put a jQuery spin on it.

    For anyone reading this that hasn’t seen Dustin’s site, I suggest checking it out. Great stuff and very entertaining podcast (think web topics over a beer or two).

    As an aside, everyone look at that last bit of code I posted for an alternative to the $(document).ready function. In other words, if you want to kick off your javascript when the page loads, you can use the $(document).bind(’load’, function(){}); routine.

  3. Jack said on 5 Jun 2006 at 1:28 pm:

    And yes, I completely agree with the comment you make, Dustin, about a low percentage of folks having js turned off.

  4. Florian said on 5 Jun 2006 at 3:40 pm:

    I use similar code on 120 div (For pictures…) but its doesn’t apply at all !

    How can fix it ?

    $(document).ready or $(document).bind(’load’, function(){});
    same result…

  5. Jack said on 5 Jun 2006 at 3:51 pm:

    “Similar code” could mean “missing something really important that was in the original”.

    Do you have a link to the site? I’ll try to take a look if you can give me more info but so far you haven’t told me enough.

  6. Rizky said on 7 Jun 2006 at 6:53 pm:

    funny, on fist load the css and images didn’t show up at all. just like an unstyled document. but after i refresh the page, there it is, the rounded corners.

    is that a bug? or is it just me? thanks…

  7. Rizky said on 7 Jun 2006 at 6:54 pm:

    sorry. I was talking about the demo page :D

    cheers…

  8. Jack said on 7 Jun 2006 at 6:58 pm:

    It could have been the server. If you want to test, you could clear your cache and history and hit the page again.

  9. Antonio said on 9 Jun 2006 at 3:56 am:

    Very nice. I’m all for using images for this, as you can see in my site :)

    I’m gonna save this for the next version of my template. Thanks a lot!

  10. Jack said on 9 Jun 2006 at 10:31 am:

    @Antonio
    You’re welcome.

  11. Sorin Ionescu said on 15 Jun 2006 at 2:18 pm:

    I believe the plugin I made is a lot better. You can have any border and corner you want. And it’s a lot simpler to use.

    “Custom Borders Plugin”
    http://jquery.com/discuss/2006-June/

  12. Jack said on 15 Jun 2006 at 3:23 pm:

    Nice plugin. Thank you for sharing that link, Sorin.

  13. Fotis Evangelou said on 14 Jul 2006 at 10:30 pm:

    A bit off topic!

    The append/prepend code ability of JQuery has made think if it is possible to use it on specific tags (either beginning o rending) to “attach” specific code.

    For example, a lot of add-on scripts, like sIFR, require a tag to be copied right before the closing .

    Would it be possible to use JQuery to automatically prepend the ) and that tag only?

  14. Jack said on 14 Jul 2006 at 10:51 pm:

    Can you provide an example? I understand the basic concept of what you’re asking but I think you’ve left out some details I need to give you a complete answer.

  15. Fotis Evangelou said on 16 Jul 2006 at 8:03 am:

    Jack, what I would like to do is “auto” prepend a code snippet before the closing tag . The auto prepend code would exist in a seperate js file linked to the template.

    sIFR, Google Analytics and many other scripts need to have a code snippet applied as well before the closing tag in order to work. It is mainly a script tag like:

    What I want that for? I am preparing an extension for Joomla (which I hope to incorporate in your CMS as well when it comes out if it’s possible :) ) and would like the user to simply install the extension and have it run immediately without copy pasting any additional code in their joomla template. I like the keep-it-simple rule for such extensions and this is why I want to try JQuery.

    Using the Joomla API I can “make” the extension auto include all necessery links to files used, as well as the JQuery library and an external js file that would include the “auto prepend” code that I’m talking about.

    I hope you understand now what I want to do… Thanks man!

  16. Jack said on 16 Jul 2006 at 4:02 pm:

    The closing body tag???? That’s what I’m missing. You haven’t said which closing tag.

    I don’t think you can auto prepend to the body tag… but I’m just going off of one test I did weeks ago when the same thought ocurred to me.

  17. Fotis Evangelou said on 16 Jul 2006 at 7:43 pm:

    Yes, now I noticed that the commenting system ate up the tag. It is the tag. The closing body tag!

  18. Fotis Evangelou said on 16 Jul 2006 at 7:45 pm:

    It ate it up again!!!
    instead of I will use *.

    So the tag is */body*.

  19. Fotis Evangelou said on 16 Jul 2006 at 7:45 pm:

    Sorry, I see now that if the system detects an opening/closing html “arrow” it ommits it.

  20. Bryan said on 25 Oct 2006 at 12:52 pm:

    I’m loving these tutorials, they’re definitely helping me get a grip on jquery.

    I’m curious though… When i do view the source, none of the code that you have wrapped or appended, etc actually shows up in the body code? I also noticed this on the drop-shadows one…

    Also, and this may be a silly question… in the wrap function…

    I’m assuming jquery is smart enough to know where to properly place the candidate for wrapping within the “‘+”+…” so it sits in the middle of all the tags… am i correct?

    thanks again for the tutorials!

  21. Jack said on 25 Oct 2006 at 9:10 pm:

    It’s in corners.js. View the source and look before the closing head tag.

    And yes, it knows to nest within the tags correctly.

    Glad you enjoy the tutorials.

  22. Sly said on 4 Feb 2007 at 9:03 am:

    Don’t understand how this things can be applied in joomla.
    I have copied the jquery and jq-corner javascript files in template root, but i don’t know what is the next step to make modules appear as rounded…
    If someone can explain…
    Thanks.

  23. Jack said on 4 Feb 2007 at 12:59 pm:

    I’m not familiar with Joomla. So the best I can recommend is to find your header template, put a correctly formatted link to your jquery javascript file, and proceed as normal.

    You can use the Firefox Developer plugin to verify if your javascript file is being accessed correctly.

  24. Colin "Vindexus" Kierans said on 18 Apr 2007 at 10:39 am:

    Awesome stuff, I’m definitely going to be using this.

    Thanks!

  25. Henry Jin said on 25 Apr 2007 at 4:30 pm:

    Amazingly clean final codes. Thanks, Jack. I will implement into my project.

    BTW, for the jQuery plugin for rounded corners without images, I believe the author draws every rounded corner with many 1px-height divs line by line, whose width is defined by a math-function (sin, cos, sqrt). Just like a scientific x-y plotter.

  26. Nick Horne said on 28 Feb 2008 at 3:08 pm:

    OK, I do like this code and it is very simple and easy to use. However I am having problems trying to float elements within the roundbox div class and have tried and tried to get this to work. If anybody has any ideas or has also experienced this problem can you please offer me any advice. Have already tried the obvious.

  27. Antoine BERNIER said on 12 Apr 2008 at 9:33 pm:

    I’ve published a jquery plugin based on that technique: http://dev.pnumb.com/cornflex#jQuerycornflexplugin

    All you need is design your box into photoshop and load the plugin with your custom values on your elements.

    Refer to the wiki page for more details.

    Hope it helps

    Cheers,
    Antoine

  28. Newcastle said on 19 Jun 2008 at 4:34 am:

    This is cool but has anyone seen the sIFR version for rounded corners?

Leave a Reply

You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.