jQuery Plugins - Adding plugin to web page: Follwed instructions to a T. When I refresh the page, it's blank.

Question

edit: Figured out the problem. Solution at the bottom edit. Leaving this here for whoever it may help anyway.

original post:

I've downloaded all the files, I've added the script and link tags and pointed them to the appropriate files. When I refresh the page, it's blank. I've tried multiple fixes and nothing seems to work other than removing the animsition class name.

I see that other folks have had issues and I've tried all the fixes that I can think of and I can't get it to show anything. Here's the code.

<!-- this is what I have in the head for the link tags -->
<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>

<!-- this is what I have for the script tags at the end -->

     <script src="js/jquery-1.11.2.min.js"></script>
       <script src="js/animsition.min.js"></script>
        <script src="js/main.js" type="text/javascript"></script>

And here's the div with the class

<div class="row container animsition">
        <header class="row header">
          <div class="grid-third">
            <a href="index.html" class="logo"></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-->

//this is the code in the main.js file

$(".animsition").animsition();

// I also tried pasting in the code that's on the animsition page which is below

/*
$(document).ready(function() {
  $(".animsition").animsition({
    inClass: 'fade-in',
    outClass: 'fade-out',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^=#])'
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});
*/

Upon refreshing, the page is entirely blank. When I remove either the animsition.min.css file OR the animsition class from the div, the page displays.

If I add either the class back in by itself or just the animsition.min.css file by itself, the page displays properly.

With both the animsition.min.css link AND the animsition class in the div, the page will not render.

Any suggestions??

Thanks!

Cheers,

Huck -

Edit: Nvm, I fixed it. I didn't have the proper path to the animsition.min.js file in the script tags above. Notice that in the above example I had src='js/animsition.min.js' instead of the proper path which is src='js/animsition/animsition.min.js'. Huge difference. It's always something remedial, aint it?

Welcome to the Treehouse Community

Looking to learn something new?

huckleberry

huckleberry

jQuery Plugins - Adding plugin to web page: Follwed instructions to a T. When I refresh the page, it's blank.

Per Karlsson

Per Karlsson

huckleberry

huckleberry

Per Karlsson

Per Karlsson