Full height slider skip one slide

Question

I am using fullPage.js to create a full width and height slider for several fullscreen-slides. So my site structure is like

section#f01
section#f02
section#f03.scrollfix
section#f04

I want to skip section#f03.scrollfix while scrolling through the site. While scrolling with my keyboard and/or by my mouse wheel.

Colonic

You talk about concepts that are not commonly understood frame, second layer, first layer... Not easy to follow it. You would have to specify what you mean with them. – Iloilo

Thanks for the suggestion @Iloilo . I have tried to cut it down on only using "content" and "slide", which seem to be common. – Colonic

While the second content is activated, I want to skip the slide number 8 what?? – Radiotransparent

I guess you've managed to solve the problem right? – Rheostat

@RokoC.Buljan I tried to make it easier to understand. – Colonic

I made it once again easier to understand. – Colonic

Did you try asking the author of the plugin if that's possible? github.com/alvarotrigo/fullPage.js – Charmeuse

Answer 1

Demo online

If you want to remove it on load, then use the afterRender callback as I'm doing here:

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

    afterRender: function () {
        removeSection2();
    }
});

function removeSection2() {
    // Move section 2 after the las section
    $('.fp-section:last').after($('#f02'));

    //removing the internal class `fp-section` so fullPage.js won't recognise it and won't be able to scroll to it.
    $('#f02').removeClass('fp-section');
}

In case you want to use it at any other moment, just call the function removeSection2 whenever you want.

If you want to restore it back at some point, you could use this other function:

function restoreSection2() {
    // Move all next sections to before the active section
    $('#f01').after($('#f02'));
    $('#f02').addClass('fp-section');
}

Iloilo

This seems to be a very clean solution! Thanks a lot for your great suggestion! Its kind of strange, but until restoreSection2 I am not able to use my keyboard to navigate. This isn't a jsfiddle problem, is it? – Colonic

@MarianRick I can scroll vertically with the keyboard without any problem. If you are talking about the horizontal scrolling or the click on the slides, that's because those slides are on the removed section, not in the 1st one. I forgot to add the position:relative to the sections, now that we removed the fp-section class containing it. Here's the correction of the fiddle, note the new CSS style for the .section. – Iloilo

I am so sorry. Of course it was a jsfiddle problem. You need to click inside the area first to make your keyboard work. This problem does not exist while using a real website! – Colonic

There is just one problem left, as soon as you restore the second slide: You are watching the third slide and you click on restoreSection2. What happens now is that the slide jumps to section2. This is something I really need to avoid! jsfiddle.net/97tbk/548 I can achieve this by using calling $("#fullpage").fullpage.reBuild();, but then the section2 appears and quickly slides to section3. With this one thing fixed everything works just perfect! – Colonic

@MarianRick I consider that should be part of another question, as I answered your question regarding the removal or "jump" of a section. The restoring of it was not part of your original question. In any case, here you have what you want, although I won't explain it as its more complicated. Also, right now it would only work or css3:true and won't work in old browsers such as IE 9. – Iloilo

Thanks a lot @alvaro ! I was able to understand your code. The only thing I had to add was the silentScroll function to the removeSection2 function. Now everything works just the way I want it to! Again, thanks a lot for your help, I really appreciate it! – Colonic

Answer 2

I'm not sure I got what you want to achieve, so this is how I choose to interpret what you wrote in your question:

In the live example that you provided, it is possible to click the button on each slide to "open up" that slide. When that is done, you want slide #8 to be skipped whenever the user is clicking the navigation buttons on the page, or is using the scroll button.

If this is the case, then adding the following listener for onLeave of a slide combined with the css in the bottom makes fullpage skip slide #8 whenever the class ".scrollfix" is present (maybe it ought to be renamed to ".scrollskip" or something similar):

$("#fullpage").fullpage({ onLeave: function(index, nextIndex, direction) {
  setTimeout(function() {
    var skip_section = $(".scrollfix").length > 0;
    if (nextIndex === 8 && skip_section) {
      if (direction === "down") {
        $("#fullpage").fullpage.moveSectionDown();
      } else {
        $("#fullpage").fullpage.moveSectionUp();
      }
    } 
  },1);
} })

The CSS needs to be updated to hide the slide completely instead of just making it invisible:

.scrollfix {
  display: none!important;
}

Pasting the JS code above into dev tools console while on your example page and making that small change to the scrollfix leads to the behavior I think you seek. Since you already have a "onLeave" event listener in your code, adding this fix in the dev tools will break the default behavior, but you should be able to add the code in the right place to have them both working at the same time.

Scapolite

Hey @johanpersson, thanks a lot for your great suggestion. I have tried this fix already. In one way it works great, but as soon, as you are on the last slide and try to "open it up", the system stucks. Its easier for you to try, than for me to explain. I have updated the code right here: img.hiamovi-client.com/index-stack.html It although breaks while you are on the last slide and try to "close" the slide again. – Colonic

I see... To solve that problem, add the following line in your "second_layer" function: $("#fullpage").fullpage.reBuild() That will rebuild the slide, which will account for the fact that slide 8 is now not shown anymore. What happens otherwise is that the "fullpage window" thinks there are 9 slides in total and because of that positions itself nine slides down, when in fact it should only be eight tiles down. Calling reBuild will fix that. – Scapolite

Thanks a lot @johanpersson, this works great and as a good idea, easy to be integrated in my site. I will try to add some fixes and give you feedback then! Thanks for your explanation as well! – Colonic

Good to hear Marian. If it works, then maybe you could consider marking it as the accepted answer? – Scapolite

thanks a lot for your effort and time to understand my problem. I am sorry, but I gave the bounty. His solution is very clean and easy to understand. It perfectly fits the (now) very simplified question and although includes two fixes (in the comments) that are very helpful. I chose him to achieve the highest level of quality for stack overflow. I would love to give you the bounty as well, but I am not able to. I have up voted every of your answers I found instead. See this as appreciation of your effort as well! Thanks once again! Best regards, Marian. – Colonic

Ah, didn't realize there was another answer. Good luck Marian! – Scapolite