Turn off the plugin under a certain screen size

[Le-future]

Hi there!

Firstly, thank you so much for providing a great plugin like this one!

So, what I need is to, under a certain resolution, stop the plugin and when you go back to a higher resolution, re-activate it.

I've tried with $(window).resize(function() { but without success... :-(

This is why I'm asking a start of solution to you :-)

Thank you for your patience and your amazing job!

[alvarotrigo]

Sorry, I though you were speaking about fullPage.js.

The plugin doesn't provide any way to do it.
If you really need it, contact me to ask for a customization.

[Le-future]

Alright, no problem ;-)

I'm trying to do it with the CSS, I've almost find a solution for having a good layout on mobile, tablet...

Sorry, I'm not a real jQuery Pro ^^ and there is not a solution, external to the plugin to "kill it" when the window is resize and pass through the resolution and re-activate it when you go the opposite road?

Best

[alvarotrigo]

There's no external solution I'm afraid.

[Le-future]

Eww ^^

In fact, with the CSS I can display perfectly the content on small devices but only the left part.

The plugin continues to do his job smoothly but the right sections are logically not displayed.

[alvarotrigo]

I have nothing else to say I'm afraid.

[Le-future]

Ok, I'm going to try to find the best solution, thanks!

[alvarotrigo]

You can use $.fn.multiscroll.multiscroll.destroy(); to destory the evens. Then you would have to deal with the CSS styles, wrappers and so on.

[Le-future]

I tried to implement it in my code but the plugin is going weird 😄

What is wrong here :

$(document).ready(function($) {
    $(window).resize(function() {
        if ($(window).width() < 1280) {
            $.fn.multiscroll.multiscroll.destroy();
        }
        
        else {
        $('#multi-div').multiscroll({
            // sectionsColor: ['#FFF', '#FFF', '#FFF'],
            anchors: ['first', 'second', 'third', 'fourth'],
            menu: '#menu',
            navigation: true,
            navigationTooltips: ['Welcome', 'About', 'Newsletter', 'Map'],
            loopTop: true,
            loopBottom: true
        });
    }
});

I'm able to manage the CSS but I'm not good enough in jQuery for the moment...

EDIT :

Tried with the code like that and the plugin is well disabled when you load the page with a resolution under of 1280px and activated when you load the page with a resolution superior to 1280, this is almost good, just need this but when the user is resizing 😃 :

$(document).ready(function(){
      if ($(window).width() <= 1280) {
         $.fn.multiscroll.multiscroll.destroy();
      }
      else {
        $('#multi-div').multiscroll({
            // sectionsColor: ['#FFF', '#FFF', '#FFF'],
            anchors: ['first', 'second', 'third', 'fourth'],
            menu: '#menu',
            navigation: true,
            navigationTooltips: ['Welcome', 'About', 'Newsletter', 'Map'],
            loopTop: true,
            loopBottom: true
        });
      }
});

[talgautb]

@Le-future do you found solution ?
may be you should use $.fn.multiscroll.multiscroll.destroy() and $.fn.multiscroll.multiscroll.build(); ?

[Le-future]

@talgautb for the moment I've stopped to try something, I'm still at the point mentionned in my last message.

the build function can work with this plugin?

[talgautb]

@Le-future update plugin, i added destroy and build functions #30
something like that ?

$(document).ready(function(){

  $('#multi-div').multiscroll({
    // your config for plugin
  });

  function toggleMs() {
    if ($(window).width() <= 1280) {
      $('#multi-div').multiscroll.destroy();
    } else {
      $('#multi-div').multiscroll.build();
    }
  }

  $(window).resize(function(){
    toggleMs(); // check to destroy or build when we resize browser
  });
});

[Le-future]

@talgautb Very interesting mate 👍

I'm gonna test your solution asap, I keep you posted :-)

[Le-future]

@talgautb Done a test a few minutes ago and WOW, what a nice surprise, under 1280px the plugin is well disabled and re-activated when you resize the window more than the worth 1280px, congrats man!

That's almost perfect, the small "black point" is when you load the page in for example a window of 1200px for the width, the plugin remains activated, you have to resize the window to disable it, any ideas to disable it immediately when the window is already under the worth 1280px?

EDIT :

Found a solution but a little bit hacky I guess, added just next your code part :

setTimeout(function() {
   var screenWidth = screen.width;

   if ($(window).width() <= 1280) {
      $('#multi-div').multiscroll.destroy();
   } else {
      $('#multi-div').multiscroll.build();
   }

}, 1);

[talgautb]

@Le-future just init function when page load:

$(document).ready(function(){

  $('#multi-div').multiscroll({
    // your config for plugin
  });

  function toggleMs() {
    if ($(window).width() <= 1280) {
      $('#multi-div').multiscroll.destroy();
    } else {
      $('#multi-div').multiscroll.build();
    }
  }
  // check when page load
  toggleMs();  // NEW

  $(window).resize(function(){
    toggleMs(); // check to destroy or build when we resize browser
  });
});

[Le-future]

I thought to have tested with toggleMs when page load but visibly not 😄

Works perfectly @talgautb , I'm very grateful to you for having helped me with this trick!

And just a suggestion/asking, under 1280px, with the CSS I will be able to get a perfect layout, but as you know, the div "left1 2 3 right 1 2 3 etc..." will be in the wrong order, what could be the best solution to get those ones in the positive order like "left1 right1 - left2 right2 - left3 right3"?

[talgautb]

@Le-future 😄
about order - there is no such method in plugin, so you should do it yourself
p.s. if that all, can you close issues ?)
if you have any problems or bugs with plugin, you always can open new issues :)

[Le-future]

Alright, thanks so much mate 😃

Edit : Done 😉

[talgautb]

oops ) Do you have button 'Close issues' ?
or it can do @alvarotrigo

[Le-future]

Hey @talgautb , sorry to reopen the issue but I think it's better to ask my question here,

When I load the page with a size higher than 1280 px and I reduce it under the 1280px it's impossible to scroll, the "scroll anchor" is well disabled but I can't scroll normally as a simple page. I don't have the problem if I load the page with a size under the 1280px. ( only on Chrome visibly )
Solved, it was a problem of height

And last question, do you think is possible to set the order of the sections with jQuery under the 1280px?

Thanks so much for your help 😃

[Le-future]

Regarding the order for the div under 1280px, I get a solution but almost good 👍

$(document).ready(function(){

    function OrderDiv() {
        if ($(window).width() <= 1280) {
            $("#right1").insertAfter("#left1");
            $("#right2").insertAfter("#left2");
            $("#right3").insertAfter("#left3");
            $("#right4").insertAfter("#left4");
        } else {
            $('#multi-div').multiscroll.build(); // I don't know what to write here
        }
      }
      // check when page load
      OrderDiv(); 

      $(window).resize(function(){
        OrderDiv(); 
      });
});

When you load with a screen size bigger than 1280px, no problem the multiscroll is on, you resize your screen under 1280px, the order of the div is well modified as I need.

But when you load under 1280px and resize up to 1280px, the multisrcoll or when you resize up to 1280px even if you have loaded the page with a resolution bigger than 1280px, the multiscroll seems to be dead ^^

EDIT :

Found the solution with the adding of insertAfter and prependTo :

$.fn.multiscroll.destroy = function() {
            $.fn.multiscroll.setKeyboardScrolling(false);
            $.fn.multiscroll.setMouseWheelScrolling(false);

            $("#right1").insertAfter("#left1");
            $("#right2").insertAfter("#left2");
            $("#right3").insertAfter("#left3");
            $("#right4").insertAfter("#left4");
            // $("#right5").insertAfter("#left5");
            // $("#right6").insertAfter("#left6");
            // $("#right7").insertAfter("#left7");
            // $("#right8").insertAfter("#left8");

            $(window)
                .off('hashchange', hashChangeHandler)
                .off('resize', doneResizing);

            $(document)
                .off('mouseenter', '#multiscroll-nav li')
                .off('mouseleave', '#multiscroll-nav li')
                .off('click', '#multiscroll-nav a');
        };

        /**
        * Build multiscroll.js plugin's events after destroy
        */
        $.fn.multiscroll.build = function() {
            $.fn.multiscroll.setKeyboardScrolling(true);
            $.fn.multiscroll.setMouseWheelScrolling(true);

            $("#right1").prependTo("#right-part");
            $("#right2").prependTo("#right-part");
            $("#right3").prependTo("#right-part");
            $("#right4").prependTo("#right-part");
            // $("#right5").prependTo("#right-part");
            // $("#right6").prependTo("#right-part");
            // $("#right7").prependTo("#right-part");
            // $("#right8").prependTo("#right-part");

            $(window)
                .on('hashchange', hashChangeHandler)
                .on('resize', doneResizing);

            $(document)
                .on('mouseenter', '#multiscroll-nav li')
                .on('mouseleave', '#multiscroll-nav li')
                .on('click', '#multiscroll-nav a');
        };

[Le-future]

@talgautb @alvarotrigo Hi guys, just a small question, this part :

// check when page load
  toggleMs();  // NEW

Provokes this error : TypeError: f.handler.apply is not a function

And same for :

$(window).resize(function(){
        toggleMs(); // Checking to destroy or build when we resize browser
    });

when you go under 1280 and go up, each time

how could I solve this, can't find a solution

[talgautb]

@Le-future hard to say) may be if we'll see all script

[Le-future]

@talgautb thanks for your answer, how can I show you all script here?

You need multiscroll.js and my main js file where I start the plugin?

EDIT :

I found the issue, it was coming due to this :

$(document)
                .off('mouseenter', '#multiscroll-nav li')
                .off('mouseleave', '#multiscroll-nav li')
                .off('click', '#multiscroll-nav a');

and

$(document)
                .on('mouseenter', '#multiscroll-nav li')
                .on('mouseleave', '#multiscroll-nav li')
                .on('click', '#multiscroll-nav a');

Maybe because I apply a display-none on #multiscroll-nav under 1280px?

By the way, a new error but small I think is appeared when I resize and go under 1280px :
Uncaught TypeError: Cannot read property 'top' of undefined

It's due to insertAfter applied on each section

Line 329 :

$('.ms-right').css('top', -$('.ms-right').find('.ms-section.active').position().top );