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

Posted by Sally Gradle
Sally Gradle
24,694 Points

jQuery Plugin Animsition File Not Found

When I try to view the site, I get two errors:

"Failed to load resource: 404" error for http://port-80-mg6x4342zt.treehouse.app.com/js/animsition/jquery.animsition.min.js

"Uncaught typeError: $(...).animsition is not a function" for main.js:1

Here is the index.htm;

``` html <!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="index.html" class="animsition-link">Home</a>
          <a href="work.html" class="animsition-link">Work</a>
          <a href="#" class="active animsition-link">Team</a>
        </nav>
      </div>
  </header><!--/header-->
    <div class="main row">
    <div class="grid-full">
      <div class="team">
        <h2>Meet the team</h2>
        <h4>United we stand divided we fail</h4>
      </div>
      <div class="grid-fifth">
        <img src="img/team-members/team--01.png" alt="" class="avatar" />
        <h3>Bill Bigsby IV</h3>
        <p>CEO</p>
      </div><!--/1-->
      <div class="grid-fifth">
        <img src="img/team-members/team--02.png" alt="" class="avatar"  />
        <h3>Jane Jewels</h3>
        <p>CFO</p>
      </div><!--/2-->
      <div class="grid-fifth">
        <img src="img/team-members/team--03.png" alt="" class="avatar"  />
        <h3>Doughy Digital</h3>
        <p>Lead Developer</p>
      </div><!--/3-->
      <div class="grid-fifth">
        <img src="img/team-members/team--04.png" alt="" class="avatar"  />
        <h3>Ralph Raider</h3>
        <p>Lead Designer</p>
      </div><!--/4-->
      <div class="grid-fifth">
        <img src="img/team-members/team--05.png" alt="" class="avatar"  />
        <h3>Nolan Nitro</h3>
        <p>Senior Developer</p>
      </div><!--/5-->
      <div class="grid-fifth">
        <img src="img/team-members/team--06.png" alt="" class="avatar"  />
        <h3>Donna Danger</h3>
        <p>Senior Developer</p>
      </div><!--/6-->
      <div class="grid-fifth">
        <img src="img/team-members/team--07.png" alt="" class="avatar"  />
        <h3>Rebecca Roo</h3>
        <p>Senior Designer</p>
      </div><!--/7-->
      <div class="grid-fifth">
        <img src="img/team-members/team--08.png" alt="" class="avatar"  />
        <h3>Lenny Lowes</h3>
        <p>Senior Designer</p>
      </div><!--/8-->
      <div class="grid-fifth">
        <img src="img/team-members/team--09.png" alt="" class="avatar"  />
        <h3>Eli Elfs</h3>
        <p>Designer</p>
      </div><!--/9-->
      <div class="grid-fifth">
        <img src="img/team-members/team--10.png" alt="" class="avatar"  />
        <h3>Trevor Tuesday</h3>
        <p>Junior Developer</p>
      </div><!--/10-->
      <div class="grid-fifth">
        <img src="img/team-members/team--11.png" alt="" class="avatar"  />
        <h3>Tori Traffic</h3>
        <p>Project Mangagement</p>
      </div><!--/11-->
      <div class="grid-fifth">
        <img src="img/team-members/team--12.png" alt="" class="avatar"  />
        <h3>Fido Fur</h3>
        <p>Office Manager</p>
      </div><!--/12-->
    </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> ```

The main.js is just $(".animsition").animsition();

I hope someone with sharper eyes can find my error.

Sally Gradle
Sally Gradle
24,694 Points

Okay, I tried turning it off an on again (isn't that always the first thing?) and it worked.

Daniel Santos
Daniel Santos
34,969 Points

Did you solve it?

1 Answer

David Scanu
David Scanu
20,160 Points
David Scanu
David Scanu
20,160 Points

It looks like you have a file permission issue with jquery.animsition.min.js.

Try to set permission to 644 or 755. If you don't know about file permissions I suggest you take this course : File Permissions.

Sally Gradle
Sally Gradle
24,694 Points

Thanks, David. I will check out that course.