Rounded Corners With Javascript (jQuery)
5 June 2006 | Tutorials | 28 Comments
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: rounded corners, javascript, jQuery, DOM, CSS, Dustin Diaz, Schillmania
Subscribe
28 Comments
Leave a Reply
You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.
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.
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.
And yes, I completely agree with the comment you make, Dustin, about a low percentage of folks having js turned off.
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…
“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.
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…
sorry. I was talking about the demo page
cheers…
It could have been the server. If you want to test, you could clear your cache and history and hit the page again.
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!
@Antonio
You’re welcome.
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/
Nice plugin. Thank you for sharing that link, Sorin.
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?
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.
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!
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.
Yes, now I noticed that the commenting system ate up the tag. It is the tag. The closing body tag!
It ate it up again!!!
instead of I will use *.
So the tag is */body*.
Sorry, I see now that if the system detects an opening/closing html “arrow” it ommits it.
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!
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.
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.
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.
Awesome stuff, I’m definitely going to be using this.
Thanks!
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.
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.
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
This is cool but has anyone seen the sIFR version for rounded corners?