This question is already asked on stackoverflow here but I didn't found any answer to it, so I raised again this. Please can anyone able reply for this?
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
navigator.compass.getCurrentHeading(onSuccess, onError);
}
function onSuccess(heading)
{
alert('Heading: ' + heading.magneticHeading);
}
function onError(compassError)
{
alert('Compass Error: ' + compassError.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentHeading</p>
</body>
</html>
Either your device does not have a magnetic sensor, or the vendor has not implemented support for it in the OS.
Looking at the Android source code for the device-orientation plugin, the startup code is written like this (modified for brevity):
List<Sensor> list = this.sensorManager.getSensorList(Sensor.TYPE_ORIENTATION);
// If found, then register as listener
if (list != null)
this.setStatus(CompassListener.STARTING);
// If error, then set status to error
else
this.setStatus(CompassListener.ERROR_FAILED_TO_START);
Not sure why they made up their own error code there (public static int ERROR_FAILED_TO_START = 3), but really they should be reporting COMPASS_NOT_SUPPORTED as defined in the documentation.
Related
I wanted to use pdf.js for a project of mine but I faced an issue of importing it, basically, the CDN doesn't work
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist#2.7.570/build/pdf.min.js"></script>
</head>
<body>
<canvas id="my-canvas"></canvas>
<script>
pdfjsLib.getDocument('./ahmed.pdf').then(doc => {
console.log("this file has" + doc._pdfInfo.numPages);
});
</script>
</body>
</html>
and that is the errors that my console shows
Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified.
Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function
So what should i do to solve this problem and thank you so much
You have to set GlobalWorkerOptions.workerSrc to /build/pdf.worker(.min).js of same version:
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/npm/pdfjs-dist#2.7.570/build/pdf.worker.min.js"; 👈
pdfjsLib.getDocument('./ahmed.pdf').promise.then(doc => {
console.log(`This document has ${doc._pdfInfo.numPages} pages.");
});
And, as #Pasi has mentioned, you have to promisify .getDocument() by chaining .promise on it. Without it, there is no .then().
See the "Hello World with document load error handling" example on this page to get started: https://mozilla.github.io/pdf.js/examples/
(Your snippet is missing .promise after getDocument() and setting the workerSrc property)
I've been struggling with this issue where in my cordova app, the back button will exit the app no matter what. I have tried all the solutions I've come across online but haven't had any success.
All the solutions I've tried (example below) have produced the same result.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
}
The code inside my callback executes without issue, but after it executes, it exits the app. I can prevent the exit by including a ReferenceError in my function, for example
console.log(undefinedVar);
But this obviously doesn't seem like best practice.
The other solutions I've tried include using event.preventDefault() from the callback and ionic's registerBackButtonAction function.
Any suggestions would be greatly appreciated.
enter code here
<!DOCTYPE html>
<html>
<head>
<title>Stopping Back Button</title>
<link rel="stylesheet" type="tex`enter code here`t/css" href="style.css">
<script>
function getTitle() {
document.getElementById("ct").innerHTML = "DEMO: " + document.title;
}
</script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
getTitle();
}
// device APIs are available
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
alert('Back Button Disabled');
console.log('Back Button Disabled');
}
</script>
</head>
<body onload="onLoad()">
<ul id="nav">
<li>← Back</li>
<li></li>
</ul>
</body>
</html>
I'm a little bit confused about how cordova works (i'm using android)...i've got an html page with this button:
<button id="mannaggia">mannaggia</button>
i'm trying to insert a javascript tag:
<script>
document.getElementById("mannaggia").addEventListener("click", myFunction);
myFunction(){
alert('is anybody out there?');
window.location="pag2.html";
}
</script>
nothing happens..
trying to insert a function in index.js outside this page is the same result...thank you
The function is declared after you added the event listener, so myFunction was undefined. Try putting the function before you add listener.
Revisit your html file once again.
best place to start your code are inside the device ready event
read more here Phonegap
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
I'm new to phonegap so I just tried something out and was starting with the onDeviceReady method. The problem I'm encountering is, that the method doesn't fire.
This is my complete code, pretty basic.
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$("#texttest").css("display", "none");
}
</script>
</head>
<body>
<div id="texttest" style="display:block">text</div>
</body>
</html>
So now, when the app is launched the text should be hidden right? Well, the entire div should, but the device still shows me the "text". What am I doing wrong there? I also tried some other basic methods like
$("#texttest").hide()
but that didn't work either. This is the MainActivity.java
package de.activevaluetenthousandfliesphonegap;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Ensure you have the correct version of cordova.js for the platform you are targetting.
Also what version of Phonegap are you using ?
Please try removing the font-awesome, if included. They have some compatibily issues with its css file.
<link rel="stylesheet" href="css/font-awesome.min.css" />
I had the same problem once and solved when I removed the above line from my code,
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
$("#texttest").css("display", "none");
}
</script>
</head>
<body onload="onLoad()">
<div id="texttest" style="display:block">text</div>
</body>
</html>
Here is what I think you need to do:
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
}
Because when your device ready triggers jQuery hasn't loaded - this will ensure you do the following:
1. Get jQuery
2. Trigger PhoneGap deviceready
Also remove your onLoad() function ! :)
First of all You need to test it as an application in the emulator/mobile and not on the web browser. Secondly if you want to use geolocation then you can use it like this
function onDeviceReady() {
console.log("we are an app");
MyApp.initialize_phonegap();
}
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
</head>
<body onload="onBodyLoad()">
It is working on my ripple emulator. But I use jquery-1.9.1.js and cordova 2.7 ?
I was using the cordova.js shared by my colleague who is an iOS developer. I replaced that with the latest cordova.js from the Cordova site and it started to work pretty well.
After creating your app using cordova, the index.js (or build.js) contains something like
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
in the default event handler function "receivedEvent".
These lines only work fine for the Hello-World-Dummy of Cordova. As soon as you replace the content of the index.html "parentElement" will be undefined. That leads to a javascript error
Uncaught TypeError: Cannot read property 'querySelector' of null
at Object.receivedEvent (index.js:37)
at Object.onDeviceReady (index.js:31)
at Channel.fire (cordova.js:846)
at cordova.js:231
The index.html of the cordova Hello-World contains a container
<div id="deviceready" class="blink">
As soon as you remove this, the build of the app failes with the mentioned JavaScript-Error.
You can simply replace the lines above with something like
if (id=="deviceready")
{
console.log("addEventListener for backbutton");
$("#texttest").css("display", "none");
// ... whatever
}
My device is a HTC One X, browser is Chrome. I'm trying to get HTML5 GeoLocation to work in browser however I'm unable to, it works on iOS and desktop however nothing for my Android. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
<title>HTML5 Test</title>
<script src='http://cloud.keepiteasy.net/libs/modernizr.custom.89661.js' type='text/javascript'></script>
<script src='http://cloud.keepiteasy.net/libs/jquery.js' type='text/javascript'></script>
</meta>
</head>
<body>
<script type="text/javascript">
$(function() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
}
function success(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
alert(lat);
alert(lng);
}
function error(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
}else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
});
</script>
</body>
</html>
UPDATE: I fixed the doctype
UPDATE: I updated the error function
UPDATE: On my HTC I am still getting nothing, not even an error. On my Nexus 7 (just tried it), it works fine... WTF, hardware issue? But other GPS based apps work...
I got the same issue on my HTC One X. At least you can make sure, your error function gets called, by adding a timeout:
navigator.geolocation.getCurrentPosition(success, error, {timeout:3000});
In this example, your error function gets called after 3 seconds.
Seems to be a hardware issue of some sort as no website can acquire my geolocation on my OneX, however my Nexus 7 the above code works fine.
Just restart your phone, guys. Yeah it's kinda stupid but it's the solution.