This forum is now read-only. Please use our new forums! Go to forums
[solved] not working when i copied them to local
it works in codecademy
stylesheet.css:
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.1;
}
script.js:
$(document).ready(function(){
$('div').mouseenter(function(){
$('div').fadeTo('fast', 1);
});
$('div').mouseleave(function(){
$('div').fadeTo('fast', 0.1);
});
});
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
however, when i copied them to local (into 3 files named index.html, script.js, and stylesheet.css), it didn’t work in chrome or firefox.
Answer 516eb21bbb99340ae7005ea8
Most likely cause: you forgot to tell your HTML file to load jQuery before loading your script: paste this into the <head>
of your HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Then it should all work as expected.
Answer 55bba0dd93767678d3000049
remove Opacity from the stylesheet.css, it should work.
3 comments
okay, this needs to have way more points than 1 votes.
omg, yeah went back to the css >.<
Yeah got me past the bug.. Thanks Liz
Answer 51bf96c59c4e9d15e40012a9
when i insert the given above into the head i get this
Oops, try again! Did you set your
4 comments
You need to have
I had the same problem then i realise that they insist closing script with
thank you gotcaffeine
@Alexander - thank you! This seemed to be the problem with mine.
Answer 5380987252f86334b900178b
Keep your code as it is, all you had to do is the Opacity, as it is shown, you made it
$('div').fadeTo('fast', 0.1);
and that is the big problem (‘fast’, >>0.1<<) it doesn’t have to be 0.1 it has to be 0.5 as what the lesson says, that is what I got and I passed Codes:
index.html :
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="script.js"/></script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
stylesheet.css :
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
And At last script.js :
$(document).ready(function(){
$('div').mouseenter(function(){
$('div').fadeTo('fast', 1);
});
$('div').mouseleave(function(){
$('div').fadeTo('fast', 0.5);
});
});
3 comments
^ nope, still does not fade on google chrome when mouse hovers over div. With that code copied into note pad. Any updates?
I copied and pasted this code, as I too was having the problem of “opacity not set to 1, check example.” I was skeptical, but this code SHOULD work. If you look in the CSS style sheet, you’ll notice that the opacity is set to “0.5” [Shown in the code as opacity: 0.5; ] Then in the script.js, the opacity is set once again to “0.5” [shown in the code as $(‘div’).fadeTo(‘fast’, 0.5);] Everyone here should be able to do standard math. 0.5 + 0.5 [Seeing how CSS and script.js work hand in hand] = an opacity of 1.
Thank you! But the exercise comes with – opacity: 1; in css - thanks again
Answer 550f81b086f55236380046a2
Hey trying changing your opacity to 0.05 on .css file. The code will work.
2 comments
This worked for me, annoying how many bugs are in the JQuery course
Thank You! - i did - still didn’t work - thanks again
Answer 51b1b6cc8c1cccc7e5006147
OMG mine worked when I just put: $(document).ready(function; why??? @o@ O:
3 comments
I had the same problem then i realise that they insist closing script with
yes this fixed the problem
alex no its not the script tag is not self closing you should do
Answer 519be52ed7050bc477004877
i cant figure out why my Div opacity will not work i did everything correctly and i do not want to continue to the next one until this will accept my code there are allot of glitches in this system.
1 comments
I had a similar problem. The div would disappear during coding and when I clicked to finish it would ask me to test it.
The reason it would disappear was because I would nest the (script) inside the body surrounding the Div. I hope this helps.
Answer 5431712d7c82ca31a0005821
This code is not working on google chrome, does anyone know why??
1 comments
make sure youre setting up html css and js on seperate files, and in the html have the
in the head that should fix it unless youre trying to put all that code in one file
Answer 544038f052f8635170000727
Answer 5565f798937676d3a50008b7
Changing the opacity to 1 on the .css file worked for me. Same problems as yours.
Answer 55844042d3292f967d0005c2
$(document).ready(function() {
$('div').mouseenter(function() {
$('div').fadeTo('fast',1);
});
$('div').mouseleave(function() {
$('div').fadeTo('fast',0.5);
}); });
Answer 558ca701937676fa210006c1
Answer 5304d7739c4e9d5fbf002c7d
1 comments
Answer 5304d78952f863dd53002889
Use what i wrote in the comments in the html field it will work i promise you!
6 comments
No problem David ;)
nope, doesn’t work :)
Did u put it in the html field and not the jquery
html field?
no - didn’t work either - but Thank You!
Answer 51f69b46631fe90a5c0002ed
I had the same problem then i realise that they insist closing script with
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
14 comments
thank you very much! it worked.
Just wondering why did it work in codeacadamy?
Thanks! U saved my day! had the same issue! Just trying to figure out how to apply it to my links.. I have .png-img as links, so it doesnt work with calling $(‘a’).mouseenter(function(){….. any suggestion? or is it even possible to use this functions for images?
Thank you!!! I was now wondering what’s wrong with my browser when i started coding from my local disk. Thanks
So what do you put in your header to make the JQuery load first if you are only testing it? bc the one above is a link is it not?
I quite don’t get your query. The above tags links the html file to Google’s jquery library so that it could work on the Browser you are using
I had the same problem then i realise that they insist closing script with
You are my hero. Thank you so much!!
So… why doesn’t Codecademy teach us this…?
Thx Alex J, I had the same problem and couldn’t find it by google search..
its yet not working, error popsup “Oops, try again. It looks like you didn’t set your div’s opacity to 1. Check the example to in the instructions if you need help!” and I did what you recomended… damn, what to do??
I have somehow managed to go on to no.13 but not at all convinced by no.12. The button doesn’t fade. And its asking me for put a ; bw type and src properties in script tags.
I have tried pasting the
Part 11 it appears that the CSS Sheet requires the opacity line to be deleted or set to “opacity: 1” to be able to progress to question 12.
However on question 12 the line “opacity: 0.5;” should be present on the CSS sheet to progress to question 13.