I am having the most annoying situation. Ok, here goes. I am using a javascript based sliding menu for a mobile app. The "slider" works just like Facebook mobile, where you can click the button to show the menu on the left and click it again to close the menu. As an alternative, if you touch the still visible part of the page when the menu is showing it will also close. And that's it.
Problem: Note that I'm using Phonegap for this app. When I run the iOS simulator in Xcode all works fine EXCEPT if you swipeleft, for example, the page will move. I want to disable the swipe event all together. I have tried preventDefault, return false etc. Nothing seems to work. Again, my only goal is to disable touch events because for this app, I simply don't need them. Please see the javascript code for the menu show/hide below.
Thanks is advance. All is appreciated.
$(function(){
var menuStatus;
// Show menu
$("a.showMenu").click(function(){
$('#menu').show();
if(menuStatus != true){
$(".ui-page-active").animate({
marginLeft: "170px",
}, 300, function(){menuStatus = true});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
// Menu behaviour
$("#menu li a").click(function(){
var p = $(this).parent();
if($(p).hasClass('active')){
$("#menu li").removeClass('active');
} else {
$("#menu li").removeClass('active');
$(p).addClass('active');
}
});
});
You could over-ride the $.event.special.swipe.horizontalDistanceThreshold to a larger value and prevent swipes on your page from triggering the swipe event.
Refer to Touch Events -> Swipe
Related
I'm developing a mobile cross platform web app using Framework7 and phonegap build, in a contacts page i embedded a google map view.
In all the pages a side panel can be opened with the swipe right gesture.
I would like to pan through the map freely without opening the side panel, how can i reach this ?
Thanks
you can change option dynamicly like this:
myApp.params.swipePanel = false;
so you can do this:
$$(document).on('pageAfterAnimation', function (e) {
page = e.detail.page;
if (page.name === 'pageWithGoogleMap') {
myApp.params.swipePanel = false;
} else {
myApp.params.swipePanel = 'left';
}
});
there is a lot of other way to do this choose the best for you needs
Like the title says I'd like to disable the context menu after long click on pretty much every thing on my web page. This said, I still want all link to be active even if the context will not show up. One more thing, this will only be use in a local network where clients will be using the same tablets, OS and Web browser.
I've been trying this Solution but doesn't give me satisfaction cause it breaks the links. and other answers doesn't work for me.
I'm no javascript pro so I may be missing some points...
the CSS -webkit-touch-callout: none !important; do not work on firefox if I'm not wrong.
So how to achieve this? CSS? HTML? JAVASCRIPT?
Thanks for your cooperation ;)
UPDATE
I've found this code which create the new contextmenu and prevent default but....
<script>
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
alert("You've tried to open context menu"); //here you draw your own menu
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
alert("You've tried to open context menu");
window.event.returnValue = false;
});
}
</script>
... the original context menu still opens after the new one :(
Your solution is good, but you were mislead by the comment. You did not draw any new context menu, so your code will only stop the contextmenu event.
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);
I have create an popup menu in my app the problem with it is when i open the popup menu and then scroll the page the popup menu also scrolls up with the page even i tried using data-dismissible="false" but nothing happen still the problem remains same.
Thanks in advance.
There's an easy fix for this problem. Just prevent page scrolling when popup is active.
Working jsFiddle example: http://jsfiddle.net/Gajotres/aJChc/
For this to work popup needs to have an attribute: data-dismissible="false" it will prevent popup closure when clicked outside of it. Another attribute can be used: data-overlay-theme="a" it will color popup overlay div. That is a DIV that covers screen when popup is opened and prevents popup closure.
And this javascript will work on every possible popup:
$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','auto');
});
For me this method didn't work, it works on browser but not in Phone Gap application.
So I resolve it in this way:
$('#Popup-id').on({
popupbeforeposition: function(){
$('body').on('touchmove', false);
},
popupafterclose: function(){
$('body').off('touchmove');
}
});
Hope it helps!
if body scrolling is not prevented, try below. in my case i was using boilerplate.css so the preventing the body scrolling not worked.
popupafteropen: function (e) {
$('html').css('overflow', 'hidden');
},
popupafterclose: function (e) {
$('html').css('overflow', 'auto');
}
so i have created !a simple popup using css and jquery. the problem is, when the popup is activated, links underneath the popup can still be clicked. is there any way to prevent this from happening. the click box for some of the links in the popup are small and one can easily click next to it which means the link underneath the popup is clicked.
the site i am working on: taxslayerplayer.com, look at it on an android and you will see what i mean. also, i have experienced this problem on many other websites while browsing on my phone.
any pointers would be appreciated, thanks!
I'm not sure about a strictly-mobile solution, but you could check for the pop-up being visible and, if it's visible, simply return false in the click-handler for links:
$('a').filter(
function(){
return !$(this).closest(popupSelector).length;
}).on('click', function(e){
if ($(popupSelector).is(':visible')) {
return false;
}
else {
// do whatever you'd normally do with the links
}
});
Alternatively, you could instead use a variable, for example popupIsShown, set it to false initially (on DOMReady), and then set it to true when the popup is shown, and reset to false when it's re-hidden, making the if check a little less expensive:
$('a').filter(
function(){
return !$(this).closest(popupSelector).length;
}).on('click', function(e){
if (popupIsShown) {
return false;
}
else {
// do whatever you'd normally do with the links
}
});
Use a boolean value and set it to false in case of pop-ups. It works!
PS : Just checked.. David has already answered it.
I am new to jQuery Mobile 1.4.5, when I try to implement changePage() triggered by swipeleft, it works perfect with following code:
$("#mypage").on("swipeleft", function(e){
log("swipeleft");
if(event.handled !== true) // This will prevent event triggering more then once
{
$.mobile.changePage('#mypage2', {transition: "slide"});
event.handled = true;
}
return false;
});
However, once the changePage() event is triggered, it can't go back until the next page is completely showed. I was wondering is it possible to do like other "swipe to change page" function e.g. Facebook slide to show friend list. I can slide to show part of target page, and the edge of page is just followed where my finger is. Instead of changing whole page
Thanks for your help.