jfrosty jfrosty - 6 months ago 66
jQuery Question

How to start plugin FullPage.js when browser window is resized from mobile to tablet and up?

Using fullPage.js, I disabled the plugin when window size is lower then 767px with the code below. It works, but when I resize it back from below 767px to something like 960px, the plugin doesn't work. Can anyone help restart the plugin after resizing?

JS:
function fullPageScroll() {
$('#main').fullpage({
navigation: true
});
}

var $win = $(window).width();

if ( $win > 767 ) {
fullPageScroll();
} else {
fullPageScroll();
$.fn.fullpage.destroy('all');
}

Answer

Because you also need to apply that on the resize event:

//first call when loading the site
doneResizing()

var resizeId;
//calling the function again  on resize so we can get the new width
$(window).resize(function () {
    //in order to call the functions only when the resize is finished
    clearTimeout(resizeId);

    resizeId = setTimeout(doneResizing, 500);
});

//your original code
function doneResizing() {
    var $win = $(window).width();

    if ($win > 767) {
        fullPageScroll();
    } else {
        fullPageScroll();
        $.fn.fullpage.destroy('all');
    }
}
Comments