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?
Related
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 have problem with Semantic-UI when I scroll page. If I start scrolling and I touch dropdown, the whole content is showing.
I only want to open dropdown when I click on it, not even my finger is going through it.
Try to scroll this page on mobile: http://semantic-ui.com/modules/dropdown.html
Just unbind touchstart event, like:
$('.ui.dropdown').unbind('touchstart');
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
}
});
I'm using the idangerous "Swiper" slider. One of my slides has a textarea in it that is causing issues. Everything is OK on the desktop, but on mobile when entering text in the textarea, Swiper seems to reinitialize and return to the first slide.
As this happens on mobile only, I am guessing it is related to one of the touch events firing in the text area.
As suggested in another post I have applied:
$('textarea#text_area_name').on('touchstart mousedown', function(e){
e.stopPropagation()
})
This didn't solve the problem, so I extended it to include all touch events. And then all parents (until the swiper wrapper). Still with no success.
I have tried using alerts to show which touch events are firing. But I can't see the event that is fired immediately before the before swiper resets.
Does anyone have any experience of using a textarea within the idangerous swiper slider? Or any ideas on what event may be causing the issue and how to prevent it?
Sometimes when you write the question down the answer becomes clearer...
I was reinitializing Swiper on window.resize to manage the dynamic sizing. The resize event was getting triggered by the textarea on mobile devices. Maybe this is due to the soft keyboard popping up. Anyway, removing the reinitialize on resize solved the problem.
I have a container div I have set touchstart/move/end event listeners in order to scroll the content within it without the page scrolling. Now my issue is how do you allow links within it to be clickable? I am setting e.preventDefault(); within my touchstart handler to prevent the page from jerking while scrolling and this is preventing my links from being clickable. Any ideas or suggestions?
Try binding to touchmove instead. This will only be triggered if the user touches and then drags, so should not interfere with them clicking. (Tested here)