9

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.

Marian Rick
  • 2,872
  • 4
  • 22
  • 56

2 Answers2

5

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');
}
Alvaro
  • 37,936
  • 23
  • 138
  • 304
  • 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? – Marian Rick Apr 21 '15 at 10:57
  • @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](http://jsfiddle.net/97tbk/547/), note the new CSS style for the `.section`. – Alvaro Apr 21 '15 at 11:08
  • 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! – Marian Rick Apr 21 '15 at 13:41
  • 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! http://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! – Marian Rick Apr 21 '15 at 13:47
  • @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](http://jsfiddle.net/97tbk/553/), 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. – Alvaro Apr 21 '15 at 14:23
  • 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! – Marian Rick Apr 22 '15 at 11:30
3

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.

Johan Persson
  • 1,145
  • 7
  • 11
  • 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: http://img.hiamovi-client.com/index-stack.html It although breaks while you are on the last slide and try to "close" the slide again. – Marian Rick Apr 20 '15 at 20:10
  • 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. – Johan Persson Apr 21 '15 at 09:29
  • 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! – Marian Rick Apr 21 '15 at 10:59
  • Good to hear Marian. If it works, then maybe you could consider marking it as the accepted answer? – Johan Persson Apr 21 '15 at 14:46
  • 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. – Marian Rick Apr 22 '15 at 11:34
  • Ah, didn't realize there was another answer. Good luck Marian! – Johan Persson Apr 22 '15 at 11:46