We Keep Coding

Trigger ('mouseleave') - not working as desired on mobile

I have a burger menu button in the header which opens and closes the menu. And I have hover and focus animations for it.
So when the menu is clicked or tapped or touched (on mobile devices) - the second time it loses the hover and focus styles. Everything in the code below is working perfectly, but the trigger mouseleave isn't working. I tested my code and found out that on mobile devices when a person clicks on a button, hover animation applies there too. So trigger mouseleave should cancel the hover effects I have on my burger menu button, but it isn't working.
I have tried everything: I have put this in setTimeout function and tried other different events, too (like testing it out in different browsers). Yet nothing seems to remove that hover animation on mobile devices when a user touches or clicks this burger menu button. Please help, as I have been stuck on this for two days.
//losing focus for menu toggler on smaller devices
var loseFocusMenu = 0;
$(".c-header-nav__toggle").on("click touch", function(){
if (loseFocusMenu === 0){
loseFocusMenu++;
}else if(loseFocusMenu === 1){
$(".c-header-nav__toggle").trigger('mouseleave');
$(".c-header-nav__toggle").trigger('blur');
loseFocusMenu--;
}
});
I am developing a Wordpress theme, so I am using that platform (and obviously that's jquery in the code). Please help
Also that hover and focus animations are coming from internal styling in the style tag and coming from another class that's assigned to the same burger menu button

i solved the issue with adding and removing classes. if your hands are tied and u can't do it any other way like in my case than this is the work around

How to force select2 to open when click on it?

I use select2 in my website. I test it in the mobile device and found that select2 opened when keydown event happen. When the user tries to scroll the page and touch select2 element it opened while user wants to scroll page not use select2. This is not user-friendly. Now I like force select2 to opened when click on it.
Is this possible?
$("#element").select2();

iOS keyboard forces page scroll, is it possible to prevent the scroll event of iOS in javascript/jQuery

I've got a navigation remaining fixed when the page is scrolled,, it includes a search field, but when I'm trying to focus on the field while the page is scrolled, the keyboard pops up and forces a page scroll to the top of the page, and I'm not able to write anything there... I'd like to prevent that iOS autoscroll event..
Thanks

Prevent scrolling but allow swipe event in JQuery

I'm working on a mobile version of a webpage, and one of the features we have is a slide out sidebar. On my Android device, when the sdiebar is visible it is still possible to scroll the background using the part of the body that's still visible. To solve this, I disable scrolling on the page using:
$(document).bind('touchmove', function (e) { e.preventDefault(); });
When the sidebar is opened, and then unbind it when the sidebar is closed.
Recently I wanted to try and add in the ability to swipe and close the sidebar. Using jQuery Mobile functionality, I subscribed tot he swipeleft event like so:
$(document).on("swipeleft", swipeLeftHandler);
function swipeLeftHandler(event) {
if (isSidebarOpen()) {
toggleSidebar();
}
}
I'm intentionally subscribing to the entire page since it doesn't matter where they swipe. This doesn't work when I'm preventing touchmove, but does when I remove that code. Obviously the downside to that is that a user can still scroll the main page behind the sidebar.
To implement the sidebar, I'm using the JQuery slide event and have it inside a div that's floating to the left and has a fixed position.
Is there any way I could disable scrolling but still allow for the swipeleft event to work?

tap event being handled by elements that dont exist at time of tap

click/tap event not working correctly
click or tap seems to fire on the new element that appears even though originally handled by other element which caused the element to appear in the first place... wtf?
I have a mobile web app where a button brings up a bootstrap modal with a unordered list in it. The items in the list make a selection and close the modal. In standard chrome and chrome's android emulator there is no issue. But on my tablets, when you click the button, if the modal covers the button, the modal is brought up then a selection is made on the modal exactly where you clicked on the button. Its like a duplicate click/tap is being processed at the same location. I have tried tap, click, and touchstart events for both the button and the lineitem. What can I do to prevent this issue?