开发者

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 开发者_StackOverflowcode 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>


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.


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.


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.


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.


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

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜