Jquery Adding a class when element is in view

Question

have this code which checks if the class is in view and if it is it adds a class, but for some apperent reason it does work. I'm trying to add the class box-active only if the divs in view.

i've been at it for a while now, can you guys tell me what's wrong with the code? and a possible fix or how i can fix it.

codepen: http://codepen.io/salman15/pen/rLRZrJ

Jquery

 $(document).ready(function() {

  $('#next').click(function() {
    if ($('.in1,.in2,.in3').next('.t1,.t2,.t3').length) {

      $('.t1').animate({
        left: '-1000px'
      })
      $('.in1').removeClass('in1')
        .next('.t1')
        .addClass('in1');


      $('.t2').animate({
        right: '-1000px'
      })
      $('.in2').removeClass('in2')
        .next('.t2')
        .addClass('in2');

      $('.t3').animate({
        bottom: '-1000px'
      })
      $('.in3').removeClass('in3')
        .next('.t3')
        .addClass('in3');

    }
  });

  $('#prev').click(function() {
    if ($('.in1,.in2,.in3').prev('.t1,.t2,.t3').length) {

      $('.t1').animate({
        left: '-1000px'
      })
      $('.in1').removeClass('in1')
        .prev('.t1')
        .addClass('in1');


      $('.t2').animate({
        right: '-1000px'
      })
      $('.in2').removeClass('in2')
        .prev('.t2')
        .addClass('in2');

      $('.t3').animate({
        bottom: '-1000px'
      })
      $('.in3').removeClass('in3')
        .prev('.t3')
        .addClass('in3');

    }
  });

});

$.fn.isVisible = function() {
    // Am I visible?
    // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the
    // essential checks. If an image is 0x0, it is  technically not visible, so it should not be marked as such.
    // That is why either width or height have to be > 0.
    var rect = this[0].getBoundingClientRect();
    return (
        (rect.height > 0 || rect.width > 0) &&
        rect.bottom >= 0 &&
        rect.right >= 0 &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
};
if ($('.box').isVisible()) {
            setTimeout(function(){
             $('.box').removeClass('box-active')}, 4000);
}  else{
              setTimeout(function(){
             $('.box').addClass('box-active')}, 4000);
};

Why have you added your full project ? :P Can you just add the relevant code — Amar Singh
– Amar Singh, Commented Aug 19, 2016 at 12:30
You're repeating click functions over and over and over... the jquery is kind of a mess. You only need ONE click function.. then the if statements. The way you have it, I'm surprised things happen as you expect. — Scott
– Scott, Commented Aug 19, 2016 at 12:34

Chris · Accepted Answer · 2016-08-19 13:04:03Z

2

Why don't you use the finishing events from .animate? You can easily add a class to any element after one of your animation is completed.

reference: http://api.jquery.com/animate/

Example:

var clicked = 1;
$("button").click(function(){
  /* just for the demo */
 if(clicked==4){
   clicked = 2;
   $(".inner").css("margin-left","0px");
   }
 else clicked++;
  /* - */
  
  if($(".box-active").length == 1) $(".box-active").removeClass("box-active");
  
  $(".inner").animate({marginLeft :"-=250px"},"slow",function(){
    //WHEN ANIMATION IS COMPLETE
    // Add the box-active class
    $("div.a"+clicked+"").addClass("box-active");
  });

});

.outer{
  width:250px;
  height:100px;
  overflow:hidden;
}
.inner{
  width:1000px;
  height:100px;
  margin-left:0px;
}
.inner > div{
  width:250px;
  height:100px;
  float:left;
}

.a1{
  background:blue;
}
.a2{
  background:red;
}

.a3{
  background:green;
}
.a4{
  background:grey;
}

.box-active{
  background:cyan !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Next</button>
<div class="outer">
  <div class="inner">
    <div class="a1 box-active"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
  </div>  
</div>

answered Aug 19, 2016 at 13:04

Chris

364 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Salman Over a year ago

i want to add an class when the element is in view, but it's not working. the transition code works fine.

Chris Over a year ago

I'm not pretty sure what you're looking for.. There are also events for the start of an animation and a step/progress event that's fired while animating. If you're looking for the moment the first pixel is visible while animating, then you should try this: get the users window height&width, get the position of your currently animated element by progresssteps and check if the top/right/left/bottom (depends on from which side your element is sliding in) side is already visible in the user's view

Chris Over a year ago

Ok, didn't see you're already doing that. So what you're checking if $(.box) is visible, THE PROBLEM is you've got 3 div's with that class, so it's always checking the last one, and if it's not visible at initial it will always say it's not, even if the first one is. Same thing when you're adding your class. $(".box").addClass/removeClass will apply to all or only the last .box

Salman Over a year ago

It checks if it's in the view box, my code adds the parent therefore als it's child in to the viewport, which should ultimatly add the class right? or what is the way to get the job done right?

Chris Over a year ago

since you're already using a static layout, why not using box-1,box-2, box-3. Or use a slector like $("#page-1 .box"), $("#page-2 .box")... I'm still struggeling with your code, especially your html looks more complicated than it should. Also, why are you using jquery AND css animations? I also see that you're using absolute and relative units (width:43% and then left:-1000px) Why not use left:-43% then you can say as soon as the user i clicking next/prev and the item which is moving will be visible at that moment. OR: back to my first advice, if you're using unique box-selectors,

|

Collectives™ on Stack Overflow

Jquery Adding a class when element is in view

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related