-1

I added the "active" class to my entries of a menu so highlight which section is currently selected. Is it possible to add this also for slides?

Version: 2.6.4

gregor
  • 2,397
  • 2
  • 12
  • 18
  • 1
    Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. – Patsy Issa Apr 20 '15 at 18:51

2 Answers2

3

You should be using fullPage.js slides callbacks to do so, for example:

$('#fullpage').fullpage({    
    afterLoad: function (anchorLink, index) {
        //section 2 loaded
        if (index == 2) {
            //adding active class to the 1st element in the slide menu
            $('#myMenu').find('li').eq(0).addClass('active');
        }
    },

    //
    afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {

        //only for slides in section 2
        if (index == 2) {
            $('#myMenu').find('li.active').removeClass('active');
            $('#myMenu').find('li').eq(slideIndex).addClass('active');
        }
    }
});

Demo online

Or, if you prefer, the class fullPage.js adds to the body element of your site which is of the kind fp-viewing-sectionAnchor-slideAnchor. See this video. 

body.fp-viewing-1-0 #myMenu .first{
    background: yellow;
}

Demo online

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Thank you this solved my problem and with that new idea I added some other features to my page ;-) – gregor Apr 21 '15 at 15:59
2
.fp-viewing-1 ul#menu li:nth-child(1) a

This is relatively simple with css:

  1. Get the current body class: i.e. fp-viewing and whatever it shows
  2. Add the nth child where you want to display active in your menu.
Nathaniel Ford
  • 20,545
  • 20
  • 91
  • 102
Vrushasen Dhere
  • 21
  • 1