CODEWITHSUNDEEP
jqueryplugins
DLeh
DLeh

Reputation: 24395

jQuery plugin not loading?

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>

Upvotes: 1

Views: 4597

Answers (5)

user2503896
user2503896

Reputation:

I was using same library and had same problem, what i did was.

copy paste whole code of corner.js library before your document.ready code and check is it started working or not?

if not mean corner.js should be downloaded again.

Upvotes: 0

Andrew
Andrew

Reputation: 71

should be $('.Section').corner(); not $('.Section').corners()

this only applies if you using the "jQuery corner plugin"

Upvotes: -2

Tony Miller
Tony Miller

Reputation: 9159

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.

Upvotes: 1

Adrian Gonzales
Adrian Gonzales

Reputation: 1010

I've run through your code and I don't see what the problem is. You could try this code inside your $(document).ready and see what it returns:

alert(typeof jQuery().corners)

If it alerts "function" then you know corners is loading. If it alerts "undefined" then it's not loading and you can track down that problem.

Upvotes: 2

simshaun
simshaun

Reputation: 21466

Use the Net panel in Firebug (or equivalent developer tools) and ensure the script is being loaded first of all. If not, you should see it return a 404 status for its line item in the Net panel.

Upvotes: 5

Related Questions