javascriptjqueryfullpage.jsinview

jQuery INVIEW is not working with a class added by another function


In this first code, if you click LIKE it will add a class .loved to the active section: .section .active. (The .active class is added automatically by the fullpage plugin to the visible section).

And here you can see that the INVIEW plugin does not work.

$('#fullpage').fullpage({});

$(document).on("click", ".like", function() {
  $('.section.active').addClass("loved")
})

$('.loved').on('inview', function(event, isInView) {
  if (isInView) {
    console.log("IN VIEW")
  } else {
    console.log("GONE")
  }
});
body {
  margin: 0;
  padding: 0;
  font-size: 10vw;
  line-height: 1.2em;
}

.section {
  text-align: center;
  text-transform: uppercase;
  background: grey;
  color: #141414;
}

.like {
  color: red;
  position: fixed;
  cursor: pointer;
  top: .3em;
  right: .3em
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script>
<script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script>
<div id="fullpage">
  <div class="section">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
  <div class="section">Four</div>
</div>
<div class=like>LIKE</div>

In this second function, if I add the class .loved to the section, then the INVIEW works smoothly.
Any ideas?

$('#fullpage').fullpage({});

$('.loved').on('inview', function(event, isInView) {
  if (isInView) {
    console.log("IN VIEW")
  } else {
    console.log("GONE")
  }
});
body {
  margin: 0;
  padding: 0;
  font-size: 10vw;
  line-height: 1.2em;
}

.section {
  text-align: center;
  text-transform: uppercase;
  background: grey;
  color: #141414;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script>
<script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script>
<div id="fullpage">
  <div class="section loved">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
  <div class="section">Four</div>
</div>


Solution

  • your issue is in this line:

    $('.loved').on('inview', function(event, isInView) {
    

    Because in the first snippet you add the class "in future" you need to delegate the event to the document:

    $(document).on('inview', '.loved', function(event, isInView) {
    

    Moreover, when creating a snippet, if you need to use a github lib you need to convert from:

    https://raw.githubusercontent.com/....
    

    to:

    https://rawgit.com/....
    

    The snippet:

    $('#fullpage').fullpage({});
    
    $(document).on("click", ".like", function() {
        $('.section.active').addClass("loved")
    })
    
    $(document).on('inview', '.loved', function(event, isInView) {
        if (isInView) {
            console.log("IN VIEW")
        } else {
            console.log("GONE")
        }
    });
    body {
      margin: 0;
      padding: 0;
      font-size: 10vw;
      line-height: 1.2em;
    }
    
    .section {
      text-align: center;
      text-transform: uppercase;
      background: grey;
      color: #141414;
    }
    
    .like {
      color: red;
      position: fixed;
      cursor: pointer;
      top: .3em;
      right: .3em
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script>
    <script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script>
    
    
    <div id="fullpage">
        <div class="section">One</div>
        <div class="section">Two</div>
        <div class="section">Three</div>
        <div class="section">Four</div>
    </div>
    <div class=like>LIKE</div>