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

John Lukacs
John Lukacs
26,806 Points
Posted by John Lukacs
John Lukacs
26,806 Points

When I add the class animstion the file does not display

Do you have any idea why this behavour is causing by links and content to be hidden

7 Answers

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points 
<body>
<div class="animsition">
<div class="container">
<img src="11.png" alt="star of david">
<img src="ii.png" alt="Joseph">

    <ul class="nav  nav-pills">
    <li><a href="index.html" class="animsition-link" >Home</a>
    </li>
    <li><a href="Third.html" class="animsition-link">Third Temple</a></li>

    <li><a href="Amos.html" class="animsition-link">Amos</a></li>
    <li><a href="ezra.html" class="animsition-link">Ezra</a></li>
    <li><a href="obadiah.html" class="animsition-link">Obadiah</a></li>
    <li><a href="Elijah.html" class="animsition-link">Elijah</a></li>
    <li><a href="Babylon.html" class="animsition-link">Babylon</a></li>
    <li><a href="Ezekial.html" class="animsition-link">Ezekial</a></li>
    </ul>
<div class="row">
<div class="col-lg-6">
<img src="tt.png" alt="title">
</div>
<div class="col-lg-6">
<h2>Click on the navagation links to understand the secrets</h2>
</div>
</div>
<audio controls autoplay>
<source src="final.mp3" type="audio/mp3">
</audio>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="animsition/animsition.min.js"></script>

</body>
</html>

Also Im using bootstrap

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

What is up with the code I posted what does mean

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

Um yes maybe I deleted all my work and started all over again. I am new to plugins so I want to try on a smaller site. But you don't have a quick fix to why adding that class to the main div container resulted in my entire site not showing aside from a background pick

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

!~~~ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Trial</title>

<link rel="stylesheet" href="animsition/animsition.min.css"> <link rel="stylesheet" href="css.css"> </head>

<body> <div class="animsition container"> <a href="page2.html" class="animsition-link">animsition link 1</a> <a href="./page2" class="animsition-link">animsition link 2</a> </div>

<script sr src="jquery-1.11.3.js"></script> <!-- animsition.js --> <script src="../dist/js/animsition.min.js"></script> <script src="animsition/animsition.min.js"></script> </body> </html>

THe class hides all the link its still doing it
John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

Yes as soon as I remove the class everything show's I tried to post my code again but it did not allow me to

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

Had to add the java script $(".animsition").animsition() Im a newb Im a newb

Jack Hegarty
Jack Hegarty
9,381 Points
Jack Hegarty
Jack Hegarty
9,381 Points

I was having this same problem.

I fixed it by double checking that the plugin CSS file was linked correctly:

if you followed along you should have:

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