Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

Oh interesting. Thanks!

Does it works?

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

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

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!

Oh perfect! :)

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

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

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

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

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

Have you tried require JS like this?

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.

can you please show me also app.js file?

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

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,008 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.

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

works in chrome for me