Panel won't close when touching the menu button on Chrome for Android

[diegopau]

Tested in several devices and Chrome is the default browser now since Android 4.4

It is happening with my blog: http://blog.chattyhive.com/
but also with the jpanelmenu hompage: http://jpanelmenu.com/

I tried to debug it but I couldn't find a clue.. please let me know if you can find a solution!

[tidy]

I am also seeing this (chrome v 33.0.1750.136, android 4.3)
I have closeOnContentClick set to true, and touching everywhere in the content except the menu button still closes the menu fine, but nothing happens when you tap on the menu button itself.

[chillybin]

I had this issue but seemed to have fixed it with a lot of to-ing and fro-ing, was not sure what the actual fix was in the end...

$(document).ready(function() {

var jPM = $.jPanelMenu({
    menu: '#menu-navigation',
    trigger: '.responsive-menu-icon a',
    direction: 'right',
    closeOnContentClick: false,
    duration: 1000
});
jPM.on();

$(".section-nav .genesis-nav-menu").addClass("responsive-menu").css('display', 'none');
$(".site-header .title-area").before('<div id="responsive-menu-icon" class="responsive-menu-icon"><a href="#"></a></div>');

});

#responsive-menu-icon {
display: block !important;
background: #f5f5f5;
line-height: 60px !important;
height: 60px;
width: 60px;
border-left: 1px solid #ddd;
float: right;
position: absolute;
right: 0;
}

#responsive-menu-icon a {
display: block !important;
height: 60px;
width: 60px;
position: absolute;
top:0;
}

[7samurai]

I can confirm this bug.
Chrome 34.0.1847.114 on Android 4.3
Opening without problem, closing with 'closeOnContentClick: true' will not work on the trigger. Setting this to 'closeOnContentClick: false' works without Problems. jQuery version 'jQuery v1.10.1'

[MarkWittens]

I wrote this quick fix for this, just disable closeOnContentClick and add the following code:

$('#page-wrapper').click(function(event) {
if (event.target.id != 'mobile-menu-button') {
jPM.close();
}
});

#page-wrapper can be any element on your page that must trigger closing of the menu, mobile-menu-button is the id of the menu button that should trigger the close event.

This way the menu will be closed on content click and the button works as well.

[jxlusa]

Thanks MarkWittens!

[diegopau]

I still can't get it to work.

How should i disable closeOnContentClick? i just deleted it from the code and pasted the code you gave us changing the ids. This is how my jpanelmenu.js looks now:

(function(e){..........})(jQuery); ===> I removed closeOnContentClick:!0 from code

var jPM = jQuery.jPanelMenu({
menu: '.primenu',
trigger: '.ft-jpbutton'
});

$('#main').click(function(event) { =====> #main is the id of the whole page, not including the menu
if (event.target.id != 'mobile-menu-button') { ===> i created an #mobile-menu-button id in the button a element.
jPM.close();
}
});

jPM.on();

Now button just won't work, it doesn't open the menu, i think its trying to close the menu all the time

[jxlusa]

Diego, Not sure how your page is set up and things are nested so can't say for sure what all the problems might be, but one is defiantly that you need to disable the closeOnContentClick.
Just deleting it will not work because the default is "true". You need to add it back as:

var jPM = jQuery.jPanelMenu({
menu: '.primenu',
trigger: '.ft-jpbutton',
closeOnContentClick: false
});

Just doing that and removing all the other changes might be your best solution if it's more trouble that it's worth to troubleshoot. Even if you have to actually click the menu button to close, at least everything will work as expected.
I like to also add another trigger inside the panel so it can be closed from within the panel itself. Just an additional "close" button within the panel menu, with your trigger class on it will work.

[diegopau]

Hi, thanks a lot for your help. If i remove any other changes and add closeOnContentClick: false as you proposed the button is working perfectly indeed! It would be nice if i could close the panel clicking (touching on mobile) in any other part too!

I can't guess why it isn't working, with the additional code the click event should be only triggered inside a div of my blog that is not including the bar where the button is placed, so i don't know why adding this code the button stop working.

If you have a moment to take a look... all the code is here open for everyone to see: https://github.com/diegopau/chattyhive-blog/blob/master/config/public/wp-content/themes/inspirin/js/jpanelmenu.js

And the blog is this one: http://blog.chattyhive.com/ (you will see the button only if resizing the window to a smaller one or using chrome from your android mobile.

[diegopau]

I looked into chrome web inspector and i get this error:

What am i doing wrong? (no, i have no idea of javascript...) thanks a lot in advance.

[diegopau]

Ok, fixed. It was just that Wordpress uses jQuery in noConflict mode by default. So I changed $(.content-grid) by jQuery(.content-grid) and everything working fine now: being able to close with button or click in any other part outside the panel. Also working fine in Google Chrome for Android that was the main point of the issue.

I am closing the issue. Thanks MarkWittens for your fix and everyone else for your help!