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
Related
I've got a single html with 5 pages + navbar. To force a refresh of one page I use this:
$("#page3").on("pagecreate", function(e) {});
It works the first time, but I want it to update every time I visit the page. I know there is .trigger("create"), and "refresh", but I can't get it to work properly...
jQuery Mobile 1.4.0
You need to listen to pageContainer event in order to determine which page is active and accordingly run the functions you want.
The new events can't be attached to a specific page, unlike successor versions of jQuery Mobile. Once an event is occurred, retrieve ActivePage's ID.
$(document).on("pagecontainerbeforeshow", function (e, ui) {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
if(activePage == "page3") {
doSomething();
}
});
Demo
I'm using Touchswipe to trigger events based on swipe right and swipe left. After a lot of testing, i found that touchswipe is not working on android stock browsers since touchswipe is not firing swipe events on stock browsers. Any work around for this?
Code to trigger:
$(function() {
//Enable swiping...
$("#content").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount) {
if(direction == "left"){
}else if(direction == "right"){
}else if(direction == "down"){
// event.preventDefault()
}
},
threshold:0
});
});
Well, after a lot of issues i found that swipe event on android STOCK browsers can't be triggered with code from an external Js file but works if put on same html file. Weird but works.
Have you tried using jQuery mobile to support the swipe functionality. The developer API is given here.
The difference here, is that instead of calling $(document).ready(function() ...) we can call: $(document).bind('pageinit')
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 want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.
I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).
There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).
You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:
$(document).delegate('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Here is a demo: http://jsfiddle.net/fFGvD/
Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.
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.