how to convert current screen to landscape mode in phoneGap - javascript

We are developing phone-gap application.We have 4 pages like one.html,two.html,three.html,four.html.In this one(two.html) of the HTML file need to be landscape mode automatically.
Please guide to us.We are new to this.

Add this script first
<script type="text/javascript" src="cordova.js"></script>
Then inside another script tag
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var so = cordova.plugins.screenorientation;
so.setOrientation(so.Orientation.LANDSCAPE);
}
</script>

You can use the Screen Orientation PhoneGap Plugin for Android
Following is the link.
https://github.com/their/pg-plugin-screen-orientation

Related

Display different HTML for Android and iOS

I have a requirement to display different HTML based on whether the client accessing the portal is using an Android or iOS phone. I have tried to use the userAgent based detection: Redirect users to iTunes app store or google play store?
I then tried to use: $( document ).ready(function() { and an if statement to check if agent is iOS or Android and based on either, display div for iOS or div for Android. Any good way of doing that?
ANDROID SPECIFIC INSTRUCTIONS
<div id="android-quicklink">
<p>ANDROID SPECIFIC INSTRUCTIONS</p>
<p id="content-container"><span class=“googleplay-icon"> </span></p>
</div>
<script>
$( document ).ready(function() {
if (getMobileOperatingSystem() == "Android") {
$('#android-link').attr("href", "https://play.google.com/xxxxxxx");
$(‘.googleplay-icon').toggleClass('googleplay-icon')
$('#android-quicklink').toggle();
}
});
</script>
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
"mobile.html" would be replaced with the location of wherever your mobile version resides. This technique could be adapted to load an alternate stylesheet as well.
#For iPhones/iPods Specifically
<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>

Using Cordova webview

I wish to find out, for mobile developing using Cordova, is there a way to open a remote web app, and when a button is click in the remote web app, it execute a java script in Cordova environment?
For example, my mobile app opened up a web page hosted in the app server through web view, to ask the user to acknowledge he read and accept the license. The user need to click "Accept" or "Not Accept" on the web page.
If the user click "Accept", I hope to run a javascript that can bring up another page in the mobile app for the user to proceed to use the mobile app.
Is this possible?
Thanks!
Firstly, it's not a good idea to have a mobile app that is totally reliant on a remote server in order to function properly: what if the user's internet connection cuts out or is intermittent? (that happens plenty where I live).
However, one solution would be use an iframe to load the remote webapp content and cross-frame messaging to communicate the outcome of the UI interactions with the remote webapp back to your Cordova app. You will have to appropriately whitelist your remote webapp URL.
Something like this:
Cordova app index.html
<html>
<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function onDeviceReady(){
window.addEventListener("message", onFrameMessage, false);
}
function onFrameMessage(event){
var eventName = event.data[0];
if(eventName === "terms_result"){
var accepted = event.data[1] == 1; // == will match 1 or "1"
if(accepted){
// Do something - e.g. change to homepage
}else{
// Do something else - e.g. display an error message
}
}
}
document.addEventListener("deviceready", onDeviceReady);
</script>
</head>
<body>
<div data-role="page" id="terms">
<iframe src="http://example.com/my/remote/webapp" style="border: 0; width: 100%; height: 100%"></iframe>
</div>
<div data-role="page" id="home">
<!-- Your home page content -->
</div>
</body>
</html>
Remote webapp html
<html>
<head>
<script type="text/javascript">
function accept(result){
window.parent.postMessage(["terms_result", result], "*");
}
</script>
</head>
<body>
<button onclick="accept(1)">Accept</button>
<button onclick="accept(0)">Not Accept</button>
</body>
</html>

Emulate native touch in Android Cordova

I am working on an Android Cordova app where I want to programmatically open the soft keyboard when the page is loaded (keypad instead of regular keyboard).
There already is a plugin that should do exactly what I need
(Cordova Android Focus Plugin), but I can't get it to work as intended.
My code to Focus the Element 'Stunden' looks like this:
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
cordova.plugins.Focus.focus('Stunden');
}
</script>
.
.
.
<body onload="onLoad()">
When the code is executed on the device I get the following error:
Uncaught TypeError: Cannot read property 'Focus' of undefined
So I guess the code is executed before the Plugin is loaded completely, but I could not find another method than "deviceready" to wait for it.
Thanks for your help already!
After some fiddling I found out how to get it to work:
In the Android Focus Plugin Docs it says that you can set the focus on an element by calling the function
cordova.plugins.Focus.focus(element);
Replacing (element) with ("Stunden") breaks the function, instead defining a variable
element = document.getElementByID('Stunden')
does the trick. This might be really basic, but in case someone stumbles over this I will just leave it here.
The working code then looks like this
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
var element = document.getElementById('Stunden')
cordova.plugins.Focus.focus(element);
}
</script>
.
.
.
<body onload="onLoad()">

How to greayout back button and view source of browser

How do u greayout backbutton or view source of browser so users can't click backbutton and view source code because javascript contains lot of business logic code. I need to greayout those options so users can't be able to click them. i recently joined banking project and i am beginner in java and development.
Try adding this in the Head section of your html file:
<script type="text/javascript">
window.history.forward();
function noGoingBack() {
window.history.forward();
}
</script>
And add this in your Body section:
<body onload="noGoingBack();" onpageshow="if (event.persisted) noBack();" onunload="">
This prevents the page from going back.

Phonegap doesn't show alert

why phonegap doesn't show alert notification ? (running on iPhone 5.1.1 , phonegap phonegap-2.1.0-0-g26d211b, mountain lion 10.8.2, xcode 4.4.1)
<html>
<head>
<link rel="stylesheet" href="themes/css/apple.css" title="jQTouch">
<script src="src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="cordova-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
try
{
navigator.notification.alert('Hello', ok, 'Title', 'Button!');
}
catch(e)
{
alert("doesn't support!!");
}
}
function ok() {}
</script>
</head>
</html>
Because you are trying to show an alert before phonegap/cordova framework is loaded.
$(document).ready(function(){ is not going to help you here, you must use this event to check if phonegap is successfully loaded:
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
// Now safe to use the PhoneGap API
}
More about this event: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
PhoneGap consists of two code bases: native and JavaScript. While the
native code is loading, a custom loading image is displayed. However,
JavaScript is only loaded once the DOM loads. This means your web
application could, potentially, call a PhoneGap JavaScript function
before it is loaded.

Categories

Resources