Menu closes on scroll

philler82
2 years, 6 months ago

On the site www.swiss-orienteering.ch/ the menu is too long for some mobile phones (especially when a submenu is expandend) for it to fit onto one screen without scrolling. But wen one scrolls, the menu closes by itself. How can I prevent that?

Thank you,
Philippe

dryabov
2 years, 6 months ago

A tricky case that is hard to reproduce locally. Try to add the following code to the templates/mobile_flat/js/custom.js file:

 
jqm.mobile.resetActivePageHeight = function(){};

It should remove some page reflows (the only negative effect is that the footer will not be moved to the bottom of the page during expanding of menu).

philler82
2 years, 6 months ago

Hi Denis

Thanks, I tried it, but I don't think the file gets loaded. Do I need to do something to make it load? You can check by yourself, it's online now.

Philippe

dryabov
2 years, 6 months ago

It's loaded (and fixes some vertical sidebar jumps during expanding of submenus).

BTW, as to accidental swipes that close the sidebar, it's possible to increase a swipe distance from default 30px to 100px (for example) using the following code in the above mentioned custom.js file:

 
jqm(document).ready(function () {
  var swipe = jqm.event.special.swipe;
  swipe.horizontalDistanceThreshold = swipe.verticalDistanceThreshold = swipe.scrollSupressionThreshold = 100;
});

philler82
2 years, 6 months ago

OK, I've set the swipe to 50, as I found 100 is too much for good usability. But to me it seems that accidential swipes are probably not the reason. I'm sure I'm not swiping to the left but often the menu closes, even with the code resetActivePageHeight. I currently can't tell if it really got better or is about the same as before. Please let me know if you know any other way to improve this.

Thanks
Philippe

dryabov
2 years, 6 months ago

I'm able to reproduce the issue by opening all (or most) submenus and using intertia scroll to scroll up to top (or bottom) edge of the sidebar panel.

Could you edit the templates/mobile_flat/js/pageinit.min.js file by removing the second instance of the "resize" word, so that the related code is transformed from

 
...jqm(window).on("pagecontainershow orientationchange resize",function(a){...

 
...jqm(window).on("pagecontainershow orientationchange",function(a){...

Not sure it'll fix the issue, but maybe it will be possible to reproduce the issue in browser's emulator.

philler82
2 years, 6 months ago

I've applied the change to the file. Now the behavior changed a bit. It seems to jump to the page top sometimes, but not close the menu. I'm not sure which behavior I like better

As far as I can see, it's still not possible to simulate it in the desktop browser.

dryabov
2 years, 6 months ago

There is one more code to test (append it to the same file):

 
var jqmPanelWidget = jqm.mobile.widgets.panel._proto,
    origPositionPanel = jqmPanelWidget._positionPanel;
jqmPanelWidget._positionPanel = function () { origPositionPanel.call(jqmPanelWidget); };

philler82
2 years, 6 months ago

Thank you, I've added the code to the custom.js file. Now that works pretty great! However, I can only scroll when I touch the menu, not anymore when I touch the right side of the menu (the page itself). Do you have an idea for this too?

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.
I accept cookies from this site. Agree