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 trialSusan Rusie
10,671 PointsMy 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
Treehouse Moderator 27,696 PointsYou 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>
Rich Donnellan
Treehouse Moderator 27,696 PointsIs 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
Susan Rusie
10,671 PointsI 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
Treehouse Moderator 27,696 PointsDid 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>
Susan Rusie
10,671 PointsNo, 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
Treehouse Moderator 27,696 PointsHey 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?
Susan Rusie
10,671 PointsThat 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
14,261 PointsSusan, 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!
Susan Rusie
10,671 PointsKristy,
Thanks for the information, but I did get my plugin working. I appreciate your input, though.
Todd de Quincey
2,086 PointsBest response! Thanks
Tom Riddle
6,088 PointsNot 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
Courses Plus Student 19,571 Pointsjs/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
14,047 PointsI 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.
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 PointsI had the same problem and turned out I hadn't saved my main.js file.. oops.
Susan Rusie
10,671 PointsSusan Rusie
10,671 PointsI 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
Treehouse Moderator 27,696 PointsRich Donnellan
Treehouse Moderator 27,696 PointsMinified 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.Susan Rusie
10,671 PointsSusan Rusie
10,671 PointsAdding that snippet worked, so my plugin is now working the way it should. Thanks again for your time and your help.
Rich Donnellan
Treehouse Moderator 27,696 PointsRich Donnellan
Treehouse Moderator 27,696 PointsMy pleasure! Best of luck on your coding journey.