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');
}
Related
I have a "hiddeable" element, it hides when the user click on it, except when the user click in an input text field, the script is very simple:
$('#main_table #sidebar .mini_hid').click(function(){
$('#main_table #sidebar').removeClass('show');
});
$('#main_table #sidebar .mini_hid input[type="text"]').click(function(e){
e.stopPropagation();
});
To hide the element I remove the "show" class, and to avoid to trigger it clicking the text field I use a stopPropagation.
This works fine on Computers and Mac, but in Android devices stopPropagation is not working, so when an user clicks on the text field the whole element hides.
I need the stopPropagation() works to avoid hidding its container.
Ok I solved this issue changing the click event for mouseup.
$('#main_table #sidebar .mini_hid').mouseup(function(){
$('#main_table #sidebar').removeClass('show');
});
$('#main_table #sidebar .mini_hid input[type="text"]').mouseup(function(e){
e.stopPropagation();
});
This is not really a full solution but a workaround.
I'm using phonegap (cordova 2.8), and android 4.2.1,
I use as frame works: knockout, & jquery mobile.
The app is based on http://propertycross.com/jquery-mobile/
I get the following funny behavior:
when clicking on a button that moves to another screen #2,
if there is a button in #2 screen at the same location,
then it get clicked as well...
The only solution I found is to wrap the code that change the screen with setTimeout:
setTimeout(function() {
application.navigateTo(viewModel);
},600);
This solve the problem but slow down the app...
This is actually unfortunate since the phonegap is already too slow...
Thanks.
There are two things you can do:
1) e.stopPropagation(), e.preventDefault()
phopkins describes this here:
jQuery mobile tap event triggered for twice
I'll elaborate, as this was a major issue for me. This applies to any of the tap, click, vclick and probably other events.
Your event functions should have stopPropogation() and preventDefault() called, like so:
$('#selector').tap(function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
This helps, however, I found that you could still get the "phantom" click.
2) Bind the event to the page, not the button.
That way it's not bound to the next page.
For example, for a page with id='myPage' and a button with id='myBtn':
$('#myPage').on('tap', '#myBtn', function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
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
I have a small phonegap application with jquery mobile and backbone.
I'm trying to show popup to user by manually calling .popup() method.
Everything works fine on iOS but on android I got strange issue: popup is showing for few moments and than disappear.
Here the actual code:
var PostView = Backbone.View.extend({
events: {
'touchend .add-comment-button': 'addComment'
},
addComment: function() {
this.$(".comment-popup").popup('open', { history: false });
return false; // Stop bubbling.
}
});
I'm using history: false because this popup is actualy part of subpage.
The code looks very simple, I'm just can't understand why it can disappear, and why this happen only on android devices.
Thanks, and sorry for my bad english.
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
1 - Use the uncompressed jqm file. i.e jquery.mobile.1.2.0.js
2 - I was triggering the popup programatically using the 'tap' option - once changed to the 'click' option it worked.
$('.option').live('click', function() {
$('#popup-div').popup('open');
});
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
this code snippet may help you ->
$('#testBtn').on('tap',function(e){
console.log("button clicked");
e.preventDefault();
$('#testPOPUP').popup("open");
});
Please note i have used e.perventDefault().
I didn't feel like changing my .tap() events to the click event and I didn't have a case where I could use preventDefault()so I just added a timeout to the popup('open') line. My hoverdelay in jqm is set to 150 so I set this timeout to 600 just to be on the safe side. Works fine, doesn't feel sluggish for the user.
One way to 'fix' it is by setting data-history="false" on the popup div
See also this question
JQuery Mobile popup with history=false autocloses
I have the exact same problem when trying to use popup('open') on an android 2.3 device (both in native browser and in firefox) and it works just fine on browsers on other devices. I'm also using backbone event management to open my popup (used the tap event and no aditionnal options to popup).
What I did to 'correct' the problem is that I removed the backbone event management for this event and added a listener in the render function. In your case this would look something like this :
events: {
// 'touchend .add-comment-button': 'addComment'
},
render: function() {
$(this.el).html(this.template(this.model));
$(this.el).find('.add-comment-button').tap(function(el){
this.addComment(el);
return false;
}.bind(this));
}
I have no idea where the problem comes from (must be some incompatibility between backbone and jquery mobile) and why we only see it on android but for the moment with this workaround my app seems to work fine on any device.
Edit: oops, it turns out that in my case the problem was I was missing "return false;" in the function dealing with the event.
Now that I added it, it works correctly with the backbone event management.
Sadly that doesn't explain why you have the issue and why I was seeing it only on android.
In case it helps anyone, I had the same problem occurring with Bing Maps, with the Microsoft.Maps.Events.addHandler(pin, 'click', callback) method.
Not particularly nice, but instead I stored an ID in pushpin._id and did the following:
$("#page").on('vclick', function (event) {
if (event.target.parentElement.className === "MapPushpinBase") {
$("#stopPopup").popup('open');
}
});
One brute force option is to check whether popup was hidden and reopen it.
In a loop, because the exact time the popup becomes hidden seems to be varied.
var hidden = $('#' + id + '-popup') .hasClass ('ui-popup-hidden')
if (hidden) $('#' + id) .popup ('open')
A working example: http://jsfiddle.net/ArtemGr/hgbdv9s7/
Another option could be to bind to popupafterclose:
var reopener = function() {$('#' + id) .popup ('open')}
$('#' + id) .on ('popupafterclose', reopener)
$('#' + id) .popup ('open')
Like here: http://jsfiddle.net/ArtemGr/gmpczrdm/
But for some reason the popupafterclose binding fails to fire on iPhone 4 half of the time.
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.