Adding and removing classes depending on other elements

Question

So I have carousel with slides (works on fullPage.js):

<div id="myContainer">
  <div class="section" data-anchor="skynet">
    <div class="slide one" data-anchor="main">
      Slide 1
    </div>

    <div class="slide two" data-anchor="about_us">
      Slide 2
    </div>

    <div class="slide three" data-anchor="faq">
      Slide 3
    </div>

    <div class="slide four" data-anchor="news">
      Slide 4
    </div>
  </div>
</div>

And I have some blocks with backgrounds

<div class="bg-main" id="bgOne"></div>
<div class="bg-main" id="bgTwo"></div>
<div class="bg-main" id="bgThree"></div>
<div class="bg-main" id="bgFour"></div>

Slides swaps by adding class active to blocks with class .one, .two etc. I try to add class to blocks with background depend on active slide. For example - if .slide.two has class .active, add class to block #bgTwo. Here my current JS. It doesn't work:

<script type="text/javascript">
    $(document).ready(function(){ 
      if ( $('#myContainer .one').hasClass('active') ) {
        $('.bg-main').removeClass('active');
        $('#bgOne').addClass('active'); 
        } else if ( $('#myContainer .two').hasClass('active') )
           {
          $('.bg-main').removeClass('active');
          $('#bgTwo').addClass('active');
        }
      });
    </script>

Where exactly are all of `.bg-main` in respects to `#myContainer`? — zer00ne, Jun 24 '17 at 16:08
I think your problem is that you want to monitor the state of myContainer, reacting on changes in the active class. Your code actually runs only once the page is loaded. It is probably properly executed but it does not recognize if something changes later on. You need event handling, as explained here: https://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed — Gegenwind, Jun 24 '17 at 16:11

score 1 · Answer 1 · answered Jun 24 '17 at 16:46

So i found out that fullpage.js use event afterSlideLoad. So thats my solution:

<script type="text/javascript">
      $(document).ready(function() {
        $('#myContainer').fullpage({
          anchors: ['skynet'],
          menu: '#menu',
          scrollingSpeed: 500,
          normalScrollElements: '.modal',
          scrollOverflow: true,
        

          afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
          var loadedSlide = $(this);

          if(slideIndex == 0){
            $('.bg-main').removeClass('active');
            $('#bgOne').addClass('active');}

          if(slideIndex == 1){
            $('.bg-main').removeClass('active');
            $('#bgTwo').addClass('active');}

          if(slideIndex == 2){
            $('.bg-main').removeClass('active');
            $('#bgThree').addClass('active');}

          if(slideIndex == 3){
            $('.bg-main').removeClass('active');
           $('#bgFour').addClass('active');}
          }
        })
      });
    </script>

Class is added only after the slide is changed, and not during the process itself. The background does not change as fast as I'd like, but this is the best thing I could achieve.

The reason why it's slow is because you are targeting individual targets with conditions and you are waiting for the slide to reach its destination. See my answer which uses the `onSlideLeave` callback — zer00ne, Jun 24 '17 at 16:59

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Use the callback onSlideLeave

Demo

$(document).ready(function() {
  $('#fullPage').fullpage({
    onSlideLeave: function(link, secIdx, sldIdx, dir, next) {
      $('.test .bg-main').removeClass('active');
      $('.test .bg-main').eq(next).addClass('active');
    }
  });
});

.slide {
  text-align: center
}

.test {
  position: fixed;
  top: 75%;
  right:calc(50% - 220px);
}

.bg-main {
  height: 30px;
  width: 100px;
  background: grey;
  display:inline-block;
  text-align:center;
  outline:1px solid #fff;
  margin:0;
}

.one,
#bgOne.active {
  background: #fc0;
}

.two,
#bgTwo.active {
  background: #f00;
}

.three,
#bgThree.active {
  background: #0f0;
}

.four,
#bgFour.active {
  background: #00f;
}

<link href='https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.css' rel='stylesheet'>

<div id="fullPage">
  <div class="section" data-anchor="skynet">
    <div class="slide one" data-anchor="main">
      Slide 1
    </div>

    <div class="slide two" data-anchor="about_us">
      Slide 2
    </div>

    <div class="slide three" data-anchor="faq">
      Slide 3
    </div>

    <div class="slide four" data-anchor="news">
      Slide 4
    </div>
  </div>
</div>
<div class='test'>
  <div class="bg-main active" id="bgOne">1</div>
  <div class="bg-main" id="bgTwo">2</div>
  <div class="bg-main" id="bgThree">3</div>
  <div class="bg-main" id="bgFour">4</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.js'></script>

Thx for ur answer, but will ur code work if i use anchors to slides? I mean links to certain slides? I have menu with navigation to all slides so they can load not only by round (left or right). For example i can open 1 slide, then 3 - will the right block with background get class or just next block? — EmptySnake, Jun 25 '17 at 13:02
@EmptySnake It's better than that. Under normal operation, slide1 to slide3 will trigger the `slideLeave` event regardless whether it was from clicking the arrows, the keyboard, touch, etc. One of the built-in parameters of the `onSlideLeave` callback is the index number of the destination slide. The way I wrote the callback function makes it so **every time** the slider goes to another slide the `.active` class will be on the destination slide. — zer00ne, Jun 25 '17 at 13:52

Sampgun · Answer 3 · 2017-06-24T16:36:32.430

0

The perfect solution is to extend the fullpage.js to handle the feature. This is a workaround:

<script type="text/javascript">
    var updateClasses = function(){
        var activeClass = 'active';
        var eq = $('#myContainer').children(activeClass).eq();
        var bgMain = $('.bg-main').removeClass(activeClass);
        bgMain.eq(eq).addClass(activeClass);
    }; 
    $(document).ready(function(){
         $(".fp-controlArrow").on("click.updateClasses", function(){
             updateClasses();
         });
    });
</script>

edited Jun 24 '17 at 16:36

answered Jun 24 '17 at 16:13

Sampgun

2,822
1
21
38

Still only runs once, won't update when the slides change – Rick Calder Jun 24 '17 at 16:20
How does the slider work? it is custom or it is a plugin? – Sampgun Jun 24 '17 at 16:22
I have no idea, you'd have to ask that on the question itself. – Rick Calder Jun 24 '17 at 16:24
Does the link come with any class? – Sampgun Jun 24 '17 at 16:25
Its plagin fullpage.js [link to homepage](https://github.com/alvarotrigo/fullPage.js). – EmptySnake Jun 24 '17 at 16:32
I edited the question...but to do what you ask the right way is not this. It would be very long to do. – Sampgun Jun 24 '17 at 16:36

Adding and removing classes depending on other elements

3 Answers3

Demo