Dave Methvin wrote a plugin for jQuery to easily round corners. Then Mike Alsup improved on the plugin by adding more effects. Mike’s solution for adding a rounded border is great but he doesn’t give good copy and paste code. I had to dig through the source on the page to figure out some usage. He also misses (or I cannot find) an important piece – some of us want to specify the dimensions of our rounded box with rounded borders. Before using this code, you need to make sure you have downloaded jQuery and jquery.corner.js and obviously include them on your page.
Here is a simple explanation and example with code:
div.rounded_box{ background-color: #ccdaff; color: #333; padding: 10px; border:0; margin: 0; zoom:1; } /* border with rounded corners */ div.rounded_border { background: #6666ff; padding: 8px; }
That is the CSS for the rounded box and rounded border to go around the box. The only attributes you should need to change are anything color related and the padding (pretty obvious what they do but you can mess with the values after you get this example working).
Now you have 2 options for your HTML/Javascript set up (note that I have namespaced my jQuery functions to $j instead of $). The first option is probably a bit faster while the second option avoids an extra wrapper div in your code, allowing you to specify the width inline. Here is the first option:
<div style="width: your width here;">
<div id="my_rounded_box_id1" class="rounded_box">
<p>Content</p>
</div>
</div>
<div style="width: your width here;">
<div id="my_rounded_box_id2" class="rounded_box">
<p>Content</p>
</div>
</div>$j(function(){ $j('div.rounded_box').wrap('<div class="rounded_border"></div>'); //apply border $j('div.rounded_box').corner("round 8px").parent().css('padding', '2px').corner("round 10px"); //round box and border });
Here is the second option:
<div id="my_rounded_box_id1" class="rounded_box" style="width: your width here;">
<p>Content</p>
</div>
<div id="my_rounded_box_id2" class="rounded_box" style="width: your width here;">
<p>Content</p>
</div>function roundDiv(id){ var tmp_width = $j('#'+id+'').css("width"); //get the width of target el $j('#'+id+'').css("width",""); //clear width value (or else corners screws up) $j('#'+id+'').wrap('<div class="rounded_border" style="width: ' +tmp_width+ ';"></div>'); //apply border $j('#'+id+'').corner("round 8px").parent().css('padding', '2px').corner("round 10px"); //round box and border } $j(function(){ //round each box separately so that we can specify inline dimensions roundDiv('my_rounded_box_id1'); roundDiv('my_rounded_box_id2'); });
Enjoy!
UPDATE: After some more testing, the second option seems to be more cross browser compatible. I highly recommend using that option.
If you enjoyed this post, make sure you subscribe to my RSS feed!
Simple Time Select for Ruby On Rails Just Got Simpler
I added a start_hour and end_hour feature to my simple time select. Here are the details from the README:
Simple time select also takes a start_hour and end_hour option to be specified in military format (between 0-23).
The start hour behaves as you would expect but the end_hour may not. If you specify the end_hour as 10, your time select will include 10:15, 10:30, 10:45. So the end_hour sets the last hour that the time select will include. Leave a comment if you want me to change this.
The code is hosted on github here: http://github.com/tamoyal/simple_time_select/tree/master
If you enjoyed this post, make sure you subscribe to my RSS feed!