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 Using jQuery Plugins Introducing jQuery Plugins Adding a Plugin to a Web Page

Rebecca Jensen
Rebecca Jensen
11,580 Points
Posted by Rebecca Jensen
Rebecca Jensen
11,580 Points

Getting a completely blank page (in task to link jQuery files and plugin)

The task requires that I add link to a jQuery's css and js files, create a new js file (and link to it), and call the plug-in function in that file. I've done those things, but when I preview the page, I get a completely blank page.

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Agency - A Treehouse template</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--CSS-->
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="js/animsition/animsition.min.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <div class="row container animsition">
        <header class="row header">
          <div class="grid-third">
            <a href="index.html" class="logo animsition-link"></a>
          </div>
          <div class="grid-third">
            <h1 class="description">We build apps</h1>
          </div>
          <div class="grid-third">
            <nav>
              <a href="#" class="active animsition-link">Home</a>
              <a href="work.html" class="animsition-link">Work</a>
              <a href="team.html" class="animsition-link">Team</a>
            </nav>
          </div>
      </header><!--/header-->
        <div class="row">
          <div class="grid-full">

          </div>
          <div class="main row">
            <div class="grid-third">
              <img src="img/sticker-team.png" alt="" />
              <p>United we stand divided we fail.  Meet the all star team behind the agency.</p>
              <a href="team.html" class="button">Meet the Team</a>
            </div><!--/team-->
            <div class="grid-third">
              <img src="img/sticker-work.png" alt="" />
              <p>Check our latest app builds or download them in the App Store.</p>
              <a href="work.html" class="button">Latest Projects</a>
            </div><!--/work-->
            <div class="grid-third">
              <img src="img/sticker-contact.png" alt="" />
              <p>Have questions or requests?  Feel free to contact us, we’d love hear from you.</p>
              <a href="#" class="button">Contact Us</a>
            </div><!--/contact-->
          </div>
        </div><!--/main-->
        <footer>
          <div class="row">
            <div class="grid-full">
              <p>Connect with us</p>
              <ul class="social">
                <li>
                  <a href="#" class="pink"></a>
                  <a href="#" class="light-blue"></a>
                  <a href="#" class="dark-blue"></a>
                </li>
              </ul>
            </div>
          </div>
        </footer><!--/footer-->
        </div>
        <script src="js/query-1.11.2.min.js"></script>
        <script src="js/animsition/jquery.animsition.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

Possibly relevant error in console: Uncaught ReferenceError: jQuery is not defined at jquery.animsition.min.js:8

All I have in my main.js file is this:

$(".animsition").animsition();

Any idea what's going on?

Thanks

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

It might take the whole project to analyze this kind of issue. You could post a snapshot of your workspace.

Rebecca Jensen
Rebecca Jensen
11,580 Points
Rebecca Jensen
Rebecca Jensen
11,580 Points

Hmm, yes it looks like 'query-1.11.2.min.js' (don't know what the beginning 'j' is not there) and my 'main.js' are not loading.

I've made references to jQuery in my files... but is there something else I need to do to load/download/upload jQuery? I thought that the files needed were already in the workspace.

Rebecca Jensen
Rebecca Jensen
11,580 Points
Rebecca Jensen
Rebecca Jensen
11,580 Points

Ah, here's a snapshot of my workspace: https://w.trhou.se/1g0yyw5gri

Thanks!

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

I see two issues.

One is visible above, in this line:

        <script src="js/query-1.11.2.min.js"></script>

The filename is missing the letter "j" right after the slash.
The correct filename would be: "js/jquery-1.11.2.min.js".

The other issue can only be seen in the snapshot (or workspace). The file main.js is located in the wrong folder. It's currently in the main folder where index.html is, but it should be moved into the "js" sub-folder. Alternatively, the "js/" prefix could be removed from the script tag which loads it.