My application has a swipeleft and swiperight feature which brings up the navigation menu. The code looks like this.
$(document).on("swipeleft swiperight", function(swipeEvent) {
//my code here
}
In a page of the app I am using a jquery mobile popup to display an image. The problem I have is that the swipeleft and swiperight still works inside the popup and brings up the navigation bar in the background and I dont want this.
I have used data-dismissible="false" on the popup widget but that does not help.
How do you think I should fix this problem?
You could bind a function to the popupcreate event (http://api.jquerymobile.com/popup/#event-create) that nullifies the swipeleft swiperight functionality. One way to do this would be to have the popupcreate update a global variable to true, and then have your .on(swipeleft,swiperight) check the value of that variable before doing anything. Then you could set it to false on popupafterclose event.
Using event.stopPropagation(); worked for me.
I added swipeleft and swiperight handlers on my popup div and used event.stopPropagation(); inside it.
$('#mypopup').on('swipeleft swiperight', function(event) {
event.stopPropagation();
});
Related
I am gonna disable swipe event (exactly right and left on slider part) on website mobile view.
This is my js code.
jQuery(document).on("swipeleft swiperight", '#sample_slider', function(e) {
e.stopImmediatePropagation();
e.preventDefault();
});
This doesn't work on #sample_slider element.
Or did point wrong element for swipe?
Use :hover css property and pass pointer-events:none; style to the element this should do the trick
In your someAction() function you will need to perform this
However, as a dev to dev using the #click event like this is the dumbest way to use Vue.. but considering that there might be a need in your app for this i think my solution should help you
I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.
Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers
I have a simple photo gallery that change image on drag event, I'm having a problem with iOS7 browser, when dragging right or left the drag event is triggered too many times. I tried to add a global variable that tells if the previous event was not ended but I couldn't get it work, I also tried some of hammer.js options but no luck. any idea?
$picWrapper.hammer({}).on("dragright", function(event) {
event.preventDefault();
PhotoGallery.Browse.next();
}).on("dragleft", function(event){
event.preventDefault();
PhotoGallery.Browse.prev();
});
Try using swiperight and swipeleft instead, and event.gesture.preventDefault();
I'm developing a web application with Kendo Mobile and using the Drawer widget as a menu. One of my views is a Google map and I'd like to disable the swipe-to-open feature of Kendo Mobile's Drawer when in this view, for obvious reasons...
I've tried the following :
Bind to the Drawer's beforeShow event
...and stop it from opening if the current view is the map view
beforeShow: function (beforeShowEvt) {
if(app.view().id == "#stationMap") {
beforeShowEvt.preventDefault();
}
}
The problem with this is that it also trigger's (and prevents drawer from opening) when I click on the menu button in my top bar.
I've looked through the beforeShowEvt and can't seem to find anything to let me know if it was triggered via swipe of via menu click.
Bind to the Google maps containing div
...and catch touchstart events to stop them propagating up and being picked up by Kendo.
This hasn't worked at all.
Here's how I solved my problem :
Added an event handler to Google Map's dragstart event which sets a flag to true
Added an event handler to the Drawer button's touchstart event which sets this flag to false
Added a check in the Drawer's beforeShow event to see if flag is true, if it is I preventDefault();
Works like a charm!
I know this isnt the real answer but I have a work around. Just create a new .html file and put your google widget in that and then call it like so:
app.navigate("nodrawerwidgets.html");
OR
<a href="nodrawerwidgets.html">Google widget<a>
My first thought was to intercept the swipe actions by wrapping your widget in a div :
<div id="divStopSwipe">
...
$("#divStopSwipe").kendoTouch({
enableSwipe: true,
swipe: function (e) { //do nothing or figure out how to let the action pass down to the widget
}
});
..however this would stop the google widget from getting the swipe actions.
hope this helps a little - I am new to mobile ui as well.
I am having a mare with Bootstraps buttons in a modal popover. Whatever I do I cannot get the click event to fire. Latest Bootstrap, jQuery 1.7.1.
Inside the modal I have a footer with buttons
<div class="modal-footer">
Cancel
Don't Save
</div>
And my JS that is not working (click is never fired)
$("#navigate-away .cancelBtn").on("click", function(event){
console.log('Click.');
$('#navigate-away').modal('hide');
});
I can prove it works by using hover instead of click (hover fires ok)
$("#navigate-away .cancelBtn").on("hover", function(event){
console.log('Click.');
$('#navigate-away').modal('hide');
});
It seems the click event is being swallowed internally? I see all over SO people using this exact method with no problems. What simple thing am I missing?
This did indeed to turn out to be a conflict with another library. It was a shocker to debug, I ended up getting it relatively simply using Allan Jardine's Visual Event bookmarklet at http://www.sprymedia.co.uk/article/Visual+Event . Thanks Allan you saved my baconator.
Try adding preventDefault to your click event, and changing to use the delegate style of binding:
$("#navigate-away").on("click", ".cancelBtn", function(event){
event.preventDefault();
console.log('Click.');
$('#navigate-away').modal('hide');
});