I'm using phonegap to get an accelerometer's value and print it, but I'm not sure how to display it in the main body. I'm also using JQuery. This code is taken from the accelerometer example on the Cordova (PhoneGap) website.
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
document.writeln(
'Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentAcceleration</p>
</body>
</html>
in HTML tag, use this code.
<p id="ax"></p>
<p id="ay"></p>
<p id="az"></p>
and on function onSuccess(acceleration) in javascript code. you should use this command
document.getElementById("ax").innerHTML = acceleration.x;
document.getElementById("ay").innerHTML = acceleration.y;
document.getElementById("az").innerHTML = acceleration.z;
or using jQuery like this
$("ax").html(acceleration.x);
$("ay").html(acceleration.y);
$("az").html(acceleration.z);
Related
I can put content into the body of the iframe without problems, but I cannot put stuff into the header or into the whole html part of the iframe.
So it completely ignores all the #media and #page stuff I need for print and I think it is because it puts my code into the body part. (yes I use document.body, but I dont know what else to use)
here is my iframe
<iframe id="contentFrame"></iframe>
and here is the code
var myHtml = ''
+ ' <!DOCTYPE html> '
+ ' <html> '
+ ' <head> '
+ ' <title>Testing</title>'
+ ' <meta charset="utf-8" />'
+ ' <style type="text/css"> '
+ ' #media print{ '
+ ' #page { '
+ ' size: landscape; '
+ ' margin: 10mm 5mm 5mm 5mm; '
+ ' mso-header-margin:0mm; '
+ ' mso-footer-margin:0mm; '
+ ' mso-paper-source:0; '
+ ' } '
+ ' } '
+ ' </style> '
+ ' </head> '
+ ' <body> '
+ all-my-content-goes-here
+ ' </body> '
+ ' </html> '
window.frames[0].document.body.innerHTML = myHtml;
and the result looks something like this:
I'm a newbie so thanks in advance for any help.
I am setting up a simple geolocation page.
Currently when I click a button, an alert popup box states the geolocation settings.
The problem - instead of the result popping up in a box, I need the geolocation info to display on the page itself.
I was told I need to use the appendTo element and I've tried many different ways but nothing happens.
Here is the current script:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Geolocation</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.
js"</script>
<section>
<script>
$(document).ready(function() {
$('#startGeo').click(checkLocation);
function checkLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation,
locationFail);
}
else {
document.write('You do not have geolocation');
}
}
function getLocation(position) {
var latitude = position.coords.latitute;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.coords.timestamp;
alert('latitude: ' + latitude + 'longitude: ' + longitude +
'accuracy: ' + accuracy + 'timestamp: ' + timestamp);
}
function locationFail() {
document.write('We did not get your location. Please check your
settings.')
}
});
</script>
</head>
<body>
<button id="startGeo">Click here to check your geolocation
abilities</button>
</body>
</html>
Create a container in your html
<div id="geoDisplay"></div>
Then create an element containing the geolocation and append it to the new container.
$('<div>latitude: ' + latitude + ' longitude: ' + longitude +
' accuracy: ' + accuracy + ' timestamp: ' + timestamp + '</div>')
.appendTo($('#geoDisplay'));
Now every time you click the button, it will append a div containing the geolocation information.
Insert a <p class="data"></p> in your document
Replace:
alert('latitude: ' + latitude + 'longitude: ' + longitude +
'accuracy: ' + accuracy + 'timestamp: ' + timestamp);
}
With:
$('.data').html('latitude: ' + latitude + 'longitude: ' + longitude +
'accuracy: ' + accuracy + 'timestamp: ' + timestamp);
}
Here is a simple way of using append, which is very similar to appendTo, just with a different syntax:
$('body').append('latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp);
You need to create an element and add it to your DOM. For example:
var coordlabel = '<label>latitude: ' + latitude + 'longitude: ' + longitude +
'accuracy: ' + accuracy + 'timestamp: ' + timestamp + '</label>';
$('body').append(coordlabel);
I assume you are asking how to get your string:
'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp
inside an existing node on the DOM.
If this is the case, then please read the remaining information in this post because there are some things you need to know.
DOM stands for the Document Object Model.
Nodes are your html Elements that can be manipulated by Javascript using selectors. Example. JQUERY: $('#element') is a node selector.
If you are wanting to use Jquery to output your string generated by javascript then you would do:
var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp;
$('#element').text(str);
http://jsfiddle.net/amLtprmt/
This will not append the Node, i do not believe that is what you were trying to do.
To do this in native JavaScript you would do:
var node = document.getElementById('element');
var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp;
node.innerHTML = '';
node.appendChild(document.createTextNode(str));
http://jsfiddle.net/56tp7te1/
This is assuming your html looks similar to:
<html>
<body>
<div id='element'></div>
</body>
</html>
I am stucked in working with Phonegap + jquery Mobile, My Page is working fine when i remove Jquery Mobile phonegap API is also working but as soon as I include Jquery Mobile in it.
The Applications starts showing the grey dot in center with no content.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="jquery/jquery.mobile-1.4.2.min.css">
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="phonegap/cordova-2.7.0.js"></script>
<script src="jquery/jquery.mobile-1.4.2.min.js"></script>
<script src="js/index.js"></script>
<title>practice app</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>TestPage</h1>
</div>
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-theme='d' data-role="listview" data-filter="true" data-input="#myFilter" data-inset="true">
<li>213</li>
<li>213</li>
<li>213</li>
</ul>
<p id="geolocation">Finding geolocation...</p>
<p id="deviceProperties">Loading device properties...</p>
</div>
<script>
app.initialize();
</script>
</body>
</html>
and the Javascript code is
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
var self = this;
document.addEventListener('deviceready', function() { self.onDeviceReady(); }, false);
// document.addEventListener('DOMContentLoaded', function() { self.onDocumentLoad(); }, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
var self = this;
//Device is ready
var element ;
//alert is working and showing the device name
alert(device.name);
element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device Version: ' + device.version + '<br />';
navigator.geolocation.getCurrentPosition(onSuccess_gps, onError_gps);
function onSuccess_gps(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
// onError Callback receives a PositionError object
function onError_gps(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
},
onDocumentLoad : function() {
}
};
Have you tried loading the jQuery Mobile script before the phonegap script, like this?
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="jquery/jquery.mobile-1.4.2.min.js"></script>
<script src="phonegap/cordova-2.7.0.js"></script>
A strange thing is happend with cordova, even the simpliest code doesn't work anymore. The code worked fine enough but since yesterday it isn't. I didn't change anything in the manifest.xml or any other file. Is it my device?
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
function onload(){
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
//
function onDeviceReady() {
alert('test')
var element = document.getElementById('deviceProperties');
console.log('test');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
Now I can't run cordova anymore. This is what I get in logcat:
05-15 11:46:33.478: I/CordovaLog(26092): Changing log level to DEBUG(3)
05-15 11:46:33.478: I/CordovaLog(26092): Found preference for useBrowserHistory=true
05-15 11:46:33.478: D/CordovaLog(26092): Found preference for useBrowserHistory=true
05-15 11:46:33.478: I/CordovaLog(26092): Found preference for exit-on-suspend=false
05-15 11:46:33.478: D/CordovaLog(26092): Found preference for exit-on-suspend=false
05-15 11:46:33.483: I/CordovaLog(26092): Found preference for loadingDialog=MORE, Loading...
05-15 11:46:33.483: D/CordovaLog(26092): Found preference for loadingDialog=MORE, Loading...
05-15 11:46:33.503: D/JsMessageQueue(26092): Set native->JS mode to 2
05-15 11:46:33.508: D/DroidGap(26092): DroidGap.init()
05-15 11:46:33.618: D/CordovaWebView(26092): >>> loadUrl(file:///android_asset/www/index.html)
05-15 11:46:33.618: D/PluginManager(26092): init()
05-15 11:46:33.623: D/CordovaWebView(26092): >>> loadUrlNow()
05-15 11:46:33.628: D/DroidGap(26092): Resuming the App
05-15 11:46:33.688: D/SoftKeyboardDetect(26092): Ignore this event
05-15 11:46:33.698: D/DroidGap(26092): onMessage(onPageStarted,file:///android_asset/www/index.html)
05-15 11:46:34.088: D/SoftKeyboardDetect(26092): Ignore this event
05-15 11:46:36.068: D/Cordova(26092): onPageFinished(file:///android_asset/www/index.html)
05-15 11:46:36.068: D/DroidGap(26092): onMessage(onNativeReady,null)
05-15 11:46:36.068: D/DroidGap(26092): onMessage(onPageFinished,file:///android_asset/www/index.html)
05-15 11:46:38.068: D/DroidGap(26092): onMessage(spinner,stop)
05-15 11:46:38.353: W/dalvikvm(26092): disableGcForExternalAlloc: false
What is wrong?
The phonegap plugins: camera, accelerator etc. works but the geolocation not.
This is the code all permissions are installed like before:
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
console.log('test');
alert('test');
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
console.log(position.coords.latitude);
element.innerHTML =
'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
But the variable "position" isn't set or something, this plugin was working before now it ain't. :(
I'm developing a web application using PhoneGap 1.5.0 but I'm unable to fire deviceready event.
The cordova-1.5.0.js I'm using was located at PhoneGap 1.5.0\lib\android\ and I'm testing at several Android devices without success.
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("onDeviceReady");
}
</script>
</head>
<body>
<p id="deviceProperties">Loading device properties...</p>
</body>
</html>
First of all You need to test it as an application and not on the web browser.
Secondly if you want to use geolocation then you can use it like this
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + new Date(position.timestamp) + '<br />';
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
i never could get cordova-1.5.0 to fire deviceready as expected on android (api 8).. no problem after switching to 1.6.1, however.