4

I'm on CodeIgniter with Bootstrap and I have a problem with wow.js, only items in viewport are shown instead on scroll down all items are there but the visibility is equal to hidden and doesn't change it.

The problem is that I'm on a scrollable section.

UPDATE

I found a workaround here, so for the purpose I used the wow.js for the animation and the isInViewport.min.jsfor the triggering.

My head:

<head>
  <link rel="stylesheet" href="css/animate.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">            </script>
  <script src="js/wow.min.js"></script>      
</head>

My template:

        <section  id="scrollab" class="scrollable  w-f-md" style="position:fixed; z-index:1">  
                  <div id="target"  style="height:100%;">                  
                    <?php getPage($page); ?>
                  </div> <!-- /target -->
        </section>

My view: (it's the page target)

<!DOCTYPE html>  
<script src="isInViewport.min.js"></script>
<div class="row row-sm padder-lg ">
    <?php
    foreach ($top->feed->entry as $key => $value) 
    {
        $value->title->label = str_ireplace( "- ".$value->artist->label, "",  $value->title->label);
        if($key >= $this->config->item("items_top"))
            continue;
        $image = $value->image[2]->label;
        if($image == '')
            $image = base_url()."assets/images/no-cover.png";
        $image = str_ireplace("170x170", "200x200", $image);
    ?>      
    <div class="wow bounceInUp col-sm-4" style="visibility:hidden;">
        <div class="item " >
            <div class="pos-rlt ">
                <figure class="effect-main-2">
                    <img class="img-full" src="<?php echo $image; ?>"/>                     
                    <figcaption>
                        <div style="overflow:hidden;"></div>
                        <div class="item-overlay opacity">
                            <span class="text-center">
                                <i class="icon-control-play"></i>    
                            </span>                
                        </div>                       
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>      

    <script>
       new WOW().init();
    </script>

And then, on the same view as suggested, I added this script:

    <script>
      var scrollable = $('#scrollab');
          scrollable.on('scroll.wow', function(){
          scrollable.find('.wow:not(.animated):in-viewport').removeAttr('style').addClass('animated');
        }));
    </script>

</div>

Now everything works fine, thanks to you all.

NineCattoRules
  • 2,253
  • 6
  • 39
  • 84
  • Did you check this [post](http://stackoverflow.com/questions/23531064/wow-js-happens-on-page-load-and-not-on-scroll)? – anpsmn Apr 08 '15 at 04:49
  • @anpsmn Hi, yes I saw and try almost everything but nothing has changed – NineCattoRules Apr 08 '15 at 07:39
  • Difficult to say until there is a link to the actual page or a fiddle that reproduces it. Try to remove the class `animated` from the div and check. I guess wow.js adds the `animated` class when you scroll. – anpsmn Apr 08 '15 at 07:51
  • @anpsmn that class is in the only overlay...I just added the link to my website – NineCattoRules Apr 08 '15 at 08:54
  • 1
    Reading this [issue](https://github.com/matthieua/WOW/issues/61) I guess it could be that a script is not letting wow's scroll handler to be called. You can try removing a plugin that uses scroll like the custom scrollbar on the site. Best is to create a new issue there on [their](https://github.com/matthieua/WOW/issues) page. – anpsmn Apr 08 '15 at 09:58
  • @anpsmn thanks to your suggest, I spoke with the maker, and found a possible solution here [link](https://github.com/matthieua/WOW/issues/65#issuecomment-87470093) But I'm not able to workaround, just try it but it's using a jQuery and I have not enough knoledge – NineCattoRules Apr 08 '15 at 12:00
  • 2
    I try it out (http://jsfiddle.net/tfLp17oz/) and everything seems to be working fine. To help you diagnose where the problem is try some of the following: 1) make sure there are no JS error when page is loaded, and when the section is scrolled 2) make sure that the last script (with the scrollabe fix) is executed after WOW.init. 3) Add "console.log('test');" after the "scrollable.find" 4) Remove the "overflow: scroll" for #scrollab and make sure the animations work. This way we can get closer to finding the problem. – Chavdar Slavov Apr 09 '15 at 03:04
  • @ChavdarSlavov Thanks for the Fiddle! I don't know what it's wrong, I just updated my question, the scrollable section is in my template, instead my items to display are on a page view – NineCattoRules Apr 09 '15 at 15:16
  • 1
    your error indicates the inviewport js is not loaded – David Nguyen Apr 09 '15 at 15:29
  • 1
    In my jsfiddle example i use this plugin http://www.appelsiini.net/projects/viewport it works fine, it should fix your issue. – Chavdar Slavov Apr 09 '15 at 15:34
  • @ChavdarSlavov I love you guys! Finally I found out the problem...I don't know why but in my particular case I needed to add the `isInViewport.min.js` directly in the view (add it in the header didn't work) – NineCattoRules Apr 09 '15 at 15:41
  • 1
    Yep, the simplest errors are harder to find. :) – Chavdar Slavov Apr 09 '15 at 15:43

1 Answers1

0

I think i was able to reproduce and solve your issue. Basically :in-viewport not is included in jquery pseudo selectors. So you need a plugin like http://www.appelsiini.net/projects/viewport for it to be able to work properly. Also make sure this plugin is loaded in your page.

Here is a working example for the :in-viewport http://jsfiddle.net/tfLp17oz/

Chavdar Slavov
  • 865
  • 8
  • 22