Javascript not loading - please help

JavaScript
1

I’m trying to learn Jquery and have set up a practice site, code below. The page displays fine but is not performing any of the ‘animate’ tricks I’m practicing. Have I called in the script incorrectly? Thanks!

this is the html file:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>Practice</title>
<link href=“index.css” rel=“stylesheet” type=“text/css” />

<script src=“…/…/lib/jquery-1.4.min.js” type=“text/javascript” charset=“utf-8”></script>
<script type=“text/javascript” src=“script.js”></script>

</head>

<body>
<div id=logo>
<img src=“MARGO logo WEB RGB.jpg” alt=“ipsem lorum” />
</div>
<div id=content>
ipsem lorum ipsem lorum
</div>
</body>
</html>

This is the script.js file

$(document).ready(function(){
$(‘p’).animate({
padding: ‘20px’,
borderBottom: ‘3px solid #8f8f8f’,
borderRight: ‘3px solid #bfbfbf’
}, 2000);
});

2

It looks like you’re trying to animate an element that doesn’t exist

The $(‘p’) code tells jQuery what element to perform the command (in this case ‘animate’) - it uses CSS syntax. So what you want to replace it with is $(‘#logo’) (or whichever element you want to animate)

Hope that sorts it :slight_smile:

3

Thanks for your suggestion - I would have thought that it would work as I can see I was selecting an element not actually used in the document. I’ve changed the script.js as below and sadly it still isn’t working, any other suggestions?

$(document).ready(function(){
$(‘Content’).animate({
padding: ‘20px’,
borderBottom: ‘3px solid #8f8f8f’,
borderRight: ‘3px solid #bfbfbf’
}, 2000);
});

4

Actually I got it working - the animate effects were not visible because the div was too big, doh! Thanks again for taking the time to help :slight_smile: