Home/ Questions/Q 3595738
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T19:53:31+00:00

I’m trying to use the rounded corners demo for jQuery (http://plugins.jquery.com/project/corners), but I’m getting

  • 0

I’m trying to use the rounded corners demo for jQuery (http://plugins.jquery.com/project/corners), but I’m getting an error in both Firefox and IE when it tries to run.

The code below shows what I’m trying to do, the error is ‘$(“.Section”).corners is not a function’. The page is definitely loading jquery, but not loading the corners plugin.

Anyone know why this is throwing an error?

<script src="../../Content/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Content/Scripts/jquery.corners.min.js" type="text/javascript"></script>   
<script type="text/javascript">
    $(document).ready(function () {
        $('.Section').corners();
    });
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I created a page to load jQuery Corners to see if I could get it to work at all:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .Section {
        border-color: #000;
        border-width: medium;
        border-style: solid;
    }
    </style>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery.corners.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.Section').corners();
        });
    </script>
    <title>Corners</title>
    </head>

    <body>
    <p class="Section">
    Here is some text in my soon to be rounded corner paragraph.
    </p>
    </body>
    </html>

    What I found in my tests is that the Corners plugin loaded, but using jQuery 1.4.4 and testing with Chrome 8.0.552.224, Safari 5.0.3, Firefox 3.6.13, and Internet Explorer 8 that only Safari and Fireefox showed the corners. Chrome produced CSS errors in the console, IE just ignored the JavaScript. With that in mind, I recommend you give CSS3 PIE a try for IE and use a bit of combo CSS for your other elements:

    <style type="text/css">
.Section {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}       
</style>

    The CSS above is from an example produced in a blog post by Jon Raasch.

    • 0