How do I Display a Control Only on Mobile App?

[Louis Adekoya]

I have a toggle control for subscribing to push notifications and I want to only display it if the user is running the native mobile app.

I have tried the following:

code
if (typeof cordova == "undefined") {
Apperyio("tglSubscribe").hide();
}
/code

and (with the toggle control set to not visible):

code
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
Apperyio("tglSubscribe").show();
} else {
Apperyio("tglSubscribe").hide();
}
/code

[Bruce Stuart]

here's logic I use to determine if a device is mobile - it mostly works:

function fisMobile() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}

and then -

if ( fisMobile() ) { do something } else { do something else }

[Louis Adekoya]

Thanks Bruce, I'll give this a go.

[Louis Adekoya]

This doesn't seem to work for me I'm afraid. What I've done is to set the toggle control to be hidden (visible unchecked) in the design view. Then in a page show event I tried Bruce's code as follows:

code
function fisMobile() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}

if ( fisMobile() ) {
Apperyio("tglSubscribe").show(); }
/code

[Evgene Karachevtsev]

Hello Louis,

First please add this at init() of the page:
pre$scope.isRunningOn = new DeviceChecker();

function DeviceChecker() {

Code: Select all

 function Android() { 
     return navigator.userAgent.match(/Android/i); 
 } 

 function BlackBerry() { 
     return navigator.userAgent.match(/BlackBerry/i); 
 } 

 function iOS() { 
     return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
 } 

 function Any() { 
     return (!Android() || !BlackBerry() || !iOS()); 
 } 

 return { 
     android: Android, 
     blackberry: BlackBerry, 
     ios: iOS, 
     any: Any, 
 }; 

}/pre
And on the targeting control add: pre{ ng-if = isRunningOn.android(); // or whatever device you want./pre

[Louis Adekoya]

Thanks. Forgive my ignorance Evgene, but:

1. When you say add at the init() of the page, what do you mean? I thought perhaps you meant an initialise event but I can't find one in the list of events.

2. When you say add ng-if ... on the targeting control, do you mean on the control that I want to make visible only on mobile and is ng-if = isRunningOn.android(); all that I need to do there?

3. Can I do ng-if = isRunningOn.Any(); so that it works for any mobile app?

4. Do I need to make the control invisible by default (in design mode)?

   Sorry for all the questions - it's because I don't understand the code I guess.

   Thanks again.

[Serhii Kulibaba]

Hello Louis,

Do you use JQM or AngularJS project?

1. This is function which is set in the ng-init attribute
2. Yes, it would be visible if function returns true
   3.Yes, tou can. Just add function Any, which returns "true" value
3. No, you don't need

[Louis Adekoya]

Sergiy, my app is a JQM app. Does Evgene's answer apply to a JQM app or just to ANgularJS?

[Serhii Kulibaba]

Evgen gave you an answer about AngularJS.

Please use the simplest solution to detect, is it a native app, or a web app:

prevar isPhoneGapApp = function() {
return (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1);
};/pre

This function returns true if it is a native app.

[Louis Adekoya]

Thanks Sergiy. I assume I should then be able to do "If isPhoneGapApp = true ..."