I've been staring at my code for hours now trying to work out why this seemingly simple play around with jQuery isn't working:
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="keywords" content="test">
<meta name="description" content="test">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class='box' id='title'>"test"</p>
<div class='gallery'>
<p class='tNail' id='one'>
<p class='tNail' id='two'>
<p class='tNail' id='three'>
<div class='clear'></div>
<p class='tNail' id='four'>
<p class='tNail' id='five'>
<p class='tNail' id='six'>
<div class='clear'></div>
</div>
<div class='clear'></div>
<p class='footer'>test 2011 <a href='#'>test</a></p>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function()
{
$(".tNail").click(function()
{
$(this).effect("scale", {percent:200, direction:'both'}, 1000);
});
});
</script>
</html>
I've tried using noConflict() to no avail. If anyone can shed some light I'd be grateful.
Thanks.
I've been staring at my code for hours now trying to work out why this seemingly simple play around with jQuery isn't working:
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="keywords" content="test">
<meta name="description" content="test">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class='box' id='title'>"test"</p>
<div class='gallery'>
<p class='tNail' id='one'>
<p class='tNail' id='two'>
<p class='tNail' id='three'>
<div class='clear'></div>
<p class='tNail' id='four'>
<p class='tNail' id='five'>
<p class='tNail' id='six'>
<div class='clear'></div>
</div>
<div class='clear'></div>
<p class='footer'>test 2011 <a href='#'>test</a></p>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function()
{
$(".tNail").click(function()
{
$(this).effect("scale", {percent:200, direction:'both'}, 1000);
});
});
</script>
</html>
I've tried using noConflict() to no avail. If anyone can shed some light I'd be grateful.
Thanks.
Share Improve this question edited Nov 18, 2011 at 12:44 lonesomeday 238k53 gold badges327 silver badges328 bronze badges asked Nov 18, 2011 at 12:37 LeeLee 3,96912 gold badges49 silver badges66 bronze badges 7- 3 What is the actual error message? The one you've quoted seems impossible... – lonesomeday Commented Nov 18, 2011 at 12:39
- You sure you have jQuery.js in your current folder? – Abdul Munim Commented Nov 18, 2011 at 12:39
- Yes I downloaded the jquery file and renamed it to jquery.js honestly, my error is: ${this}.effect is not a function – Lee Commented Nov 18, 2011 at 12:40
- What does noConflict have to do with this... – Matti Virkkunen Commented Nov 18, 2011 at 12:40
- I saw a lot of problems with error reports of "... is not a function" and many people solved their problems with noConflict. Thought I'd give it a shot but it didn't work. – Lee Commented Nov 18, 2011 at 12:41
1 Answer
Reset to default 15Ah, looking again, I think the error message is probably "$(this).effect
is not a function" (which is rather different from ${this}
). You haven't loaded jQuery UI, which is where the effect
method is defined.
Include the jQuery UI library and try again.