Jquery inview adding class to last element

Question

Jquery inview adding class to last element

650 Views Asked by brandozz At 06 October 2015 at 03:23

I'm trying to use the jquery inview plugin to add a class to an element when it's within the viewport. For some reason the plugin in only adding the class to the very last element even though the other elements are clearly visible in the viewport. Below is my code:

html:

<div class="container-fluid">
     <article class="entry"></article>
     <article class="entry"></article>
     <article class="entry"></article>
     <article class="entry"></article>
     <article class="entry"></article>
     <article class="entry"></article>
</div>

jquery:

$(function() {
    $('.entry').bind('inview', function (event, visible) {
        if (visible) {
            $(this).addClass('show-post');
        }
    });
});

Original Q&A

There are 1 best solutions below

**Suchit kumar** · Answer 1 · 2015-10-06T04:36:35.137000

Put you script inside ready:I'm changing the color to green to show the effect that the class show-post is added.

<!DOCTYPE html>
<html>
<head>
  <title>jquery.inview - Example</title>
  <meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script src="https://protonet.info/wp-content/themes/protonet/js/jquery.inview.js"></script>

<style>
.show-post{
color:green;
}
</style>
</head>
<body>
<div class="container-fluid">
     <article class="entry">hi</article>
     <article class="entry">sfsdf</article>
     <article class="entry">sdfsd</article>
     <article class="entry">sdfds</article>
     <article class="entry">sdfds</article>
     <article class="entry">sdfs</article>
</div>
</body>
<footer>
<script>
$(document).ready(function() {
 $('.entry').bind('inview', function (event, visible) {
     if (visible) {
         $(this).addClass('show-post');
     }
 });
 
 });
</script>
</footer></html>

Jquery inview adding class to last element

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in INVIEW

Trending Questions

Popular # Hahtags

Popular Questions