Fullpage.js: Reload fullPage.js to detect new DOM structure

[thomey]

I have a responsive site where I would like to break up an existing fullPage.js div with class ".section" into separate new divs with class ".section" when visiting from mobile (or on screen resize), so that I can keep the fullPage.js fullscreen section by section scrolling functionality, but make each of the elements in the original div fullscreen and change the order a bit so it's more fitting for a mobile screen.

Here's a simplified example of what I'm trying to achieve:
On desktop:

<div class="section">
    <h1>Section heading here</h1>
    <p>Some text</p>
    <img src="" />
</div>

On mobile:

<div class="section">
    <img src="" />
</div>
<div class="section">
    <h1>Section heading here</h1>
</div>
<div class="section">
    <p>Some text</p>
</div>

As you can see the existing div has been broken up into separate divs and the order of the content has been changed a bit.

I've read through the issues/requests here on GitHub to look for solutions, and tried using both fullPage.js callbacks, hiding/showing divs, toggling class ".section" for the divs etc., but none of the solutions have been working.

The main problems with the different solutions seem to be:
1) If I hide/show the content with CSS, fullPage still considers it part of the DOM and this breaks the scrolling.

2) If I toggle the class ".section", fullPage does not detect the divs on the initial load, thus not counting them as part of the scrolling hierarchy.

3) If I add the content on condition using JS, it's not part of the DOM when fullPage.js is loaded and therefore not detected.

Ideally there would be a way to tell fullPage.js to "reload"/"reindex" the divs, or at least a function to unload fullPage.js completely and then load it again when desired. That way one could change the DOM at certain media queries or with JS etc., and then reload fullPage.js to catch the new structure/layout.

Is there any way to achieve what I'm trying to do using the current fullPage.js?

[alvarotrigo]

There's no way to achieve that right now.
How are you exactly changing the structure from a normal view to the mobile view? Using javascript? How are you doing it?

Couldn't you just destroy all the body content, ($('body').html('');), create the markup for mobile, and initialize again fullpage.js?

[thomey]

Oh btw forgot to thank you for the awesome script ;) Really grateful for it!

Yeah right now I'm using JS with jRespond to either toggle visibility or remove/create the new structure at certain breakpoints.

I tried your suggestion now, and it's somewhat working. Though clearing body and re-adding content is not so flexible with regards to more advanced layouts, loading optimization, initialization of other JS etc. - but I understand why it needs to be done this way because of the superContainer wrapping everything inside body. (I tried only clearing/adding to a desired wrapper div but that would only spawn X number of superContainers with their respective navigation ;) ).

At the desired "mobile" breakpoint I'm doing the following to empty the body and add the new content with Ajax:

$('body').empty();
$('body').load('/change_front_page_layout?mobile=true', function() {
    $.fn.fullpage({
        verticalCentered: false,
        navigation: true,
        navigationPosition: 'right',
        css3: true
    });
});

The only problem I'm facing now is that after this is done, the touch pad scrolling becomes super sensitive, making it almost impossible to hit the desired section. Keyboard and click navigation works fine.

I'm trying to simplify the page structure now to see what could be the cause of it, but if you have any ideas I'd be happy to hear them ;)

[alvarotrigo]

the touch pad scrolling becomes super sensitive

What do you mean with that?

[thomey]

If I try to scroll using the trackpad on my Macbook Pro after using the method above, the scrolling is really sensitive, so only the slightest touch is enough to send it scrolling to the very bottom or top of the page.

Here's a super simple test showing what's happening. At load everything scrolls fine, but after button has been clicked to empty body and add new contents, scrolling one section at the time is impossible.

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.fullPage.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $.fn.fullpage({
                verticalCentered: false,
                navigation: true,
                navigationPosition: 'right',
                css3: true
            });
            $('#rebuild_btn').on('click', function() {
                $('body').empty();
                $('body').html('<div class="section" id="section1"><h1>Section 1</h1><div id="rebuild_btn">CLICK ME</div></div><div class="section" id="section2"><h1>Section 2</h1></div><div class="section" id="section3"><h1>Section 3</h1></div>');
                $.fn.fullpage({
                    verticalCentered: false,
                    navigation: true,
                    navigationPosition: 'right',
                    css3: true
                });
            });
        });
    </script>

    <style>
        div {
            display: block;
        }

        #rebuild_btn {
            cursor: pointer;
            padding: 20px;
            background-color: green;
            display: inline-block;
        }

        #section1 {
            background-color: red;
        }

        #section2 {
            background-color: blue;
        }

        #section3 {
            background-color: green;
        }
    </style>

    </head>
    <body>
        <div class="section" id="section1">
            <h1>Section 1</h1>
            <div id="rebuild_btn">CLICK ME</div>
        </div>
        <div class="section" id="section2">
            <h1>Section 2</h1>
        </div>
        <div class="section" id="section3">
            <h1>Section 3</h1>
        </div>
    </body>
</html>

[alvarotrigo]

Yeah that's because events are being triggered twice. Not a good solution.
Sorry but I though you also tried the reBuild option I've talked about in other post but maybe you didn't.

Please read this topic.

[thomey]

I tried the reBuild, but not sure if that will help in this case as a complete reload of fullPage.js would have to be performed in order for it to detect the changes in the DOM right?

[alvarotrigo]

MMmm yeah, you are right :)

[alvarotrigo]

You probably want to turn off the mouswheel handler before initializing the plugin again:

$.fn.fullpage.setAllowScrolling(false);

And maybe unbind the this events as well:

$(window).off('hashchange');
$(document).off('click', '#fullPage-nav a');
$('.section').off('click', '.toSlide');
$(document).off('click', '.fullPage-slidesNav a');

So you would have:

$('body').empty();
$.fn.fullpage.setAllowScrolling(false);
$.fn.fullpage.setKeyboardScrolling(false);

$(window).off('hashchange');
$(document).off('click', '#fullPage-nav a');
$('.section').off('click', '.toSlide');
$(document).off('click', '.fullPage-slidesNav a');

$('body').load('/change_front_page_layout?mobile=true', function() {
    $.fn.fullpage({
        verticalCentered: false,
        navigation: true,
        navigationPosition: 'right',
        css3: true
    });
});

Let me know if it works.

[thomey]

Worked like a charm! =) Thanks a lot for the help!

[thomey]

For others that need this same functionality, I found out that you also need to set keyboard scrolling to false before reloading fullPage.js, otherwise keyboard scrolling event will trigger twice as well:

$.fn.fullpage.setKeyboardScrolling(false);

[alvarotrigo]

Right. I updated my answer.

[alexcroox]

Thank you so much, reBuild() wasn't doing anything for me but simply re-initializing the plugin again after every ajax call worked fine with your

$.fn.fullpage.setAllowScrolling(false);
$.fn.fullpage.setKeyboardScrolling(false);

solution (previously I was also getting double transitions too).

Thank you!

[alvarotrigo]

@alexcroox you should have used $.fn.fullpage.destroy() available now in the plugin and proposed as the solution in the commit which closed this topic.

[alexcroox]

Unfortunately using destroy() then init again kept causing it to scroll up to the first page when I was simply appending to the bottom and wanted to retain the current scroll/page position.

[wootencl]

A little late to the game obviously so I'm not expecting a reply from OP but maybe @alvarotrigo can help shed some light. Also I hope my question falls within the scope of this topic enough in order for me to not start another discussion thread. Currently I'm using jQuery to dynamically add/delete sections to my site as it is resized and have used the above mentioned method: destroying FullPage, emptying the content of my div, adding some new content, and then reinitializing FullPage. This all works brilliantly except my one problem with what @alexcroox mentions above is that whenever the function is called (upon a resize) it brings me back to the first page/section. Any tips/advice on how to avoid this? I can throw everything into a codepen if you'd like. Hoping it's a simple fix though. Thanks in advance for any help on the problem!

[alvarotrigo]

@wootencl before initializing it again add the active class to the section (and slide if any) that was active before destroying it.

[wootencl]

@alvarotrigo You are AWESOME! Thanks for the swift reply and help. Two simple lines of jQuery and the problem is solved. For those interested I just selected the active class (before destroying) and added the active class back after adding my new HTML. Like so:

var temp = $(".section.active");
...empty/add HTML...
temp.addClass("active");
...reinitialize FullPage...

Keep being amazing!