I'm trying to use the rounded corners plugin -- jquery.corners.js .
When I create a small test case, below, it works fine. However, when
I try to add corners to my production system I receive the following
error in Firefox's error console:
$('.edlBoxArea').corners is not a function
I'm only adding two things to my production system:
FIRST:
A reference to the plugin script, in the <HEAD> section of my html:
<script type="text/javascript" src="/jscripts/jquery/
jquery.corners.js"></script>
SECOND:
In my onload event handler a single Javascript stmt:
$('.edlBoxArea').corners("10px");
I've also tried using the following lines of Javascript code in the
<head> section instead of an onload event handler. It gives the same
error.
$(document).ready(function(){
$('.edlBoxArea').corners("10px");
});
I've verified via Firebug that the Javascript files are being loaded,
so it isn't a problem with referencing the external js files.
I'm using jQuery 1.2.6 and jQuery Corners 0.3. I've successfully used
jQuery and other plugins (hoverIntent) successfully. What could be
going wrong?
Here's the simple test case:
<html>
<head>
<title>corners</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript" src="./scripts/jquery.js"></script>
<script type="text/javascript" src="./scripts/jquery.corners.js"></
script>
<script language="JavaScript">
function onLoadHandler()
{
$('.edlBoxArea').corners("10px");
}
</script>
</head>
<body onload="onLoadHandler();">
<div id="outerDiv">
Maybe there's some text here.<br/>
And a little more text here.
<div class="edlBoxArea" style="background-color: lightblue;">
This is an<br/>
inner div<br/>
that should have <br/>
rounded corners <br/>
applied.
</div>
<div class="edlBoxArea" style="background-color: tan;">
This is another<br/>
inner div<br/>
that should have <br/>
rounded corners <br/>
applied.
</div>
</div>
</body>
</html>
