I've built an About Us page of the app and I want to include the app version defined in the config.xml. Therefore, I want it to get version automatically rather then inserting it manually.
<script type="text/ons-template" id="about.html">
<ons-navigator title="Navigator" var="sNavigator">
<ons-page id="page-about">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="setHome();">
<ons-icon icon="fa-chevron-left"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center white"><span id="search-text" class="trn" data-trn-key="settings">About Us</span></div>
</ons-toolbar>
<div class="about-page wrapper center">
<img src="css/images/logo2.png" width="40%" class="logo-about" alt="">
<p>App Application</p>
<strong> **+version+** </strong>
<p>Owner & Founder</p>
<strong> XXXXX</strong>
<p>Website</p>
<strong> www.domain.com</strong>
<p> </p>
<p>Developed & Designed by</p>
<strong>Developer</strong>
</div><!--End Homepage -->
</ons-page>
</ons-navigator>
</script>
Kindly advise, thank you :)
#WiTon
As with anything with Cordova/Phonegap, use a plugin and search for "app version".
My favorite is cordova-plugin-appversion. Here is a test app that works with Phonegap Build.
Related
I am working on building an mobile application on apache cordova. I am using the latest version 9.0.0 (cordova-lib#9.0.1).
I have created the index.html
The code works great on cordova browser. But it do not run on android device. I have not checked the emulator, because my system do not support emulators (you can say hardware acceleration fails).
So I install the apk on my android phone. But the app do not work.
Here is my code:-
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="js/swipe.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>Swipe Left</h1>
</div>
<div data-role="content">
<p>Swipe Left to get to the next page.</p>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
<h1>Swipe Right</h1>
</div>
<div data-role="content">
<p>Swipe Right to get to the next page.</p>
</div>
</div>
</body>
</html>
Below is my swipe.js
$(document).delegate("#firstpage", 'pageinit', function (evt) {
$(this).bind("swipeleft", function (e) {
$.mobile.changePage("#secondpage", {
});
});
})
$(document).delegate("#secondpage", 'pageinit', function (evt) {
$(this).bind("swiperight", function (e) {
$.mobile.changePage("#firstpage", {
});
});
});
Could any one would suggest how to achieve the page swipe in apache cordova.
What I want?
I want to go to next page(or div) by swiping my fingers on the mobile screen.
I have done searching all the web, but the code works in browser but not on android device.
Any help would be appreciated.
You should debug the app running on the phone with Chrome Device Inspector.
Anyway, try moving your JS and CSS resources to your local path in order to embed them with the app, probably their download is being blocked due to security policies.
I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.
I am using ng-show/ng-hide to switch between two different header titles. It works in the browser but does not work in android (4.1) in a cordova app. I also tried using ng-switch and also ng-if, but the same net result.
<ion-modal-view> <<<<< it works OK when not in an $ionicModal
<ion-header-bar>
<h1 class="title" >
<span ng-hide="clipboardMsg">{{title()}}</span>
<span ng-show="clipboardMsg" class="clipboard-msg">{{clipboardMsg}}</span>
</h1>
<button class="button button-clear button-primary" ng-click="close()">Close</button>
</ion-header-bar>
...
Apologies for the cross-post but I will really appreciate some help.
I am trying to develop in an application, which is based on Phonegap and JQuery Mobile framework.
I have created a Page and Sub Page as separate HTML files.
The body part of the index.html file will look like:
<div data-role="page" id="p1" **data-theme="e"**>
<div data-role="header">App Name</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true" data-icon="star" data-iconpos="right" data-transition="slide">
<li>Link1</li>
<li>Link2</li>
</ul></div></div>
The body part of page2.html file will look like:
<div data-role="subpage" id="p2" **data-theme="e"**>
<div data-role="header">Places</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true" data-icon="star" data-iconpos="right" data-transition="slide">
<li>Go Back</li>
</ul></div></div>
The data-theme="e" is successfully getting applied to index.html, whereas it is not getting applied to page2.html. Can someone please provide me with the reasons, for this behavior..?
I am using JQuery 1.8.3 and JQuery Mobile 1.2.1 version and I am properly calling the CSS and JS versions from local storage in both the HTML files (ex: /android_asset/www/css/jquery.mobile-1.2.1.css, ex: /android_asset/www/js/jquery-1.8.3.js/)
Also, another question lingering in my mind is, I am unable to call
the CLICK event for Link1, when I keep the body content of page2.html
in the same HTML file as index.html, as a SubPage; upon click on Link1, I am not redirected to Page2.html, even though I give href="#p2", instead of href-"page2.html#p2".
Provide data-ajax="false" in list divider of index.html. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. As per this link,
"Providing data-ajax="false" is critical because Ajax pages use the
hash (#) to track the Ajax history, while multiple internal pages use
the hash to indicate internal pages so there will be a conflicts."
Also, rename data-role="subpage" to data-role="page". This is the solution to this problem.
I am using the following code in my Webview along with Jquery Mobile, This works fine in the emulator (2.2 ) and on my Nexus one but some users are complaining that when they click on a link they get an error message "Problem with File: Requested file not found". One user reported that she was using Samsung Fascinate with "2.2.1" . This seems to have started when I upgraded jquery mobile 1.0b2 , I have tried the latest 1.0rc but still have the same issue
Any Insights on what might be happening ?
In my Activity
engine.loadUrl("file:///android_asset/book2/www/newindex.html");
In the html ( I have also tried data-ajax="false" )
<link rel="stylesheet" href="jquery/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="jquery/jquery.mobile-1.0rc1.min.js"></script>
<div data-role="page" id="jqm-home">
<div data-role="content" data-theme="e">
<div class="content-primary">
<nav>
<ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="d" >
<li data-role="list-divider">Cognitive</li>
<li><a rel="external" href="./cogn/simon2.html">
<img src="cogn/simon.jpg" />
<h3>Simon says</h3>
<p>Memory</p>
</a></li>
From what I know about URL loading, if you are loading a local file, which is what it looks like here, that file needs to be in the same directory as the file its linking from. Because the file is local on your computer, your device and emulator should work fine. for someone else who downloads the app and tries to use the Webview functionality, that source file would need to be stored in their phone and in the appropriate directory...hope that helps.