CODEWITHSUNDEEP
javascriptjquerycssfullpage.js
realbadrabbits
realbadrabbits

Reputation: 103

scrollOverflow using FullPageJS not working on click event

I'm building a instance of Fullpage.js that has to be initialized on a click event, then destroyed when clicking to another page, and vice versa. scrollOverflow works fine if the the #fullpage element is not hidden on page load.

When .fullpage-trigger is clicked the #fullpage element is displayed and built, but the two elements with the classes .fp-scrollable and .fp-scroller aren't created?

Broken live example: http://realbadrabbits.com/test/bug.html

Thanks in advance :)

$('.fullpage-trigger').on('click', function(event) {
    $('#fullpage').fullpage({
        anchors: ['1', '2'],
        navigation: true,
        navigationPosition: 'left',
        navigationTooltips: ['1', '2'],
        scrollOverflow: true
    });
});

$(document).on('click', '.destroy', function(){
    $.fn.fullpage.destroy('all');
    $('#fullpage').removeClass('active');
    $('#fullpage').addClass('hide-page');
});

Upvotes: 0

Views: 662

Answers (2)

Nathe
Nathe

Reputation: 53

//forcing fullPage.js to recalculate dimensions.
setTimeout(function(){
  fullpage_api.reBuild(); 
}, 500);

this worked for me

Upvotes: 0

Alvaro
Alvaro

Reputation: 41605

Try using $.fn.fullpage.reBuild() after your initialisation. Or in the afterRender callback.

Upvotes: 1

Related Questions