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

JavaScript jQuery Basics (2014) Introduction to jQuery What is jQuery?

Tiana Tucker
Tiana Tucker
3,881 Points
Posted by Tiana Tucker
Tiana Tucker
3,881 Points

Hiding the warning isn't working in Google Chrome

I'm not sure what I'm doing wrong I did exactly what the instructor did.

This is the contents of the app.js file: /Hide Warning/ jQuery(".warning").hide(); /Show Warning Slowly/

This is the contents of the index.html: <!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="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body> </html>

6 Answers

Giorgi Kiknadze
Giorgi Kiknadze
952 Points

Here is your index.html

<html>
  <body>
    <p class="warning">
      <span>It's A Trap!</span>
    </p>
    <div class="image">
      <img src="img/ackbar.gif" />
    </div>
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

and here your JavaScript file:

//This function waits till DOM is ready for manipulation and then makes changes
$(function() {
/*Hide Warning*/
jQuery(".warning").hide();
/*Show Warning Slowly*/
})

this function waits till DOM(Document Object Model) is ready for manipulation and then makes changes. Now it should 100% work.

Tiana Tucker
Tiana Tucker
3,881 Points
Tiana Tucker
Tiana Tucker
3,881 Points

Oh interesting. Thanks!

Giorgi Kiknadze
Giorgi Kiknadze
952 Points

Does it works?

Giorgi Kiknadze
Giorgi Kiknadze
952 Points

If it works please mark my answer as best answer :)

Tiana Tucker
Tiana Tucker
3,881 Points
Tiana Tucker
Tiana Tucker
3,881 Points

No I'm convinced that there might be something strange going on this my chrome browser, because it behaves perfectly when I open it in Safari.

Tiana Tucker
Tiana Tucker
3,881 Points
Tiana Tucker
Tiana Tucker
3,881 Points

Or actually I think it's a bug related to Treehouse's Workspaces that I've been using instead of a traditional text editor. When I download the files to my local machine it worked fine in any browser. Thanks for your help!

Giorgi Kiknadze
Giorgi Kiknadze
952 Points

Oh perfect! :)

Akhil Akhil
Akhil Akhil
102 Points

But Why does'nt $("warning").hide(); work? without function(){}....?

Andy Garcia
Andy Garcia
6,180 Points
Andy Garcia
Andy Garcia
6,180 Points

Make sure your Chrome browser is full screen, then refresh. This fixed the issue for me, and also fixed issues in previous Javascript courses where alerts and prompts would not show up if I had Chrome "snapped" to one of the sides of the screen.

Tiana Tucker
Tiana Tucker
3,881 Points
Tiana Tucker
Tiana Tucker
3,881 Points

I tried a different browser, Safari, which worked but for some reason it won't hide that element on Chrome.

Giorgi Kiknadze
Giorgi Kiknadze
952 Points
Giorgi Kiknadze
Giorgi Kiknadze
952 Points

I can give you some advice: go to chrome developer tool -> console. If there are some errors maybe you could then identify what is the problem. You should also try :

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/app.js"></script>

Require JavaScript like this.

Tiana Tucker
Tiana Tucker
3,881 Points
Tiana Tucker
Tiana Tucker
3,881 Points

There are no errors when I open the dev tool in chrome.

Giorgi Kiknadze
Giorgi Kiknadze
952 Points

Have you tried require JS like this?

Tiana Tucker
Tiana Tucker
3,881 Points
Tiana Tucker
Tiana Tucker
3,881 Points

Yeah, even when I replace my script tags with the snippet you provided above there's still no change.

Giorgi Kiknadze
Giorgi Kiknadze
952 Points

can you please show me also app.js file?

Giorgi Kiknadze
Giorgi Kiknadze
952 Points

you can upload your code at jsfiddle and here I can check better.

Roderick Kar
Roderick Kar
8,456 Points
Roderick Kar
Roderick Kar
8,456 Points

hope you have already resolved your problem. if not yet, try use https instead of http in the script src for calling jquery

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

clear browser cache.

Try alert on your app.js file. If it doesn't alert for test hello world. You didn't type the directory of the file correctly.

yahya hussein
yahya hussein
3,697 Points

If you're still having difficulty Try it with 'https:' instead of just 'http:' with your jquery cdn

Thomas Katalenas
Thomas Katalenas
11,033 Points
Thomas Katalenas
Thomas Katalenas
11,033 Points

works in chrome for me