CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EmptySnake
EmptySnake

Reputation: 129

Adding and removing classes depending on other elements

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>

Upvotes: 1

Views: 113

Answers (3)

zer00ne
zer00ne

Reputation: 43880

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>

Upvotes: 1

EmptySnake
EmptySnake

Reputation: 129

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.

Upvotes: 1

Sampgun
Sampgun

Reputation: 2977

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>

Upvotes: 0

Related Questions