Rebuild/destroy fullPage instance when transitioning from desktop to mobile

[neilmuralee]

Hi,
Before I start, awesome plugin.

I'm building an app where i need to be able to rebuild the instance of fullpage on viewport resize.

Basically, I don't want to have fullPage on mobile (less than 768px), but I do on desktop sizes (greater than 768px), - i can't change this threshold, as it is part of a wider project setting.

I understand that I can call the plugin to work just for desktop:

if ($(window).width() > 768) {
 $('.fullpageSelector').fullpage();
}

There is a case where a user may resize the viewport from mobile to desktop.

Is it possible to rebuild/destroy fullPage when it crosses that threshold?

My initialisation code:

function fullPageIntroInit() {
            if ($(window).width() > 768) {
                $('.intro.slides').fullpage({
                    verticalCentered: true,
                    paddingTop: '4%',
                    paddingBottom: '35px',
                    menu: ".slides-nav",
                    navigation: true,
                    anchors: ['Themes', 'DragDrop', 'DesktopMobile', 'HostingDomains'],
                    navigationTooltips: ['Beautiful Themes', 'Simple to Edit', 'Dektop / Mobile', 'Web Address and Hosting'],
                    slideSelector: '.fs-slide',
                    scrollOverflow: false,
                    css3: true,
                    resize: true
                    //resize: true,
                    // onLeave: function(index, nextIndex, direction) {},
                    // afterLoad: function(anchorLink, index) {},
                    // afterRender: function() {},
                    //afterResize: function() {}
                    // afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {},
                    // onSlideLeave: function(anchorLink, index, slideIndex, direction) {}
                });
            }
        }

Calling the function:

$(window).resize(function() {
                if ($(window).width() < 767) {
                    //if ($.fn.fullPage) {
                    $.fn.fullpage.destroy();
                    //}
                }
                if ($(window).width() > 768) {
                    $('.fullPageIntroInit').fullpage();
                }
            });

…doesn’t destroy the instance from initialisation. Alternatively ...

$(window).resize(function() {
                    homeButtonClassSwap();
                    if ($.fn.fullPage) {
                        $.fn.fullpage.destroy();
                    }
                    if ($(window).width() > 768) {
                        fullPageIntroInit();
                    }
                });

…this version on initialisationlooks and works fine on both desktop and mobile version, it doesn't seem to work on rebuilding/ the instance but does create duplicate navigation dots on resize.

Any help would be appreciated. Hope that all makes sense!

[alvarotrigo]

If you want to rebuild it, then you need to destroy it with the all option. Otherwise you will only unbind the events that fullpage adds such as the mouse wheel scrolling, touch scrolling...

Use destroy('all'):

destroy(type)
type: can be empty or all. If all is passed, the HTML markup and styles used by fullpage.js will be removed. This way the original HTML markup, the one used before any plugin modification is made, will be maintained.

//destroy any plugin event and any plugin modification done over your original HTML markup.

[neilmuralee]

Thanks for getting back to me. Progress, thanks, i did try this but missed the string quotes...

It's reinitiaising/destroying as expected now. I still get an issue with duplicate dots in the navigation on any resize:

I also get an error that comes from the call to:
$.fn.fullpage.destroy('all'); (in transitions.js)

$(window).resize(function() {
if ($(window).width() <= 767) {
console.log("not fullpage");
$.fn.fullpage.destroy('all');
}
if ($(window).width() > 767) {
console.log("fullpage");
fullPageIntroInit();
}
});

[neilmuralee]

I assume this is because a fullpage instance has to exist before i can destroy it.

Trying to use:

if ($.fn.fullpage) {
console.log("not fullpage");
$.fn.fullpage.destroy('all');
}

but it doesn't seem to work.
thanks in advance, any help is appreciated.

[alvarotrigo]

Then you are doing something wrong.
It doesn't seem to be bug. Fullpage seems to be working ok as you can see in this fiddle.

Content of the fiddle:

createFullpage();


$('#destroy').click(function () {
    $.fn.fullpage.destroy('all');
});

$('#create').click(function () {
    createFullpage();
});


function createFullpage() {
    $('#fullpage').fullpage({
        sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
        navigation: true
    });
}

<div id="fullpage">
    <div class="section">One</div>
    <div class="section">
        <div class="slide">
            <div class="demo">Demo</div>Two</div>
        <div class="slide">Three</div>
    </div>
    <div class="section">Third</div>
    <div class="section">Four</div>
</div>
<div id="destroy"><input type="button" value="Destroy"/></div>
<div id="create"><input type="button" value="Create"/></div>

If you are able to reproduce your error in the fiddle, I will be able to help you. Otherwise you should check your code.

[neilmuralee]

Hi, thanks for getting back.

I've built on top of your fiddle adding a resize function, you can see the problem i am having - just resize the viewport till it destroys and then back again. You will see the navigation dot issue.

(Link updated)
http://jsfiddle.net/97tbk/160/

You can also see the js error:
Uncaught TypeError: Cannot read property 'top' of undefined when the plugin is not active.

[alvarotrigo]

That's because you are creating fullpage tens of times, everytime you make the window bigger than 768px, one instance of fullpage.js is created. for 769px, another for 770px, 771px....etc

You should control it with a flag variable...
But that's not part of fullpage.js that's about javascript knowledge. You should be asking in places usch as http://stackoverflow.com/

[byzanth]

Just for completeness: I updated alvarotrigo's example with a flag variable, so fullPage.js won't be created multiple times
http://jsfiddle.net/byzanth/97tbk/294/

[porridj]

Just wanted to say cheers for 'flagging' that. Was struggling with it, but managed to get the final pieces of my puzzle using @byzanth's jsfiddle :) Also cheers to @alvarotrigo for helping me understand why I needed to do it haha

[mnotw]

@porridj haha! @alvarotrigo is a kind and patient guy

[mcranisnational]

Here is an updated fiddle that includes the flag variable triggered on resize instead of just using the destroy/build buttons! http://jsfiddle.net/4vpepcsq/

[faliqaiman]

@mcranisnational great tricks man.. but I've try to set width and height but it only reflect for height function only.. jsfiddle try any luck for this one.. since would like to make the page go normal when in landscape mode..

[ParkJinHyoung]

Add it here source [no button]
http://jsfiddle.net/JinHyoung/m5k7wvk7/2/
Note please hahahaha...

[alexrumsey]

thanks all! super helpful