I am using jquery mobile and I need to prevent swipe event over specific element. Need of doing this is because I am using slider and I don't want the swipe event to be invoked resp. I want it to be prevented when user is manipulating with slider. I was not able to too find any solution so I am asking for help here.
This is my javascript code:
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
Thank you.
You need to use both, stopPropagation(); and preventDefault();.
As for the .selector, it can be a tag and #ID or .class, e.g. [data-role=page]#PageID , div.ui-content...etc
$(document).on('swipeleft swiperight', '.selector', function(event) {
event.stopPropagation();
event.preventDefault();
});
Reference: stopPropagation();
Reference: preventDefault();
Working example
Related
I can't for the life of me figure out how to fire a callback to do something when the page has finished changing.
I have this:
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#page2", {"transition":"slide"});
});
I basically want a function to fire when the page has finished sliding.
This is from the documentation, but it will fire on every page change, rather than on a specific page to page:
$( ":mobile-pagecontainer" ).pagecontainer({
change: function( event, ui ) {}
});
Please help.
Try the transition event
$(document).on( "pagecontainertransition", function( event, ui ) {
if (ui.toPage.prop("id") == "page2") {
//page2 finished transition, so do something
}
});
To sum it up : rewrite a pagecontainer( "change" ) function with an added callback
$.fn.pagecontainerChangeWithCallback = function ( to , option , callback ) {
var toClean = to.split('#').join('');
// listen to transition
$(document).off( "pagecontainertransition" ).on( "pagecontainertransition", function( event, ui ) {
// end of "change"
if ( ui.toPage.prop("id") == toClean && typeof callback == 'function' )
callback();
});
// effective change
$( "body" ).pagecontainer( "change" , to , option );
return ( this );
}
Usage :
$( ":mobile-pagecontainer" ).pagecontainerChangeWithCallback( "#page2" , {"transition":"slide"} , function() {
// my job after transition
});
In ios7 safari apple introduced swiping navigation - swipe to the right sends windows.history.back() event and redirects to a previous page like user touched the back button.
In my app I am using right swipe to show left panel and I am using this code:(JQM 1.4.3 stable)
<script>
$( document ).on( "pageinit", ".ui-page", function() {
$( document ).on( "swiperight", ".ui-page", function( e ) {
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swiperight" ) {
$( ".panel" ).panel( "open" );
}
}
});
});
</script>
But instead of showing the panel safari rather uses it's default behaviour and loads the previous page. How to override this behaviour and show left panel?
In my Jquery Mobile app, I would to override the browser or phone back button (that is available on Android devices).
On the page #welcome-page only, and only if the previous-page id is #signin-page, I would like the back button to skip the #signin-page (not even callthe associated js) and go to #explanation-page.
Can you help me achieve this ?
For now I did the following but it messes everything up, because it seems to load #signin-page.
$(document).on('pagebeforeshow', '#welcome-page', function(event, docdata){ //jqm 1.4
console.log('previous page was ' +docdata.prevPage.attr('id'));
if ( docdata.prevPage.attr('id') == 'signin-page') {
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
event.preventDefault();
console.log('back button pressed');
//$( "body" ).pagecontainer( "change", "#explanation-short", { transition: "fade" });
}
$(window).off("navigate");
});
}
});
I'm trying to use panel on each different HTML pages.
And I got this sample panel JS code on JQM website.
/* panel */
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
The problem is if I want to put panel on each different HTML pages, How do I have to set the page ID ?
For example, I have HTML pages such as.....
main.html page ID is "#pageMain" , about.html page ID is "#pageAbout", and gallery.html page ID is "#gallery"
How do I have to fix JS code ? Please help~
The code you have is for adding the ability to open panels via swipe gestures. It won't add the panel into the DOM alongside your page content. To do that you'll need to adapt the following code.
/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
$.get('left-panel.html', function(data){
//$(data).prependTo($.mobile.pageContainer); //or .prependTo("body");
$.mobile.pageContainer.prepend(data);
$("[data-role=panel]").panel().enhanceWithin(); // initialize panel
}, "html");
I am new to jQuery and I am working with the droppable API.
I want to have a group of divs that can all hold one and only one droppable item. I've set the class of my droppable divs to inv. I can drop items into the divs but I can find a way to reject a drop once in the drop function.
I want to be able to detect that my div already has a child and if it does revert the dopped element.
my code currently looks like this
$( "div.inv" ).droppable(
{
drop: function( event, ui )
{
childCount = $(this).children().length;
if (childCount !=0)
{
//revert droppable to initial position
return;
}
//if there is a child revert and return
$( this )
.addClass( "ui-state-highlight" )
.append($(ui.draggable))
}
});
What about disabling the droppable area after receiving an item ?
You can do something like this :
$( "div.inv" ).droppable(
{
drop: function( event, ui ) {
$(this).droppable('disable');
}
});