We are facing an issue in our shopify website in mobile devices. On clicking a category, it opens and child menu items dropped down. But it doesn't get closed on clicking back. Only it gets closed, when we click on another category menu.
Could anyone help here.
Thanks in advance.
Its better to show code you are trying.
Main problem is OnClick Event does not register on mobile devices that
is because you don't click on anything you generally tap on menu. So
it will be better if you add mobile event along with it. like you can
use touchstart event as give in code below
$(document).ready(function() {
$('ul li').on('click touchstart', function() {
// Show Menu Item
});
});
Another Alternative Option
you can also detect touch devices and manipulate things -
$(document).ready(function() {
/* Detect Mobile Device As Below */
if(is_touch_device()) {
// Code Here to handle for Mobile
}
});
Related
today I would like to simulate a click after a visitor click in mobile the menu covers the content and therefore you should close the menu automatically after clicking on the button. On PC it worked but on Safari it doesnt. Do you have solutions?
$(document).on('click', '.nav-side-sub-button', function(click) {
click.preventDefault();
$(".side-menu-control").click();
});
Thanks a lot!
here is the site I am working on:
https://cutt.ly/sxOSOTY
the problem is if you click on the image slider it doesn't detect the click event "On mobile devices only". On desktop its working. But seems like click on mobile device for that particular div is not working.
$(document).on("click", function(e) {
e.preventDefault();
alert('clicked');
});
Its working for full page, but not inside this div "slick-list draggable" I am unsure what is preventing click even. Any help is greatly Appriciated!
$('elemnt').unbind('touchend');
This resolved the issues. Now the div is clickable again.
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
I am trying to open child dropdown on its parent dropdown change event, In my form, I have 10 dropdowns which I need to open one-by-one on dropdown change event of its parent Select.
I tried lots of jquery snippets but those are working on desktop browsers only, NOT in mobile like http://jsfiddle.net/XE73h/444/
I have also tried size attribute as $("#sel").attr("size", 10); but it is also not working in mobile. (tried in Chrome for Andriod and Safari for iPhone devices)
To trigger the function with click or touch, you could change this:
$(document).click( function () {
To this:
$(document).on('click touchstart', function () {
Or this:
$(document).on('click touch', function () {
The touchstart event fires as soon as an element is touched, the touch event is more like a "tap", i.e. a single contact on the surface. You should really try each of these to see what works best for you. On some devices, touch can be a little harder to trigger (which may be a good or bad thing - it prevents a drag being counted, but an accidental small drag may cause it to not be fired).
For reference you can see this link
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?