CODEWITHSUNDEEP
javascriptjqueryhtmlcssfullpage.js
user12125431
user12125431

Reputation:

Hide or show element when body has a class using Fullpage.js

I've searched a lot to try and solve my problem. I'm building a website locally using the Fullpage.js library. Fullpage.js gives the body a class which refers to the section that is in the viewport. On the second last section I have hidden the dotted slider navigation with the css code below. I've made a simplified html structure.

<body>
    <div class="section-1">
      .. some content
    </div>
    <div class="section-2">
      .. some content
    </div>
    <div class="section-3">
      .. some content
    </div>
    <div class="section-4">
      .. some content
    </div>
    <div class="section-5">
      .. slider with the navigation turned off when this section is in viewport, see used css.
    </div>
    <div class="sectie-footer">
      .. footer, navigation above reappears because this section is in viewport and css doesn't apply anymore; Body has now class fp-viewing-section-footer.
    </div>
</body>

The CSS:

CSS that applies to sectie-5 but not when footer is in viewport.

body.fp-viewing-section-5-0 .fp-slidesNav.fp-bottom {
  display:none;
}

Everything works fine but when trying to write a small piece of jQuery code, that hides this navigation element on sectie-5, when the sectie-footer is in viewport, and the body has the class which refers to the footer. I can't get it to work. It shows no errors but the code doesn't do what I thought it would.

I've tried checking if the body .hassClass and if so adding a class with .addClass. I tried .hide and .show, also no effect. I wrote:

jQuery(document).ready(function() {
function hideonfooter() {
    jQuery('.fp-slidesNav.fp-bottom').hide();
  };

if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
    hideonfooter();
}});

And some code I found in an earlier question on Stackoverflow (class jsnoshow has display:none):

jQuery("fp-slidesNav").toggleClass(function() {
    if ( jQuery("body").hasClass( "fp-viewing-section-footer" ) ) {
        return "jsnoshow";
    } else {
        return "";
    }
});

I also tried:

jQuery(document).ready(function() {

if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
        .hide('.fp-slidesNav .fp-bottom');
}});

I hope you guys want to help me out.

Upvotes: 1

Views: 1360

Answers (1)

Alvaro
Alvaro

Reputation: 41605

Please check how to use of fullPage.js state classes or callbacks for that.

Also, do not forget to check the callbacks examples in the examples folder.

You might also want to check this video tutorial I did making use of the state classes to create animations.

For example:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        if(destination.index == 4){
            alert("Section 4 ended loading");
        }
    }
});

Instead of the alert, you can run your code there on the section that you want by using its index in the callback.

Upvotes: 0

Related Questions