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

Question

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>

Answer 1 · 2016-05-25T01:56:02Z

May 25, 2016 1:56am

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>

Answer 2 · 2016-05-25T01:02:46Z

May 25, 2016 1:02am

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

Answer 3 · 2016-05-25T01:36:15Z

May 25, 2016 1:36am

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>

Answer 4 · 2016-05-25T00:49:12Z

May 25, 2016 12:49am

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?

Answer 5 · 2016-05-27T12:28:30Z

May 27, 2016 12:28pm

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!

Answer 6 · 2016-09-12T17:15:27Z

September 12, 2016 5:15pm

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

Answer 7 · 2017-03-19T16:45:18Z

March 19, 2017 4:45pm

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.

Answer 8 · 2017-06-05T11:31:19Z

June 5, 2017 11:31am

I had the same problem and turned out I hadn't saved my main.js file.. oops.

Welcome to the Treehouse Community

Looking to learn something new?

Susan Rusie

Susan Rusie

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

8 Answers

Rich Donnellan

Rich Donnellan

Susan Rusie

Susan Rusie

Rich Donnellan

Rich Donnellan

Susan Rusie

Susan Rusie

Rich Donnellan

Rich Donnellan

Rich Donnellan

Rich Donnellan

Susan Rusie

Susan Rusie

Rich Donnellan

Rich Donnellan

Susan Rusie

Susan Rusie

Rich Donnellan

Rich Donnellan

Susan Rusie

Susan Rusie

Kirsty Pollock

Kirsty Pollock

Susan Rusie

Susan Rusie

Todd de Quincey

Todd de Quincey

Tom Riddle

Tom Riddle

Anthony Domina

Anthony Domina

Cosimo Scarpa

Cosimo Scarpa

Kate Ross

Kate Ross