Why I cannot get same js / jquery results (in my own website) out of Codecademy?!


#1


In "jQuery Functions and Selectors" section, I tried to use exactly the same code of .js in order to get "fadeOut" function in my own website, but it did not work. Even I created .html, .css, and .js files separately and linked them.

Below is the code I want to use in my website and once "Click" button, want the "div" disappear

$(document).ready(function() {
$("button").click(function() {
$('.vanish').fadeOut('slow');
});
});

My original .html and .js codes are below:

<body>
        <div class="body_section"></div>
        
        <div style="height:400px; margin-top: -550px; margin-left:30%;">
            <img src="Zoombee1.png">
        </div>
        
        <button style="background:none; height:80px; width:200px; margin-left:42%; display:inline-block; font-size:30px; border:none; border:2px solid #FCD44E; border-radius:10px; color: #FCD44E; cursor:pointer;">Click</button>
        
        <div class="body_section"></div>
        
    </body>


   
 body, html {
                height: 100%;
            }


.body_section {
    background-image: url('cloud.gif');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
} 


$(document).ready(function() {
    $("button").click(function() {
        $('.body_section').fadeOut('slow');
    });
});


#2

did you include jquery? jquery is a javascript library, you must include it for jquery code to work.


#3

Hello, is this what you mean below?

link rel='stylesheet' type='text/css' href='stylesheet.css'
script type='text/javascript' src='script.js'></script

If so, yes I included.
If you mean sth else, I would really wish someone help me how to do that?
Because, I am new and want to learn jQuery / js by practicing


#4

okay, what i thought. jquery is written in javascript, so in order for js to understand jquery it needs a library, you can download it here:
https://jquery.com/
or let google host it for you:
https://developers.google.com/speed/libraries/#jquery

without it, javascript doesn't understand jquery code


#5

Thank you so much, now actually I understood the relationship between jQuery library and js

appreciate your assistance


#6

i should have explained it even better: someone wrote jquery in the javascript language. Then he made this code (aka library) available for everyone.

but without this crucial library, javascript doesn't understand jquery. You need this library which defines how jquery works


#7

Is that correct if I just take the below ref and add to my original file?:


script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script



#8

yea, just make sure to have both:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

and

<script type='text/javascript' src='script.js'></script>

then you should be good. You can also download the jquery file, this way you an work offline, just put it in the same directory as the html file, and set the src value to the name of the jquery file


#9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.