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

Biddy

Answer 1

I needed to do something similar but with a little more flexibility. And it was important to enable sections above, without moving the contents of the current page.

I just started using FullPage.js so I did not try any problems with other plugin features. But I share the result here.

It's a little complicated, but it does what I need! Examples at the end...

I had to modify 2 lines of FullPage.js plugin:

function moveSectionUp(){
        var prev = $(SECTION_ACTIVE_SEL).prevAll(SECTION_SEL + ':first');  // <--- THIS
        // var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL); // <--- INSTEAD OF THIS

And

function moveSectionDown(){
        var next = $(SECTION_ACTIVE_SEL).nextAll(SECTION_SEL + ':first');  // <--- THIS
        //var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);  // <--- INSTEAD OF THIS

And these are the functions added:

fpInitSkipEl = function(funcSkipEl) {

    if ($.isFunction(funcSkipEl)) {
        var nextIndex = 0;
        $('.section').each(function() {
            nextIndex++;
            $('a[href="#' + $(this).attr('data-anchor') + '"]').on('click', function() {
                var dataAnchor = $(this).attr('href').toString().replace('#', '');
                return funcSkipEl($('.section').index($('.section.active')) + 1, $('.section').index($('.section[data-anchor="' + dataAnchor + '"]')) + 1);
            });
        });
    }

}

fpSkipEl = function(anchorsToSkip, index, nextIndex) {
    //debugger;
    $('.section').each(function() {
        if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1
            && (index==-1 || $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor'))
            && (nextIndex==-1 || $(this).attr('data-anchor') != $('.section').eq(nextIndex - 1).attr('data-anchor'))) {

            $(this).css('display', 'none').removeClass('fp-section');
        } else {

            $(this).css('display', '').addClass('fp-section');
        }
        $.fn.fullpage.reBuild();
    });

}


fpGetRealIndex = function(index) {
    var realIndex = 0;
    $('.section').each(function() {
        realIndex++;
        if ($(this).hasClass('fp-section')) index--;
        if (index == 0) return false;
    });
    return realIndex;
}

The main use is this:

fpInitSkipEl(function(index, nextIndex) { 
    // Fire on anchor Click
    // You can play with index (the current section) and nextIndex (the next section)

    if (index==1 && nextIndex==4) {
        fpSkipEl(['page2', 'page3'], index, nextIndex);

    }
});

And init and set your logic on afterLoad

$('#fullpage').fullpage({
    anchors: ['page1', 'page2', 'page3', 'page4'],
    afterLoad: function(anchorLink, index) {
            // Get the real index with the hidden sections, oterwise index is relative to the visible sections.
            var realIndex = fpGetRealIndex(index);

            fpSkipEl([], -1, -1); // Show all sections
        }
    });

The simple working example on JSFiddle

A more complex example on JSFiddle

Hesper

This solution is quite intrusive since the fullpage.js code need to be altered. – Profitsharing

@Profitsharing True, I would have preferred to avoid it, but I could not find a way to overwrite the function without directly modifying the two rows. – Hesper

Answer 2

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();
});

Stairwell

@Stairwell is there any way to achieve the same for removing sections? – Heirdom

@EhouarnPerret exactly same procedure. Just remove the section instead of appending it :) – Stairwell

Answer 3

Thanks, Alvaro! I also want to include my approach in order to remove sections and slides.

To remove the active section at the bottom and go to upper section:

$('#fullpage').on('click', 'button#removeSection', function() {
    var section = $('.fp-section.active');
    $.fn.fullpage.moveSectionUp();
    setTimeout(function(){
        section.remove();
    }, 700);
});

To remove the last slide and go to the slide on the left:

$('#fullpage').on('click', 'button#removeSlide', function() {
    var slide = $('.fp-section.active').find('.slide.active');
    $.fn.fullpage.moveSlideLeft();
    setTimeout(function(){
        slide.remove();
    }, 700);
});

700ms is the default animation time. We should wait for the animation time to pass, in order to not to see the section/slide as it is being removed (what we observe as blink).

Biddy

Answer 4

For anyone trying this in 2020 the $.fn.fullpage.destroy("all") method didn't work for me I had to use fullpage_api.destroy("all") instead.

Subito

Answer 5

I edited the code to dynamically create another section, so as to achieve endless scroll down:

$('#fullpage').fullpage({
    afterLoad: function(origin, destination, direction){
        if(destination.isLast && direction=='down') {
           $.get('YOUR_BACKEND_URL.php',function(html) {
                $('#fullpage').append(html);
                fullpage_api.destroy('all');
                init(); 
                fullpage_api.silentMoveTo(destination.index+1);
            });
        }
    }
});

Menorca

Answer 6

For anyone looking into doing this without jQuery, here's a js only solution. I use fullpage sections only, no slides, see alvaro's answer for hints how to do that. Transpile with babel if needed.

import newSection from "./new-section.html";

const addNewSection = () => {
  const fullpageEl = document.getElementById("fullpage");
  fullpageEl.insertAdjacentHTML("beforeend", newSection);
  const activeSectionIndex = Array.prototype.indexOf.call(fullpageEl.children, document.querySelector(".fp-section.active"));
  fullpage_api.destroy("all");
  document.querySelectorAll(".section")[activeSectionIndex].classList.add("active");
  initFullPage();
};

const initFullPage = () => {
  new fullpage("#fullpage", {});
};

document.addEventListener("DOMContentLoaded", function () {
  initFullPage();

  document.addEventListener("click", (e) => {
    if (!e.target.matches(".add-section-btn")) return;
    addNewSection();
  }
});

Flory