getting browser to properly call .js files

A place where newbies can post without (much) fear of reprisal. All mission posts should still go in the applicable forum.
Forum rules
Older HTS users: Be nice to the new people.

NEW USERS: This is NOT the place to post about missions! Refer to "Missions" category.

getting browser to properly call .js files

Post by PortFondler on Mon Dec 28, 2015 1:49 pm
([msg=91073]see getting browser to properly call .js files[/msg])

I'm starting on Codecademy's jQuery lesson. I'm supposed to make boxes that are interactive and expand when my mouse hovers over them. The code works on the site, but when I try to save all three codes in separate .html/.css/.js files (all within the same folder), I open the HTML and the animation doesn't occur. The boxes are displayed but don't expand. Why is this?

Apologies if this seems like a stupid simple little problem but Google's (surprisingly) not helping me at all this time. Any help is much appreciated.

Here is the code:

index.html:
Code: Select all
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="red"></div>
        <div id="blue"></div>
        <div id="yellow"></div>
        <div id="green"></div>
    </body>
</html>


stylesheet.css:
Code: Select all
div {
    height:100px;
    width:100px;
    display: inline-block;
}

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}


script.js:
Code: Select all
$(document).ready(function() {
   $('div').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $('div').mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       });
   });
   $('div').click(function() {
       $(this).toggle(1000);
   });
});
..."Learn from people. Teach people. Do anything that will satiate your need to learn and keep you out of a cell at the same time.

The world is so much bigger than some person's inbox" ~Goatboy
User avatar
PortFondler
New User
New User
 
Posts: 25
Joined: Sun Nov 08, 2015 12:49 pm
Blog: View Blog (0)


Re: getting browser to properly call .js files

Post by pretentious on Tue Dec 29, 2015 12:47 am
([msg=91077]see Re: getting browser to properly call .js files[/msg])

On my phone but i didn't see a link to the jquery library
Goatboy wrote:Oh, that's simple. All you need to do is dedicate many years of your life to studying security.

IF you feel like exchanging ASCII arrays, let me know ;)
Can you say brainwashing It's a non stop disco
User avatar
pretentious
Addict
Addict
 
Posts: 1203
Joined: Wed Mar 03, 2010 12:48 am
Blog: View Blog (0)


Re: getting browser to properly call .js files

Post by LiquidLemon on Tue Dec 29, 2015 4:40 am
([msg=91079]see Re: getting browser to properly call .js files[/msg])

Yeah, you're missing jQuery. It's not a part of the core JS library (if you even can call it that). You should download jQuery and then link it before your script. Or if you're lazy you can also link it from here: http://code.jquery.com/ (it's not something that you should do when publishing a serious website, though).
User avatar
LiquidLemon
Moderator
Moderator
 
Posts: 33
Joined: Sun Oct 26, 2014 2:26 pm
Blog: View Blog (0)


Re: getting browser to properly call .js files

Post by pretentious on Thu Dec 31, 2015 1:04 am
([msg=91108]see Re: getting browser to properly call .js files[/msg])

LiquidLemon wrote:It's not a part of the core JS library (if you even can call it that)

This is a question in and of itself. Many of the js questions on stack overflow are answered with jquery code, i have to wonder out loud why they don't just absorb it into the standard. I guess it's a 'why doesn't c have a std:vector' question all over again though

you can also link it from here: http://code.jquery.com/ (it's not something that you should do when publishing a serious website, though).

Is that just to look professional or is there a good reason why you wouldn't link a remote version? W3schools suggests to link googles version because it's likely cached
Goatboy wrote:Oh, that's simple. All you need to do is dedicate many years of your life to studying security.

IF you feel like exchanging ASCII arrays, let me know ;)
Can you say brainwashing It's a non stop disco
User avatar
pretentious
Addict
Addict
 
Posts: 1203
Joined: Wed Mar 03, 2010 12:48 am
Blog: View Blog (0)


Re: getting browser to properly call .js files

Post by LiquidLemon on Thu Dec 31, 2015 4:35 am
([msg=91109]see Re: getting browser to properly call .js files[/msg])

If you were to download the file and then link it by yourself, then sure, using an external resource is going to be much better.
But if you have a lot of your own code and then also libraries that it depends on you'd want to bundle all that into a single .js file to minimize the amount of requests that have to be done.

I did some research and it turns out that the best approach (according to stack overflow) would be to then put the bundle on a CDN for the best performance.
User avatar
LiquidLemon
Moderator
Moderator
 
Posts: 33
Joined: Sun Oct 26, 2014 2:26 pm
Blog: View Blog (0)



Return to NZone

Who is online

Users browsing this forum: No registered users and 0 guests