Develop Reference

Simple Android versus iOS detection in WordPress theme

I am trying to edit my WordPress theme file to show one ad code if an Android device is detected, another set of code if iOS.
The code is in the format:
<script type="text/javascript" src="//xxxxxxxx.js"></script>
I have tried several previous answers, such as the following:
Detecting iOS / Android Operating system
Detect Android phone via Javascript / jQuery
What is the best way to detect a mobile device in jQuery?
All of which are slightly different and cause my page to not load (blank page).
Could someone please give me a hand and post the full simplest/fastest code to simply detect Android versus iOS and do nothing for anything else (i.e. a Windows PC). Something I can just copy and paste into the theme files where I want it.
Edit: I also tried things like the following to no avail (this was exactly what I pasted into the WordPress theme file, without the xxx and including proper reference to external .js file:
<?php var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {?>
<script type="text/javascript" src="xxxxxxx.js"></script>
<?php } ?>
and
<?php function getMobileOperatingSystem() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /Android/i ) )
{?>
<script type="text/javascript" src="//xxxxxxx.js"></script>
<?php}
} ?>

[EDIT]
Try changing your code to the below snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
function isIOS() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
if(isAndroid()) { $.getScript("//cdn.bounce.bar/xxxx.js"); }
</script>
The reason what you tried above doesn't work is because you are trying to put javascript code into a PHP function when the interpreter is looking for PHP code.
If you have direct access to the HTML page, then you could do something like the following. This code is taken almost directly from Detect if browser is running on an Android or iOS device.
<script>
function isAndroid() { return /Android/i.test(navigator.userAgent); }
function isIOS() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }
</script>
Remember that PHP code is generally server side and javascript code is generally client side. I would try to load the script using Javascript depending on the OS type. Something like this might work if you are using Jquery:
<script>
if(isAndroid()) {
$.getScript("//xxxxxxx.js");
}
</script>
I'm still not exactly sure what you are trying to do, but let me know if this doesn't work and provide more details, and I'll try to help out.

You could do this
if(/Android/i.test(navigator.userAgent) ) {
..............
}
else if(/iPhone/iPad/i.test(navigator.userAgent) ){}

How To Access Files on Android Device Using Ionic Framework

I was working through the Ionic tutorial for using the Cordova Camera API.
http://learn.ionicframework.com/formulas/cordova-camera/
Far as I can tell everything is working correctly with the Camera API functions, but I cannot get my image to display back into the view.
I am able to return a file URI, but when I attempt to put it to the ng-src I get nothing in the view. I am assuming that the application/code cannot access the file location?
My config:
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
...
The function in my controller:
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.cameraPic = imageURI;
}, function(err) {
$scope.cameraPic = "error";
console.err(err);
});
};
My view:
<ion-view>
<ion-content>
<div class="form-group padding-top">
<button class='button button-positive' data-ng-click="getPhoto()">
Take Photo
</button>
</div>
<div class="item item-image">
<img ng-src="{{cameraPic}}"/>
</div>
{{cameraPic}}
</ion-content>
</ion-view>
This appears to be the recommended method by the tutorial, and is also repeated on this thread. It sounds like it should work without using a Cordova file service implementation. I have found one such implementation which I guess I could use, but am I missing something here?
EDIT
Using chrome://inspect/#devices, I was able to look into the Webview/Console. I also rebuilt the project, just to see if that would help.
Definitely looking like a local file access issue.

As it turns out, this is an issue unique to using the emulator. I finally found the following on the ngCordova project:
NOTE: The camera API only works on a real device, and not in the
emulator.
Source: http://ngcordova.com/docs/plugins/camera/
This led me to test the code on an actual device using the USB debugger, where the file is accessed by the application and shared with the view as expected. This should be noted as a quirk of the library.

phonegap camera capture in embed iframe

I was desperately looking around the internet for:
How to use PhoneGap to access the device's camera and put it inside my HTML, e.g. in a frame and take a snapshot with my custom button I created in that HTML. So, not using the device's native camera interface.
Mostly they all say it isn't possible with PhoneGap.
Could someone please provide a comprehensive step-by-step tutorial on how to do it in Eclipse for Android, no matter if it is PhoneGap or some other approach.
Thank you very much

I found this custom plugin on github while searching for the same:
Cordova-CanvasCamera
To set install:
Copy CanvasCamera.h and CanvasCamera.m to Plugins directory inside your PhoneGap project.
Edit your config.xml and add CanvasCamera into your Plugins list.
Copy CanvasCamera.js into your www directory and add a script tag for it in your index.html.
If not already present, add the CoreVideo.framework library in the Build Phases tab of the project
The following is a sample code implementation:
Configuration for <img>:
<img id="camera" width="352" height="288" />
<script>
CanvasCamera.capture = function(data) {
document.getElementById('camera').src = data;
}
</script>
Configuration for <canvas>:
<canvas id="camera" width="352" height="288"></canvas>
<script>
var context = document.getElementById('camera').getContext("2d");
var camImage = new Image();
camImage.onload = function() {
context.drawImage(camImage, 0, 0);
};
CanvasCamera.capture = function(data) {
camImage.src = data;
};
</script>
Start capture:
<script>
document.addEventListener("deviceready", function() {
CanvasCamera.start();
});
</script>

.append() not working when using phonegap

I'm currently creating a phonegap app that receives data from an API. I make use of ajax to retrieve the information and then append that information to a div. Now this workings fine in the browser but when I do this in android using phonegap nothing seems to happen and no information is appended to the div. Here is the code:
$.getJSON(
AddressAccess+"Home/loginitems/email/"+UserEmailAddress+"/format/json",
function(data)
{
$('#updateprofilename').append(data[0].Name);
});

As you say, that u're using $('.selector').append(something) - you're using jQuery Mobile for dynamic generation of markup.
When dynamically adding content (lets say a <div> to another <div> you have to refresh your content by doing something like this: $('[data-role="content"]').trigger('create'); in order to update your page-content after dynamic enhancemant.
more simple:
you have a <div> and you're dynamicly adding another <div>:
$("#YourWrapperDiv_ID").append('<div id="DynAddDiv_ID">My dynmicly added content</div>');
$("#YourWrapperDiv_ID").trigger('create');

Having difficulty in finding Elements using Xpath and CSS in Selenium Android Webdriver Testing

I want to automate android web apps using Selenium WebDriver and i've run a simple program to open the google page and search a term . While finding the element with the name and id it runs perfectly. But while trying to find the element with the Xpath and Css seems difficult. Does anybody know how to use xpath and css path in selenium android webdriver? Here is the sample code i've used:
public class TestDriver extends TestCase
{
public static void testGoogle() throws Exception
{
AndroidDriver driver = new AndroidDriver();
driver.get("http://google.com");
WebElement element = driver.findElement(By.name("q"));
//WebElement element = driver.findElement(By.xpath("//*[#id='gbqfq']"));
//WebElement element = driver.findElement(By.cssSelector("#gbqfq"));
element.sendKeys("android driver");
element.submit();
System.out.println("Page title is: " + driver.getTitle());
//driver.quit();
}
}

I have managed to prove that By.xpath and By.cssSelector are able to find elements which can then use in our code to interact with the web page. For a couple of practical reasons I created a shadow, simplified test page which then submits a query to obtain search results from Google's search engine.
Here is the simplified test page, enough to demonstrate the basics. Copy this file to the sdcard of your android device or AVD e.g. using the following command adb push form.html /sdcard/form.html
<html>
<head>
<title>WebDriver form test page</title>
</head>
<body>
<form name="testform" action="http://www.google.co.uk/search" method="get">
<input id="gbqfq" class="gbqfif" type="text" value="" autocomplete="off" name="q">
<input type="submit" value="search Google">
</form>
</body>
</html>
And here's the modified version of the code in your question:
#Test
public void testByClauses() throws Exception {
AndroidDriver driver = new AndroidDriver();
// driver.get("http://www.google.co.uk/");
driver.get("file:///sdcard/form.html");
System.out.println(driver.getPageSource());
WebElement nameElement = driver.findElement(By.name("q"));
WebElement xpathElement = driver.findElement(By.xpath("//*[#id='gbqfq']"));
WebElement cssElement = driver.findElement(By.cssSelector("#gbqfq"));
nameElement.sendKeys("android ");
xpathElement.sendKeys("driver ");
cssElement.sendKeys("webdriver");
nameElement.submit();
System.out.println("Page title is: " + driver.getTitle());
driver.quit();
}
I happen to be using JUnit 4 as the test runner (hence the #Test annotation) however this code should also work in JUnit 3.
Points to note:
I have deliberately used 3 separate WebElements which refer to the same underlying HTML element
Each sendKeys(...) call appends text to the search query
Technically we don't need to submit the search query to demonstrate the By(...) clauses work, however it's good to see the code execute and get some matching search results.
I commented out the request to load Google search's homepage, but left it in my answer so you can easily see how to use the Google site instead of the static local HTML page.
I ran the test with a locally connected Nexus 4 phone, over USB, and used a locally built instance of the AndroidDriver().

Works good for me.
//Author: Oleksandr Knyga
function xPathToCss(xpath) {
return xpath
.replace(/\[(\d+?)\]/g, function(s,m1){ return '['+(m1-1)+']'; })
.replace(/\/{2}/g, '')
.replace(/\/+/g, ' > ')
.replace(/#/g, '')
.replace(/\[(\d+)\]/g, ':eq($1)')
.replace(/^\s+/, '');
}