jQuery - The background is still not changing

Question

Possible Duplicate:
jQuery - Background color not changing

I know I have posted the similar question several times, but it is really confusing me why not working.

This is my latest version of the code:

HTML

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css"> 
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</div>
</body>
</html>

script.js

$("#bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

I want to notice that I have a folder called: jquery-ui-1.8.16.custom, and this is where I'm putting these files in. And, I have referenced jquery-1.6.4,js as shown above which I also have it in the same folder, in addition to referencing jquery-ui-1.8.16.custom.min.js which is in the js folder in the current folder.

What am I getting wrong here? Isn't this the way to reference jQuery and jQueryUI?

EDIT

Browser used: Mozilla Firefox 6.0.2

Folder structure: jquery-ui-1.8.16.custom/abc.html jquery-ui-1.8.16.custom/script.js jquery-ui-1.8.16.custom/jquery-1.6.4.js jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js

Thanks.

Do not open consecutive questions. Edit your previous one if you want to add something to it. Also, communicate with the people who answer you to ask about further clarification if their answer doesn't work for you. Don't just ask new questions without first trying to do your best to resolve the first question. — Shef, Oct 02 '11 at 09:46

score 0 · Answer 1 · answered Oct 02 '11 at 09:49

0

Did you put it in the window or document onload function? Is this page in the same folder as your scripts?

$(document).ready(function(){
    $("#bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);
});

answered Oct 02 '11 at 09:49

mowwwalker

16,634
25
104
157

The page is in the same folder as my scripts. But, should I include an ``onload()` function? I think it works without this since I'm already including the script – Simplicity Oct 02 '11 at 09:59
If you don't put it in an onload function, then the script will run before the document is ready, which means your bgcolor element doesn't exist yet. – mowwwalker Oct 02 '11 at 10:03
In this case, when I insert `onload` in the `` tag, what should it be equal to? i.e; `onload=???``. Thanks – Simplicity Oct 02 '11 at 10:10
Also if you notice, I'm trying to run the script by triggering a button. So, isn't that enough for the document to be ready? – Simplicity Oct 02 '11 at 10:13
You're trying to add an event handler to something that doesn't exist. – mowwwalker Oct 02 '11 at 10:14
How can I add the `onload` function in this case? – Simplicity Oct 02 '11 at 10:24
@Med-SWEng, I gave you the code in my answer, 34 minutes ago. – mowwwalker Oct 02 '11 at 10:24

score 0 · Answer 2 · answered Oct 02 '11 at 09:49

You probably somehow fail to include jQueryUI as that is where colour animation comes from. Is your jquery-ui-1.8.16.custom.min.js inside of a folder called js? You should also include your folder structure into this question as it's unclear what's wrong otherwise. Also you might want to look into the developer console of your browser if there is such a thing there (it might tell you of files failed to load or syntax errors you have). You also should mention what browser you're on to make it easier to help you.

jQuery - The background is still not changing

2 Answers2