I have a website that uses jquery mobile to detect touch interaction.
It works fine when I test it on the desktop, but when I try to use it embedded in a Windows Phone 8.1 WebView App, no touch events are triggered.
What am I missing here?
-edit-
ok here is some code I am using:
<script>
$(function () {
jQuery(window).on("swipe", function (event) { NotifyApp("Test"); });
});
</script>
The called NotifyApp function looks like this:
function NotifyApp(message) {
if ((typeof (window.external) !== "undefined") && (typeof (window.external.notify) !== "undefined")) {
window.external.notify(message);
}
}
NotifApp() works as expected, the app is notified by this function when I call the it manually by a button.
Related
I have this code:
$('.selector').on({
touchstart: function (e) {
e.preventDefault();
alert(3);
e.stopPropagation();
},
tap: function (e) {
e.preventDefault();
alert(4);
e.stopPropagation();
}
});
Only touchstart is triggered. Can anybody explain why?
P.S. : This is how I include the script for jQuery mobile :
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
EDIT:
I want to introduce a hover functionality on one of my div and I thought that with tap event it will be like clicking and with touchstart like hover.
$('.selector').on('tap swipe', function (e) {
e.preventDefault();
if(e.type == 'swipe') {
alert(1);
}
if(e.type == 'tap') {
alert(2);
}
e.stopPropagation();
});
$('.selector .sel1').on('tap swipe', function (e) {
e.preventDefault();
if(e.type == 'swipe') {
alert(3);
}
if(e.type == 'tap') {
alert(4);
}
e.stopPropagation();
});
With this code the swipe event on my div works fine, but for inside element I can't reproduce the swipe event, only tap gets triggered. I really can't figure out why.
Use syntax like this:
$('.selector').on("touchstart tap", function(e){
e.preventDefault();
if(e.type == "touchstart"){
alert(3);
}
if(e.type == "tap"){
alert(4);
}
e.stopPropagation();
});
Touchstart seems to no longer be offered as a native event within jQuery Mobile ver. 1.4.5 Perhaps you can use "tap" and "swipe" (or "swipeleft" / "swiperight") to achieve your goals? Its not entirely clear on what you are creating.
Note: one thing that you can do is easily customize the native jQuery Mobile functions for swipe. See details at http://api.jquerymobile.com/swipe/
Before you make the .on("swipe"...) binding you can change the test values used by jQuery swipe. Its as easy as
$.event.special.swipe.horizontalDistanceThreshold = 100; // in lieu of 30px
You can verify that data setup via alerts or console.log(). Perhaps this will work for you? hmmm.. by working on vertical distance threshold, you could in essence temporarily define "swipe" to function as a "swipe-up", then you'd have swipeleft, swiperight and swipeup to play with.
I have created an app with Jquery mobile 1.4.4 with PhoneGap.The app have multiple pages (each page in sparate html file).I am calling/navigating each page using
$.mobile.changePage( "templates/login.html", { transition: "slide", changeHash: false });
When I am using back button in android to goback to previous page it exit the whole app.
I have followed the solutions mentioned here Phonegap Android Back Button - close app with back button on homepage
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
The above solution is not working.How can i handle back page option in android PhoneGap?
use like this
if($.mobile.activePage.is('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
history.back();
return false;
}
So only in safari on the ipad I am having an issue with the play/pause not firing inside a setTimeout. This works in all browsers and even in safari on PC and Mac, just not on ipad. If I take the setTimeout it works, but I need the setTimeout.
This is for JWPlayer 5.9.2156
jwplayer("Container").setup({
events: {
onBeforePlay: function () {
jwplayer("Container").pause('true');
if(tOut) {
clearTimeout(tOut);
tOut = null;
}
var tOut = setTimeout($.proxy(function () {
jwplayer("Container").pause("false"); //this doesnt happen
console.log("this happens");
}.bind(this), this), 1000);
},
onPause: function (e) {
//this isnt firing
console.log("OnPause fired: "+e.oldstate);
}
...
While this may not be on the same topic at first glance the accepted answer given here also applies to this situation.
HTML5 audio object doesn't play on iPad (when called from a setTimeout)
I have the following code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
if ($.mobile.activePage.attr("id") === "home") {
e.preventDefault();
navigator.app.exitApp(); //not working
}
}
My onBackKeyDown() function is being entered, now I'm getting a series of strange events:
My if condition is never entered, even when my $.mobile.activePage.attr("id") === "home" is true (tested on weinre server)
navigator.app.exitApp never works, this seems to happen across my whole app, not just this one function.
Back button is unresponsive all over my app.
Any idea why I'm getting this strange behavior? Phonegap 2.6, jquery mobile 1.3.0 and testing on an Android 2.3.7.
In my testing here
if ($.mobile.activePage.attr("id") === "home") {
works perfectly.
Already "navigator.app.exitApp ()" will not really work because "navigator" refers to the browser itself, PhoneGap applications do not use browser but a webview.
But how applications behave differently on each OS version, try the following:
if(navigator.app){
navigator.app.exitApp();
}else if(navigator.device){
navigator.device.exitApp();
}
I'm testing html5 app with cordova and jquery mobile - for Android and Blackberry the following code working for me :
var ua = navigator.userAgent;
window.device = {
iphone: ua.match(/(iPhone|iPod|iPad)/),
blackberry7: ua.match(/91|93|97|96|97|9800|9810|9850|9860|99/),
blackberry10: ua.match(/BB|PlayBook|Tablet/),
android: ua.match(/Android/)
}
//window.device ready for blackberry
if (window.device.blackberry7){
document.addEventListener('deviceready', onDeviceReady, false);
}
//window.device ready for android
else {
window.addEventListener('load', onDeviceReady, false);
}
and then :
function onDeviceReady(){
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
document.addEventListener("searchbutton", onSearchKeyDown, false);
}
function onBackKeyDown(){
if (window.device.blackberry7){blackberry.app.exit();}
if (!window.device.blackberry7){navigator.app.exitApp();}
}
function onMenuKeyDown(){
if (window.device.blackberry7){alert("BB Menu key");}
if (!window.device.blackberry7){alert("Menu key");}
}
function onSearchKeyDown(){
if (window.device.blackberry7){alert("BB Search key");}
if (!window.device.blackberry7){alert("Search key");}
}
I am developing a Android app using Jquery Mobile/Phonegap. I have the following code to control the phone's back button:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
$.mobile.changePage("#homepage", "slideup");
}
This all works fine, but I would like the app to close when pressing the back button on the homepage only, is this possible?
Update: this has stopped working with a latest Phonegap update (supposedly). Feel free to offer a working solution if you know it.
Here's how I do it:
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
/*
Event preventDefault/stopPropagation not required as adding backbutton
listener itself override the default behaviour. Refer below PhoneGap link.
*/
//e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
For further information, here you can find the related documentation with a full example: http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#backbutton
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown()
{
navigator.app.exitApp();
}
Thank you spader.
You would need to keep track of when the homepage is being displayed. When you know you are on the homepage call:
navigator.app.exitApp();
If you don't want to use jQuery Mobile, change $.mobile.activePage.is('#homepage') to document.getElementById('#homepage') on #Spadar Shut answer, as on following code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
document.addEventListener("backbutton", function(e){
if(document.getElementById('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
}
Through this way, don't need to download Jquery Mobile gibberish only for this purpose. Also, activePage is deprecated as of JQuery mobile 1.4.0 and will be removed from 1.5.0. (Use the getActivePage() method from the pagecontainer widget instead)