1

I'm trying to make effect in my page using Animsition plugin but that does not work. Here is my code:

<h:head>
<h:outputStylesheet library="css" name="bootstrap.min.css"></h:outputStylesheet>
 <h:outputStylesheet library="css" name="sandbox.css"></h:outputStylesheet>
</h:head> 
<h:body> 
  <div class="animsition">

    <div class="item bg-yellow">
      <h1>Animsition: Sandbox</h1>
    </div>
    <h2>Defaults</h2>
    <h2>Overlays</h2>
    <ol>
      <li><a class="animsition-link" href="overlay1.html">Overlay1</a></li>
      <li><a class="animsition-link" href="overlay2.html">Overlay2</a></li>
    </ol>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

 <h:outputScript library="assets/jquery" name="animsition.min.js" target="head"></h:outputScript>
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('.animsition').animsition({
      inClass:'zoom-in-sm',
      outClass:'zoom-out-sm'
    })
    .one('animsition.inStart',function(){
        jQuery(this).append('<h2 class="target">Callback: Start</h2>');
      console.log('event -> inStart');
    })
    .one('animsition.inEnd',function(){
        jQuery('.target', this).html('Callback: End');
      console.log('event -> inEnd');
    });
  });
        </script>
</h:body>

knowing bootstrap.min.css, sanbox.css are under webapp/resources/css. And animsition.min.css is under webapp/assets/jquery

Manel Chaabene
  • 187
  • 1
  • 2
  • 14
  • First of all, stop using `library` as long as you aren't developing a component library (such as PrimeFaces). Use `name="css/animsiton.css"` etc instead. As to your concrete problem, it's likely caused by `animsition.js` which generated/guessed incorrect CSS paths. Either the JS file itself has to be modified, or you have to include the `animsition.js` via a regular ` – BalusC Apr 20 '16 at 09:59
  • and why do you include jquery twice? (different versions) – Kukeltje Apr 20 '16 at 10:13
  • It's typing error, I have edited my post. – Manel Chaabene Apr 21 '16 at 09:06
  • The error in your current question title is just a consequence of a 404 on animsition.min.js. Is this helpful? http://stackoverflow.com/questions/8367421 And again, please stop using `library` as long as you aren't developing a component library. It will only confuse yourself. A "library" is not a "subfolder". – BalusC Apr 21 '16 at 09:13
  • I have removed library as you said but it still not working. I have not idea how to include animsition.min.js if it is not working like this. – Manel Chaabene Apr 21 '16 at 09:30
  • Abuse of `library` is a different problem which just needed to be banned from the Internet. Coming back to your concrete problem, have you read and understood the 1st comment? – BalusC Apr 21 '16 at 12:54

0 Answers0