jquery - Adding or removing sections/slides to fullPage.js after initialization

Question

I have a tree-structured database and in my website I am going down the tree as I show their content in "sections" and "slides" of fullPage.js plugin. The problem is, when I append a new section to a fullpage element, it can not be a part of the plugin.

The reason I trace the tree in that way is, the the distances of the 'leafs' from the root might not meet the same.

Tl;dr, I want to do this: https://github.com/alvarotrigo/fullPage.js/issues/41

Answer 1

As said in the link you post, fullpage.js doesn't provide a direct way of doing it. The only way is destroying and initializing fullpage.js each time you add a new section or slide. To avoid blinkings, we can remember the active section and slide to initialize again with those values.

Reproduction online

init();

function init(){
    $('#fullpage').fullpage({
        sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    });
}

//adding a section dynamically
$('button').click(function(){
    $('#fullpage').append('<div class="section">New section</div>');

    //remembering the active section / slide
    var activeSectionIndex = $('.fp-section.active').index();
    var activeSlideIndex = $('.fp-section.active').find('.slide.active').index();

    $.fn.fullpage.destroy('all');

    //setting the active section as before
    $('.section').eq(activeSectionIndex).addClass('active');

    //were we in a slide? Adding the active state again
    if(activeSlideIndex > -1){
        $('.section.active').find('.slide').eq(activeSlideIndex).addClass('active');
    }

    init();
});