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!

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

Posted May 24, 2014 7:13am by

Can't get jquery to work on website

Been watching the beginning of the jquery tutorials, but I don't use workspaces. Trying to include the basic task but nothing is happening on my site. I include my script into the HTML as

                <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>

and I've ran the HTML and CSS through a validator and there are no errors. Help, Thanks

6 Answers

May 24, 2014 8:59pm

I'm wondering if the app.js file is loading. Have you tried adding this code $("body").css( "background-color", "red" ); into the app.js file? If the background doesn't change color then there's a problem with the app.js file.

May 24, 2014 9:03pm

I tried that code in the app.js file and it worked, check the javascript console and saw no errors when I refreshed. very strange how I can't select the warning class. Thanks again for your help and quick responses, I appreciate it :)

May 24, 2014 7:56am

Did you add these lines at end of index.html file?

Did you try to add inline code to check if jquery working for example:

<script>
    $("body").css( "background-color", "red" )
</script>

Did you check if you have files in proper directories.

You file structure should like this:

..
/js
/js/app.js
index.html

Check it

May 24, 2014 2:14pm

Eliot Winchell

Couple of other tips: you don't HAVE to put type="text/javascript" in your <script> tags any longer. It's optional and all browsers default to this setting anyway. Also, unless your page is encoded with a different character set you don't need charset="utf-8" in the <script> either. This should work fine:

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

Definitely follow Marcin Lisewski's advice in this discussion to try a simple test to make sure jQuery is working.

May 24, 2014 7:27pm

still not working. Added the script you said, and when I added inline code to the html it did change the background color so I don't know what is going on but I can't do my jquery lessons if it doesn't work on my site and it's extremely frustrating. Here is the HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Winchell Associates</title>
        <link rel="stylesheet" href="css/normalize.css"/>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800' rel='stylesheet' type='text/css'/>
        <link rel="stylesheet" href="css/main.css"/>
    </head>
        <body>
            <section class="sides">
            <header>
                <a href="index.html" id="logo"><img src="img/logosmall.png" alt="logo"></a>
                <nav>
                    <ul>
                        <li><a href="index.html" class="selected">HOME</a></li>
                        <li><a href="portfolio.html">PORTFOLIO</a></li>
                        <li><a href="services.html">SERVICES</a></li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                    </ul>
                </nav>
            </header>
            <div id="wrapper">
                <h3>Welcome</h3>
                <p>Welcome to Winchell Associates, the future standard of commercial and residential design. Bruce Winchell has been designing houses for over 3 decades, with customers that are more than satisfied with their end results. Bruce works on projects such as remodeling all the way to building from the ground up. Visit the portfolio page to see previous projects, and the contact page for a custom easy to fill contact form!</p>
                <p class=".warning">Testing out jQuery!!!</p>
            </div>
            <footer>
                <a href="http://www.twitter.com/WinchellAssociates"><img src="img/twitter.png" alt="Twitter Logo"></a>
                <a href="http://www.facebook.com/WinchellAssociates"><img src="img/facebook.png" alt="Facebook Logo"></a>
                <a href="http://www.instagram.com/WinchellAssociates"><img src="img/mail.png" alt="Email Logo"></a>
                <p>&copy; 2014 Winchell Associates</p>
            </footer>
            </section>
            <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
            <script src="js/app.js"></script>
        </body>
</html>

and the jQuery: I'm trying to select the .warning class and hide it, from one of the first lessons of jquery.

//Hide Warning
jQuery(.warning).hide();

//show Warning slowly

May 24, 2014 7:31pm

You need to quote the selector .warning:

jQuery('.warning').hide();

May 24, 2014 7:33pm

tried that, still not working :c is there something wrong with the HTML?

May 24, 2014 7:36pm

You don't put the . on the class name in your HTML. For example <p class=".warning"> is wrong. You only need the . in the CSS file.

<p class="warning">Testing out jQuery!!!</p>

May 24, 2014 7:59pm

Still is visible :C Could my CSS be causing issues? That entire section is called "sides" for an effect I'm trying to do.

/*************************************
GENERAL
**************************************/

body {
    font-family: 'Open Sans', sans-serif;
}

.sides {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}


/*************************************
HEADING
**************************************/
header {
    margin: -15px 0 0 0;
}

#logo {
    padding: 10px;
    display: block;
    margin: 15px 0 0 0;
}


/*************************************
NAVIGATION
**************************************/

a {
    color: #000;
    text-decoration: none;
    font-weight: 700;
}

nav {
    text-align: center;
    padding: 0 60px
}

nav ul {
    list-style: none;
    float: right;
    margin: -70px 0 0 0;
}

nav li {
    display: inline;
    padding: 10px;
}

/*************************************
BODY
**************************************/

#wrapper {
    padding: 20px;
}


/*************************************
COLORS
**************************************/

html { 
    background-image: url("http://i.imgur.com/PuW6AdH.png");
    background-repeat: repeat;
}

.sides {
    background-color: #fff;
}

May 24, 2014 8:57pm

Have you tried opening the JavaScript console in your browser? If you use Chrome it's Command - Option - J (Mac) or Control -Shift -J (Windows/Linux). Then load the page and see if there are any errors.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Eliot Winchell

Eliot Winchell

Can't get jquery to work on website

6 Answers

Dave McFarland

Dave McFarland

Eliot Winchell

Eliot Winchell

marcinlisewski

marcinlisewski

Dave McFarland

Dave McFarland

Eliot Winchell

Eliot Winchell

Dave McFarland

Dave McFarland

Eliot Winchell

Eliot Winchell

Dave McFarland

Dave McFarland

Eliot Winchell

Eliot Winchell

Dave McFarland

Dave McFarland