fullpage.js breaks sliding left/right when adding DOM Elements

Question

I use fullpage.js to create some sort of Full-Screen-Matrix, in my node/Electron App so the user can scroll with the Keyboard up/down, left/right to always have one fullscreen data record. This works great as long as I don't start adding or deleting slides (the data is kept somewhere else and is updated live).

The code I got so far is:

let masterRactive = new Ractive({
    el: '#clientContainer',
    template: myTemplate,
    magic: true,
    modifyArrays: true,
    data: {docs},
    computed: //some magic here,
    onrender: function () {
        $('#container').fullpage({
            navigation: true,
            showActiveTooltip: true,
            slidesNavigation: true,
            recordHistory: false,
            fixedElements: 'h1',
            paddingTop: '80px'
        });
        $.fn.fullpage.setAllowScrolling(false, 'down,up');
    }
});

And to recalculate on Change events I use

masterRactive.observe( 'docs', function ( newValue, oldValue, keypath ) {
    $.fn.fullpage.reBuild()
})

Everything works great until I add or delete a Slide. The Data is shown/hidden correctly, and scrolling up and down works as well, but when trying to scroll sideways I always get Uncaught TypeError: Cannot read property 'left' of undefined.

I also tried $.fn.fullpage.destroy('all');and reinitiallizing on every change, but the effect is the same...

Update:

As I found out, this behaviour only occurs if the deleted slide is the one shown. If I delete slides or Sections which are not active everything seems to work. (even though the Slide Navigation does not Change e.G. from 3 to 2 Slides if one is deleted)

score 0 · Answer 1 · edited May 23 '17 at 12:02

0

reBuild doens't do what you think it does. From fullPage.js docs:

Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.

See my answer regarding how to dynamically add slides or sections here: https://stackoverflow.com/a/36643702/1081396

edited May 23 '17 at 12:02

Community

1
1

answered Apr 26 '17 at 09:52

Alvaro

37,936
23
138
304

Thanks for your fast answer, but i've tried that before. My first approach was quite similar to your answer. I just destroyed the fullpage via `$.fn.fullpage.destroy('all');` and re-initiallized it afterwards, but that does not work either. – Torf Apr 26 '17 at 12:16
I updated my Question to be more precise: it only seems to break if I change the active Slide, or add/delete Sections. But I'm not able to find a pattern. Sometimes some navigation movements work, sometimes it brakes after a couple of movements... – Torf Apr 26 '17 at 12:27
Sorry can't help you more unless you provide a reproduction of your issue in jsfiddle or codepen (without react) – Alvaro Apr 26 '17 at 13:50
Problem found! It's not the fullscreen.js, but the point where I initialized the re-rendering. Seems like `observe` in ractive is the wrong moment. When I re-initialize fullscreen.js the moment the changed data appears in PouchDB everything works fine. So maybe I need to find a better way of initializing, or just simplify my Layout to pure CSS. – Torf Apr 26 '17 at 14:08

fullpage.js breaks sliding left/right when adding DOM Elements

1 Answers1