Question

This probably sounds really stupid but I have noo idea how to implement jquery's rounded corners (http://www.methvin.com/jquery/jq-corner-demo.html). My javascript-fu is complete fail and I can't seem to get it to work on my page. Can anyone show me a simple example of the HTML and JavaScript you would use to get them to show? Apologies for my idiocy.

Was it helpful?

Solution

  1. This thing does not work in Safari & Google Chrome.

  2. 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>

  3. 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>

  4. 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>

  5. 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>

  6. You're done! If not, let me know.

OTHER TIPS

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 :)

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();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top