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

My plugin isn't working. I think I know why, but want to make sure.

I am doing this project in Notepad++. I have done all the programming exactly as this video instructed but I just get a blank page. As far as I can see, I don't see any typos in the code. I downloaded the zip file for this video and had to create the main.js file in Notepad++, but I noticed it is separate from the js file that came with the project downloads. So what I am seeing in the folder I saved the files in is this list as follows:

|— css
|— img
|— js
|— index.html
|— main.js
|— team.html
|— work.html

Does that file need to be nested inside the js project file for this to work properly? If so, how do you do that? Also, I am posting my code just in case I did leave something else. When I checked the developer tools for errors, it would say: "Failed to load resource: file not found". If I refreshed the browser, it would say :"ERROR - file not found" but then it would navigate to the folder my project files were saved in. The file obviously exists, but the browser says otherwise.

$(".animsition").animsition();
<!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/jquery-1.11.2.min.js"</script>
    <script src="js/animsition/jquery.animsition.min.js"></script>
    <script src="js/main.js"></script>
    </body>
</html>

8 Answers

Rich Donnellan
Rich Donnellan
25,780 Points

You can download the latest code at jquery.com and find information on how to link straight to it (no download required and preferred) at code.jquery.com.

Here is the snippet you want to use in place of the current jQuery source:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

I haven't downloaded this yet, but I noticed there was a jquery-2.2.4 version that was uncompressed or minified on https://code.jquery.com. Which one do I click on? Also, my understanding, from what I read, is that I will need to put the jquery-2.2.4.min.js file inside the animsition folder within the js folder of the project files and then link it with the jQuery source code you provided and everything should work as it supposed to. Is this correct? Also, do I leave the jquery-1.11.2.min js inside the project files since it was a part of the downloaded project files and just not reference it or jusst delete it? I just want to be sure so I can get this project will work the way it is supposed to work. Thanks for all of your help. It is greatly appreciated.

Rich Donnellan
Rich Donnellan
25,780 Points

Minified code is for production use; uncompressed is the human readable version (perfect for understanding what it does).

You don't need to download anything or physically need any jQuery file in a folder when using the jQuery CDN (Content Delivery Network). Just use the code snippet I provided above in place of this:

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

As long as this comes before any other <script> references, you should be good to go.

Adding that snippet worked, so my plugin is now working the way it should. Thanks again for your time and your help.

Rich Donnellan
Rich Donnellan
25,780 Points

My pleasure! Best of luck on your coding journey. :smile:

Rich Donnellan
Rich Donnellan
25,780 Points

Is this file also in the correct spot? Notice this should be in the animsition folder within the js folder.

<script src="js/animsition/jquery.animsition.min.js"></script>

Ideal js folder structure:

|— css
|— img
|— js
  |— animsition
    |— jquery.animsition.min.js
  |— jquery-1.11.2.min.js
  |— main.js
|— index.html
|— team.html
|— work.html

I did figure out how to move the main.js into the js project file by left clicking the mouse and dragging it into that file. The problem is when I click on the js file, the main.js appears at the bottom of sub-file, which already had the "animsition" and jqueriry. animsition.min.js nested inside. What I see when I click inside the js project file appears in the same order as you displayed. I did refresh the page and it still isn't working. I went to the developer tools, refresehd the browser, and it said "Failed to load resource: file not found". I am at a loss. Do you know what might be causing this?

-

Rich Donnellan
Rich Donnellan
25,780 Points

Did you download jQuery and place that in the js folder? (Updated file structuring to include this.)

Per this line:

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

No, I hadn't done that. How do I do that? I'm not really sure since I am just learning how to code.

Rich Donnellan
Rich Donnellan
25,780 Points

Hey Susan,

The key is this in your code:

<script src="js/main.js"></script>

Your source path must be where the actual file is located; in this case, the js folder. If for whatever reason you want it in the root of the project, the code would simply be:

<script src="main.js"></script>

Make sense?

That does make sense and I tried changing the code to the following, but it still didn't work. Even refreshing the page didn't work. Is there anything else I could try?

<script src="main.js"></script>
Kirsty Pollock
Kirsty Pollock
14,260 Points

Susan, maybe this helps. The file paths on the html must exactly match the folder and file structure that you have. This may be a little different to mine, but I have written out mine below.

// folder structure
css
  main.css
  normalize.css
img
js
  animsition
    animsition.min.css
    jquery.animsition.min.css
    main.js
index.html
team.html
work.html

The most relevant bits are:

js/animsition/animsition.min.css
js/animsition/jquery.animsition.min.css
js/main.js

It is a little bit wierd becasue the css files are under the js folder not the css folder (which you may havebeen used to in previous lessons).

If you have your main.js at the a same level as index.html (which I think it sounds like you might have?), then you need to use just

main.js

rather than

js/main.js

Also check your spelling because "animsition" is pretty easy to type wrong, I found!!

The relevant parts of the index.html should look like this..

...

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

...

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

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"     
                integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
                crossorigin="anonymous">
        </script>
        <script src= "js/animsition/jquery.animsition.min.js"></script>
        <script src= "js/main.js"></script>

Lastly, after the very first stage, the transitions only work from the menu items, not the buttons, and only from the index page (because that is the only one where we have changed it to use the animsition classes). So, if you click "team" and then "work" it will only do the fading transition between "index" and "team" and not "team" and "work". If you go back to "index" before going to "work" then that will do the fading transition. That puzzled me for a second until I thought about it.

Best of luck!

Kristy,

Thanks for the information, but I did get my plugin working. I appreciate your input, though.

Tom Riddle
Tom Riddle
6,088 Points

Not sure if this stuff is now outdated but if I load this workspace into Edge on Win10 the preview just shows the spinning circle icon in the middle then stops and that's all I get. Under SRWare Iron (Chrome varient) the console logs "Animsition does not support this browser." which is rubbish when it's basically chrome and everything upto this point has worked. If I comment out the following "return methods.destroy.call(this);" and try again the console logs "SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead." If I tell the supportCheck function to always return true, I get the spinning circle again and nothing else. I changed the css/js links to goto CDNs for jquery 2.2.4 and animsition 3.5.2 but still no luck. Eventually I seem to have made it work by editing the main.js to have this "unSupportCss : [ ]" option ... https://github.com/blivesta/animsition/issues/44#issuecomment-106370317

Anthony Domina
PLUS
Anthony Domina
Courses Plus Student 19,571 Points
js/animsition/animsition.min.css

This is what was causing mine not to work. I wasn't including the animsition folder in the link to my stylesheet. Once included the plugin worked perfectly.

Cosimo Scarpa
Cosimo Scarpa
14,047 Points

I have the same problem. I put this in index.html

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="js/animsition/animsition.min.css">
        <link rel="stylesheet" href="css/main.css">

but I get a blank page.