Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML jQuery Basics (2014) Introduction to jQuery Ways to Include jQuery in a Project

Valery Kukatov
Valery Kukatov
6,996 Points
Posted by Valery Kukatov
Valery Kukatov
6,996 Points

Workspace jQuery code

For some reason when I launch a preview of the webpage from workspace the page works as intended, however, when I create my own js, css, and html, files containing exact the same code, the page takes a while to load and then the show and hide does not work at all.

Any idea what's happening?

<!DOCTYPE html>
<html>
<head>
    <title>Take Evasive Action</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">

</head>
<body>
  <p class="warning">
    <span>It's A Trap!</span>
  </p>
  <div class="image">
    <img src="img/ackbar.gif" />
  </div>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

body {
  background: #2d3339
}
.warning {
  border: 5px solid #e1dfbe;
  width: 200px;
  margin: 100px auto 20px;
  border-radius: 5px;
  padding: 20px 10px;
  text-align: center;
  font-size: 32px
}
.warning span {
  color: #f4f3ce;
  font-family: sans-serif;
  font-weight: bold;
}
.image {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  z-index: -1
}

    $(".warning").hide().show("slow");

1 Answer

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Could you please post your code here for each file? Also, do you mean you are making your own project in workspaces or with another text editor?

Valery Kukatov
Valery Kukatov
6,996 Points
Valery Kukatov
Valery Kukatov
6,996 Points

It's exactly the same code as in the workspaces that is provided in this video. It works in workspaces, but will not work when I create CSS, JS, and HTML documents.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

For one, your jquery include is missing http: before the slashes. Also, have you placed the app js inside another folder named js?

Valery Kukatov
Valery Kukatov
6,996 Points
Valery Kukatov
Valery Kukatov
6,996 Points

It's not missing. That's what is presented in the jquery.com and is what presented in the workspace that works in this video. All items are in folders. It just makes no sense as to why it would work in workspace and not on a desktop.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Trust me, add http:// and it should work. I did it on my computer and it worked. Honestly I don't ever use the jQuery CDN. Try using google's jquery CDN it is faster anyway! Hope this helps. If I have time, I will research this later as to why the two slashes have issues.

Valery Kukatov
Valery Kukatov
6,996 Points
Valery Kukatov
Valery Kukatov
6,996 Points

Dang. you are good. I'm curious though why would workspaces wouldn't need it, but my html does.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

From what I just read, one thing that could be causing the issue is that you are testing it in your browser but it isn't actually on a server whereas workspace is on a live server. Apparently the double slash inherits the current protocol such as http or https. It could be that it is mistaking the src as a local file instead of an http request.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I think that dropping the protocol is the preferred method but then it doesn't work locally. One solution is to add the http: but then you have to remember to drop it when going live.

Here's how html5 boilerplate handles loading jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>

I suspect they do it this way as a backup. If the cdn doesn't work then load your own copy of jQuery. An idea I've had for a little while is that maybe this has the added benefit of letting it work locally as well without having to put in the http:. Since the dropped protocol won't work, it will load a local copy.

I haven't tested this so it may not work the way I think. It was just an idea I had and thought it might be useful to this discussion.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I should have read this first:
https://github.com/h5bp/html5-boilerplate/blob/master/doc/html.md#google-cdn-for-jquery

The second paragraph in that section also supports Chris' suggestion to use the google cdn.