I’m using a JpushMenu script to control a menu when window is below 580px. The problem is, overflow scroll on a nav menu is being ignored on mobile devices, but seems fine from desktop/laptop with window below 580px.
I cannot see why this would be fine if viewing from a desktop/laptop browser (scroll bar in correct place), but from a mobile, swiping up/down on ul elements does nothing
Hi Ry, Yeah the viewport meta-tag is there. The media query transitions are fine. Once menu has collapsed to the slidein, the nav>ul elements are not responding to the scroll on mobile devices. However, from a desktop/laptop the scroll bar is evidently there and working.
Just got the below message from PaulOB, so I’m going to look into the script he talks of…
The link to the script seems to be missing from my post but I assume you know it was the localisation script that was the culprit.
Z-index or css will have no help as its the script taking away the ability to scroll. It’s stopping the default action. I tested on a cut down version with the menu only on display so there were no other factors involved. While the touch is over the list area it will not react to scroll. Perhaps there a preventDefault in action because of the click behaviour to open the items. Maybe the script will need to detect touch instead and not prevent the default action…
Hmm…the localization script is used for translation… it’s a big file too =(
What I may do then to save searching for the bit of code in a huge file that’s causing the prob … I may remove menu translations from the localization tool and create a seperate jq function that translates the menu… Hopefully then it’ll ignore the ul of the menu and allow it to scroll as it should
//// Just removed touchstart and it seems find on android
I think the prevent default inside an applyClick function must be messing things up. Suppose this is a good example of how not to use stop prop and prevent def!
Could anyone suggest how I can fix this up, so it will allow for mobile scrolling in the nav? pwitty pwz
function applyClick() {
$('#nav>ul>li, .subnav li, .sub_subnav li').unbind("mouseenter mouseleave");
//reset active states on initial call
if ($(".subnav").hasClass('active')){
$(".subnav").removeClass('active');
$(".subnav").css ({"display":"none"});
$(".mobile-arrow").removeClass('rotate');
$(".sub-mobile-arrow").removeClass("rotate");
}
if($(".sub_subnav").hasClass('active')) {
$(".sub_subnav").removeClass('active');
$(".sub_subnav").css ({"display":"none"});
}
$('#nav>ul>li').on('touchstart click', function(e){
//check if active class exists on click, if so close and set inactive
if ($(this).find(".subnav").hasClass('active')){
$(this).find(".subnav").toggleClass('active');
$(this).find(".subnav").css ({"display":"none"});
$(this).find(".mobile-arrow").removeClass("rotate");
}
else{
$(this).find(".subnav").toggleClass('active');
$(this).find(" .subnav").stop().fadeToggle(300);
$(this).find(".mobile-arrow").addClass("rotate");
}
e.stopPropagation(); e.preventDefault();
});
$('.subnav li').on('touchstart click', function(e){
//check if active class exists on click, if so close and set inactive
if ($(this).find(".sub_subnav").hasClass('active')){
$(this).find(".sub_subnav").toggleClass('active');
$(this).find(".sub_subnav").css ({"display":"none"});
$(this).find(".sub-mobile-arrow").removeClass("rotate");
}
else{
$(this).find(".sub_subnav").toggleClass('active');
$(this).find(".sub_subnav").stop().fadeToggle(300);
$(this).find(".sub-mobile-arrow").addClass("rotate");
}
e.stopPropagation(); e.preventDefault();
});
$('.sub_subnav li').on('touchstart click', function(e){
$(this).find(".sub_subnav").stop().fadeToggle(300);
e.stopPropagation(); e.preventDefault();
});
}