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

Robin Dykema
Robin Dykema
10,026 Points
Posted by Robin Dykema
Robin Dykema
10,026 Points

Restarted three times and can't find my error... "Animsition does not support this browser." error in the console.

I can't make the code work! I've started from scratch three times and check the console for errors. Once I start putting in the animsition classes, the website turns white. I got around this by creating two classes in one tag, but then I'd get the error in my console that says "Animsition does not support this browser."

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

Here is my main.js:

$("animsition").animsition();

In the animsition.min.css file, the animation-fill-mode is bright red. Could that be the problem?

I'm using Chrome on my macbook, and it's the most recent version.

AAAAH!!

5 Answers

Robin Dykema
Robin Dykema
10,026 Points
Robin Dykema
Robin Dykema
10,026 Points

I think I figured it out!!! I restarted my computer, then I changed the javascript files to these:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="js/animsition/jquery.animsition.min.js"></script> <script src="js/main.js"></script>

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Is it working now?

Jeff Ward
Jeff Ward
8,978 Points

Ive got the same issue. Its not running in Safari or Chrome. I get the issue:

"Animsition cannot is not supported in this browser"

How did you fix it? Just restart your computer?

Jeff Ward
Jeff Ward
8,978 Points

Ive got the same issue. Its not running in Safari or Chrome. I get the issue:

"Animsition cannot is not supported in this browser"

How did you fix it? Just restart your computer?

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

Robin, just wanted to point out that there's an error in your code. In your main.css, you're calling "animsition" as though it were a tag. You forgot the dot to indicate that you're calling a class. This might have caused your issue.

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

I had the same problem as well - was getting a "browser not supported" message in the Javascript Console in Chrome Dev Tools. At first I thought that their plugin was dated (my mistake) and I copied the source code. Then I tried it in Firefox and still no luck.

After backtracking, I realized that I forgot to add the animsition class to the div container and I had forgotten to add the CSS from the plugin.

If you're getting this error, I would just carefully go back over and review your code.

  1. Did you add the appropriate classes to the container div and three links?
  2. Is your jQuery being called BEFORE the plugin source code?
  3. Is the plugin source code being called BEFORE your own Javascript?
  4. Did you add the CSS file?

I noticed with #4 for that if you forgot that one that your links will fade, but the page will not fade.

Hope this helps! Cheers and happy coding!

Matt Topping
Matt Topping
4,527 Points
Matt Topping
Matt Topping
4,527 Points

Honestly feel so dense. I went back and looked at my div tag and had put an additional "i" into animsition. Quite the typo magnet this plugin.

Daniel Sarmiento
Daniel Sarmiento
10,265 Points
Daniel Sarmiento
Daniel Sarmiento
10,265 Points

Thank you so much! I got stuck there but after reading your comment everything went crystal clear to me.

I was missing to put the scripts, the animsition css and the class into the html.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

great job figuring it out. Please mark your comment (now answer) Best Answer so everyone knows it is resolved.

Robin Dykema
Robin Dykema
10,026 Points
Robin Dykema
Robin Dykema
10,026 Points

Jeff, look at the top answer and change the script tag to those and see if that helps!

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Switching to or adding jquery-migrate didn't work for me at all. However grabbing the latest version of animsition at https://github.com/blivesta/animsition and updating the js/css files did.