Javascript not loading? Newbie here

Question

When I open the html file in a browser the javascript doesn't work, I can't figure out why? The exact same code works in the codecademy prompts, but not when I launch it from files on my desktop.

HTML

<html>
      <head>
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
        <link href='style.css' rel='stylesheet'>

  </head>
  <body>

    <div class="menu">

      <!-- Menu icon -->
      <div class="icon-close">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- Main body -->
    <div class="jumbotron">

      <div class="icon-menu">
        <i class="fa fa-bars"></i>
        Menu
      </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

CSS

/* Initial body */
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}

/* Basic styling */

.jumbotron {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png'); 
  height: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}

Javascript

var main = function() {
  /* Push the body and the nav over by 285px over */
  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

Is your javascript the `app.js` file? Is this file in the same directory as this html page? What does your console say - any errors? — Goose, Jul 28 '14 at 23:11
Looks like http: is missing from href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" and src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" — Bhasyakarulu Kottakota, Jul 28 '14 at 23:13
@PHPglue I cleared my cache and tried again but that did not work. — Robert C, Jul 28 '14 at 23:16
@user2853450 Can you upload your code to a server then give us the link? — Charlie, Jul 28 '14 at 23:16
Well, now you know it's not because your Browser saved your script in the cache. — StackSlave, Jul 28 '14 at 23:17
As I mentioned above, what does your console say? That should point you in the right direction. — Goose, Jul 28 '14 at 23:18
@Charlie It's not my code, just code for a beginner tutorial on codeacdemy, and no I can't. Don't have a server setup/don't know how to...I'm just starting. — Robert C, Jul 28 '14 at 23:20
@Goose "ReferenceError: $ is not defined app.js:26 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." — Robert C, Jul 28 '14 at 23:21
@RobertC http://stackoverflow.com/questions/2194992/jquery-is-not-defined — Charlie, Jul 28 '14 at 23:23

score 1 · Accepted Answer · edited May 23 '17 at 10:33

While PHPglue is correct, and that you should place the closing </div> tag, that's not causing your JS to not execute. This console error, however:

ReferenceError: $ is not defined app.js:26

Indicates that jQuery is not loading properly which means that this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Is somehow not working, and I think I know why...

Using // will load the requested URL relative to the current page's scheme. Since you're viewing this from a browser locally, that scheme is file://. Consequently, you're not loading jQuery because it's requesting file://ajax.googleapis....

So yes, my comment is party wrong. On a web server, where the scheme is either http:// or https://, then using //ajax.googleapis... will be fine. On localhost, it's not.

Thank you, I actually solved it by adding the http a few minutes before you posted this, so yes, that did fix it. Thanks for the explanation. — Robert C, Jul 28 '14 at 23:43

score 0 · Answer 2 · answered Jul 28 '14 at 23:21

0

You're missing a closing </div> tag:

<div class="jumbotron">

  <div class="icon-menu">
    <i class="fa fa-bars"></i>
    Menu
  </div>

add

</div>

If you right click on your web page with Firefox and click View Page Source. You should see most HTML tag issues in red, if they are part of the source code. Of course, this won't work if your code was created with JavaScript.

answered Jul 28 '14 at 23:21

StackSlave

10,613
2
18
35

adding an extra under didn't help – Robert C Jul 28 '14 at 23:27
That closing `` is needed. – StackSlave Jul 28 '14 at 23:44
I meant it didn't solve my original question, but thanks, I will keep the div in. – Robert C Jul 28 '14 at 23:47

score -4 · Answer 3 · answered Jul 28 '14 at 23:11

-4

try $document.ready(main());

I don't know jQuery, so not sure if it needs to initiate the function with ()

answered Jul 28 '14 at 23:11

Sebastien Daniel

4,649
3
19
34

1

Nope. That will run the function immediately, which defeats the purpose of the `.ready()` method (and concept). The idea is to pass a function pointer to be run when the document is ready, and not before. – Paul Richter Jul 28 '14 at 23:13
No, you can pass an Anonymous function, or unexecuted function, which looks like a variable in JavaScript. – StackSlave Jul 28 '14 at 23:14
1

Ahh, good point. That's what happens when you try to use a framework you don't know about. Thx for the pointers – Sebastien Daniel Jul 28 '14 at 23:14
I am nut sure what those two slashes in the jQuery script mean, but you could try leaving them out. What I prefere is to place an 'alert("Hello World");' statement at the start of the script and then reload your page. If a dialog appears, there is something wrong with the script - otherwise, the problem is the html part (that seems to be fine) – Ercksen Jul 28 '14 at 23:16

Javascript not loading? Newbie here

3 Answers3