ansaurus

Question

jquery round corners

Answer 1

A:

1) Ensure jquery is loaded 2) Ensure corners lib is loaded 3) In the ready callback, use a selector to grab the div you want to effect and call the corners method

$(document).ready(function() {
 $("#idofdiv").corners();
});

Josh 2008-11-06 21:49:30

Answer 2

+9 A:

This thing does not work in Safari & Google Chrome.
You need to include jquery.js in your page. Don't forget to have a separate closing tag.

<script type="text/javascript" src="jquery.js"></script>
You need to include the jQuery Corner Plugin JavaScript file (jquery.corner.js) in your page as well.

<script type="text/javascript" src="jquery.corner.js"></script>
Somewhere in your page you should have the <div> you want to have corners:

<div id="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
Somewhere else in your page, preferably not before the div itself, issue the following JavaScript command. This will execute the inner function when the page is loaded and is ready to be manipulated.

<script type="text/javascript">$(function() { $('#divToHaveCorners').corner(); } );</script>
You're done! If not, let me know.

DrJokepu 2008-11-06 21:50:08

You are awesome. You win 1 internets. Use it wisely :D

2008-11-06 21:51:39

Re #5: The function is only executed when the DOM is ready, so setting up that function to fire can come before the div, just not before including the jQuery file. (I like to keep mine near the rest of the javascript in the header or an external file - it gets overlooked at the bottom of the page)

jTresidder 2008-11-15 02:47:53

I follow YSlow's recommendations and put all of my JS at the bottom of the page, just before </body>. DOM will be ready by then, and I'd wrap the call in $(document).ready() function.

Srdjan Pejic 2009-02-15 23:22:19

OMFG - TYVM! I did battle with this stupid thing for too long. You sir, have made my day :)

javamonkey79 2010-07-27 15:39:12

Answer 3

+1 A:

jquery corners by Methvin http://www.methvin.com/jquery/jq-corner-demo.html are ok and working fine, but... there is more beautiful alternative:

http://blue-anvil.com/jquerycurvycorners/test.html

you can use that lib to do rounded images even.

And what is very important: - 18th July 2008 - Now works in IE6,7, safari, and all other modern browsers. Fixed centering bug.

So, please download jQuery Curvy Corners 2.0.2 Beta 3 from:

http://code.google.com/p/jquerycurvycorners/downloads/list

and again you have to load jquery core lib first so example of your HEAD can be:

<head>
<script src="http://path.to.your.downloaded.jquery.library/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script src="http://path.to.your.downloaded.jquery.library/jquery.curvycorners.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){

$('.myClassName').corner({
     tl: { radius: 6 },
     tr: { radius: 6 },
     bl: { radius: 6 },
     br: { radius: 6 }
});

}
</script>
</head>

where: tl,tr,bl,br are top-left, top-right corners etc...

next, your BODY area:

and ?

and that's it :)

link to image about:

http://img44.imageshack.us/img44/3638/corners.jpg

... and ready to use code:

<html>
    <head>
    <script src="http://blue-anvil.com/jquerycurvycorners/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){

    $('.myClassName').corner({
         tl: { radius: 12 },
         tr: { radius: 12 },
         bl: { radius: 12 },
         br: { radius: 12 }
    });

    });
    </script>
 <style>
 .myClassName
 {
 width:320px;
 height:64px;
 background-color:red;
 text-align:center;
 margin:auto;
 margin-top:30px;
 }
 </style>
</head>

<body>

<div class="myClassName">content</div>

</body>

</html>

just copy, paste, enjoy :)

daniel barucha 2009-11-05 23:28:05

ansaurus

tags:

views:

answers:

jquery round corners

related questions