How can I enable/disable(in real time) javascript plugins on a webpage?

Question

I need to enable/disable .js plugins in real time. When user re-sizes his browser window, desktop version becomes mobile. The thing is I need to disable some javascript ( fullpage.js ) and add some css. And there is no problems if you reload the page or use full-screen window on your pc, from start to the end. The question is : how can I disable fullpage.js on width < 800 ? I've tried this things :

Added this function to body onresize event (no result without reloading) :

 function checkWidth() {
        if($(window).width() <= 760 ){
            $('#menu-header-button').click(function(){
                $('#navigation').toggleClass('navbar-v');  
                $('#logo-mobile').toggleClass('visible');
                $('#menu-header-button').addClass('disabled');
                 setTimeout(function(){ 
                    $('#menu-header-button').removeClass('disabled');  
                 }, 500);
            });
        } else if($(window).width() > 760 ){
          $('#fullpage').fullpage({
              menu: '#menu',
              anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
              css3: true,
              afterLoad: function(anchorLink, index){
              if( anchorLink == 'firstPage'){
                   $('#navigation').removeClass('navbar-v'); 
              }
          },
              onLeave: function(index, nextIndex, direction){
              setTimeout(function(){ 
                    $('#navigation').addClass('navbar-v'); 
              }, 500); 
              }
            });
        }

}

This was working only sometimes :

$(window).onresize= checkWidth();
function checkWidth() {
                    if($(window).width() == 761 ){
                        location.reload(true);
                    }
                    //...
}

This wasn't working at all :

   $(window).onresize= checkWidth();
    function delayCheckWidth(){
      setTimeout(function(){ 
                              checkWidth(); 
                           }, 50); //I thought some delay time can be useful here 
    }
    function checkWidth() {
                        if($(window).width() == 761 ){
                            location.reload(true);
                        }
                        //...
    }

Related themes i checked out :

1. Throttling
2. How to disable / Enable plugins?
3. Enable / Disable JavaScript code
4. How to disable / Enable plugins?
5. Enable and disable jquery knob dynamically
6. Disable and enable jQuery context menu
7. Lots of others.

Nothing about real time or nothing interesting/helpful .

Do you have any advises? Maybe i don't need to go this exactly this way ?

Answer 1

Have you tried the responsive option of fullPage.js? Not sure if that's what you want or your really need to destroy fullPage.js completely.

From fullPage.js documentation :

responsive: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin's container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

The normal scrolling in fullPage.js will keep sections height as well as the events assigned to the menu, or the control arrows for the horizontal sliders, but it will scroll normally as any website. You can see a demo of that mode here .

In any case, if you really want to destroy fullPage.js for any reason, you would need to use the provided method for it. From the docs:

$.fn.fullpage.destroy(type)

Destroys the plugin events and optinally its HTML markup and styles. Ideal to use when using AJAX to load content. ()

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 (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();

//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');