Fullpage.js: Ignore `display:none` sections.

[memob0x]

if I hide sections with css media queries (display:none), even if i destroy and re-initialize the plugin (even programmatically changing .section classes ..es: sectionSelector: '.section.target-visible') the plugin keeps on scrolling (changing anchors #page-1 #page-2 etc) through invisible sections..

the only way i found is to remove them from the DOM but doing so i would have to re-add them on resize, which is not a "very clean" option...

sectionSelector: '.section:visible' has not worked either...

[alvarotrigo]

the plugin keeps on scrolling

I can not reproduce it in this fiddle.
The library stops scrolling when a section is hidden. Although of course, it doesn't continue to the next one, which I believe is the issue.

[memob0x]

exactly.. what could i do to make it continue to section 4 without removing section 3 from the document?
also it would be cool if i could not be forced to destroy and re-init the plugin at that point to achieve that

EDIT: with "keeps on scrolling" i wanted to say that the best result i achieved (without removing sections) is actually near to what i want but with hidden sections anchors keeping updating in url (with a consequential "pause" in the scrolling process)...

[alvarotrigo]

what could i do to make it continue to section 4 without removing section 3 from the document?

Right now probably nothing. It will require a library modification.
The topic has been marked as an enhancement. I'll see if I solve it for future releases.

The most you can do at the moment is destroy and initialize fullpage.js again without the section.

[memob0x]

thanks..
the problem of the :visible selector is that it takes account of opacity and visibility ...
i think that it would be really cool if your ( _awesome_ ) library could evaluate display only... something like
var $updatedSections = $allSections.filter(function(){ return $(this).css('display') !== 'none' });
maybe going to the previous one if the current one disappears on resize (avoiding wrong hash in url)...

[alessandrotp]

Hi guys!

I had the same issue, I wanted to skip a div but removing the class "section" would stop scrolling through the rest of the sections and using display:none would cause the scroll to stop on ghost sections.

My solution was to dynamically comment the div that I wanted to skip:

my_element_jq = $('#foo');
comment = document.createComment(my_element_jq.get(0).outerHTML);
my_element_jq.replaceWith(comment); 

It's not a definitive solution but it's a workaround that worked for me!

[thisisfed]

I just solved this issue simply by using the $(".class or #id").remove()

[Khusainov]

@memob0x The workaround that I used (without changing DOM and re-init fullpage) is to use OnLeave event to navigate through invisible sections:

onLeave: function(index, nextIndex, direction){
    var nextSection = getSectionByIndex(nextIndex);
    if(!isVisible(nextSection)) {
        var sectionIndex = getNearestVisibleSectionIndex(nextIndex, direction);
        if (sectionIndex !== -1) {
            $.fn.fullpage.moveTo(sectionIndex);
        }

        return false;
    }
}

getSectionByIndex function example:
function(index) { return $('.section').eq(index - 1); } // -1 because index starts from 1

isVisible function example:
function(section) { return $(section).is(':visible'); }

getNearestVisibleSectionIndex function example:

function (index, direction) {
    var step = direction === 'up' ? -1 : 1,
        sectionsCount = $(section).length;

    while (index >=0 && index < sectionsCount && !isVisible(getSectionByIndex(index))) {
        index += step;
    }

    return index === sectionsCount ? -1 : index;
}

This solution allows to dynamically hide sections without re-init fullpage.
The only limitation that I found is the last section, because plugin will scroll to the first section even if you return 'false' from 'OnLeave'

[ghost]

@Khusainov would you mind expanding on your answer? Have you got a complete working example i can implement? I am getting getSectionByIndex is not defined when trying your code and am a bit of a newbie to jQuery.

Thanks

Edit:

I managed to solve it

onLeave: function(index, nextIndex, direction){ var nextSection = getSectionByIndex(nextIndex); function getSectionByIndex(index) { return $('.section').eq(index - 1); } // -1 because index starts from 1 function isVisible(section) { return $(section).is(':visible'); } function getNearestVisibleSectionIndex(index, direction) { var step = direction === 'up' ? -1 : 1, sectionsCount = $('.section').length; while (index >=0 && index < sectionsCount && !isVisible(getSectionByIndex(index))) { index += step; } return index === sectionsCount ? -1 : index; } if(!isVisible(nextSection)) { var sectionIndex = getNearestVisibleSectionIndex(nextIndex, direction); if (sectionIndex !== -1) { jQuery.fn.fullpage.moveTo(sectionIndex); } return false; } },

[Khusainov]

@stegster Glad to see that you managed it to work. But it's better to determine functions outside of onLeave function.
In your case it should be:

var getSectionByIndex = function(index) { return $('.section').eq(index - 1); }, 
    isVisible = function(section) { return $(section).is(':visible'); },
    getNearestVisibleSectionIndex  = function (index, direction) {
       var step = direction === 'up' ? -1 : 1,
       sectionsCount = $(section).length;

       while (index >=0 && index < sectionsCount && !isVisible(getSectionByIndex(index))) {
        index += step;
       }

       return index === sectionsCount ? -1 : index;
    }

And then use it in onLeave function:

onLeave: function(index, nextIndex, direction){
    var nextSection = getSectionByIndex(nextIndex);
    if(!isVisible(nextSection)) {
        var sectionIndex = getNearestVisibleSectionIndex(nextIndex, direction);
        if (sectionIndex !== -1) {
            $.fn.fullpage.moveTo(sectionIndex);
        }

        return false;
    }
}