I have a web app for quiz and I have converted into Android app using phonegap but the problem I have is that the app takes 1-2 minutes to load which I think is because of the javascript and css being loaded. The JS and CSS files used in my quiz app are:
<link rel="stylesheet" href="css/jQueryMobilemin.css" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jQueryMobilemin.js"></script>
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/slickQuiz.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/master.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/slickQuiz-config.js"></script>
<script src="js/slickQuiz.js"></script>
<script src="js/master.js"></script>
Is there any solution by which I can reduce the loading time of my app. I read that async JS load is better but will it help in the final android app
Related
I have an iOS or Android app we would want to show installation banner when users visit your website via mobile browser.
I try to use this plugin :
https://github.com/jasny/jquery.smartbanner
<html>
<head>
<title>YouTube</title>
<meta name="author" content="Google, Inc.">
<meta name="apple-itunes-app" content="app-id=544007664">
<meta name="google-play-app" content="app-id=com.google.android.youtube">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function() { $.smartbanner() } )
</script>
</body>
</html>
I need when any user install my app. show view icon ,But if user not install it , show him download
How can do that
NOTE: The following issue only occurs on Android versions above 4.4.2 (as far as I know)
TL;DR
Problem 1:Buttons with click/tap/vclick/touchstart attached to them, seem to work only partly (10-30% of the time) in my cordova app (Android only).
Problem 2: The button in my form (submit button) doesn't trigger my .submit(function(){..}); event, but the 'go/enter' button on the keyboard does trigger the event. (also Android only)
I'm trying to develop a hybrid app for ios/android/windows. In the app, I'll have the occasional button that needs to trigger some actions.
Problem 1
Generally I'd use .on('click', function() { ... });, but I've learned that click doesn't really cooperate with mobile devices. Instead I'll either use vclick, tap or touchstart, yet this doesn't always seem to work. Sometimes the button will trigger, sometimes it will trigger after I repeatedly tap/click it.
Problem 2
On other pages I'll have a form that's wrapped in a <form> tag and includes a <button type="submit" id="btnSubmit">Submit form</button>. In my javascript I'll have an .on('submit', function(e){ ... }); event to catch the form submit, but for another unexplainable reason, this doesn't seem to work.
Here is my form:
<form id="registerForm" method="post" action="#" class="ui-body ui-body-b ui-corner-all">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regLang" data-translation="reg_language"></label>
<select id="regLang" name="Language">
<!--<option value="0">EN</option>-->
<option value="1">NL</option>
<option value="2">FR</option>
<!--<option value="3">DE</option>-->
</select>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regCode">Registration Code:</label>
<input type="text" name="RegistrationCode" placeholder="Registration Code" data-translation="reg_code" id="regCode" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regEmail">E-Mail Address:</label>
<input type="email" name="EmailAddress" placeholder="Email Address" data-translation="reg_email" id="regEmail" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<!--<label for="regPassword">Password:</label>-->
<input type="password" name="Password" placeholder="Password" data-translation="reg_password" id="regPassword" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<button type="button" id="regRegister">
<span data-translation="reg_register"></span>
</button>
</div>
</form>
And this should be the code to get my form triggered:
$("#registerForm").submit(function (e) {
console.log("I don't even make it inside.");
});
When I press the submit button as you can see on the image, the form will submit and go through the code above. When I however press the "Registreren" button, nothing will happen.
Now I know you guys will say, just add an onclick event to the button and catch the form submit like that, but then I'll just be stuck with my first problem. The button doesn't always seem to get triggered..
Update
As requested, here is how my index.html pages looks like to see an overview of my additional scripts:
<head>
<meta charset="UTF-8" />
<title>Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- JQuery -->
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.3.0.min.css" type="text/css" />
<!-- simple dialog -->
<link rel="Stylesheet" href="jquery-mobile/jquery.mobile.simpledialog.min.css" type="text/css" />
<link href="styles/main_absolute.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" />
<link href="styles/app.css" rel="stylesheet" type="text/css" />
<link href="jquery-mobile/jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="slickgrid/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script>
// Prevent default errors at start of application when running in browser.
// However, still shows other exceptions that are needed to debug the application.
// NOTE: comment this code if you're building the ios or android app (or windows)
// (function () {
// var ConsoleBasedNativeApi = {
// exec: function(bridgeSecret, service, action, callbackId, argsJson) {
// return console.log(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId]));
// },
// setNativeToJsBridgeMode: function(bridgeSecret, value) {
// console.log(value, 'gap_bridge_mode:' + bridgeSecret);
// },
// retrieveJsMessages: function(bridgeSecret, fromOnlineEvent) {
// return console.log(+fromOnlineEvent, 'gap_poll:' + bridgeSecret);
// }
// };
// window._cordovaNative = ConsoleBasedNativeApi;
// })();
</script>
<script src="cordova.js" type="text/javascript"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js" type="text/javascript"></script>
<script src="js/lib/jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/lib/jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<!-- <script src="js/lib/jquery-mobile/jquery.mobile-1.4.2.js" type="text/javascript"></script> -->
<script src="js/lib/jquery-mobile/jquery-drag/jquery.event.drag-2.2.js" type="text/javascript"></script>
<!-- jquery progress bar -->
<link href="styles/jqm-progress-bar/jQMProgressBar.css" rel="stylesheet" type="text/css" />
<script src="js/lib/jquery-mobile/jquery.mobile.simpledialog2.min.js" type="text/javascript"></script>
<!--simple dialog-->
<script src="js/lib/jqm-progress-bar/jQMProgressBar.js" type="text/javascript"></script>
<!-- Slickgrid -->
<link href="slickgrid/slick.grid.css" rel="stylesheet" type="text/css" />
<link href="slickgrid/controls/slick.pager.css" rel="stylesheet" type="text/css" />
<script src="slickgrid/slick.core.js" type="text/javascript"></script>
<script src="slickgrid/slick.grid.js" type="text/javascript"></script>
<script src="slickgrid/slick.dataview.js" type="text/javascript"></script>
<script src="slickgrid/controls/slick.pager.js" type="text/javascript"></script>
<!-- toastr -->
<link href="js/lib/toastr/toastr.min.css" rel="stylesheet" type="text/css" />
<script src="js/lib/toastr/toastr.min.js" type="text/javascript"></script>
<!-- moment -->
<script src="js/lib/moment.min.js" type="text/javascript"></script>
<!-- Underscore -->
<script src="js/lib/underscore.min.js" type="text/javascript"></script>
<script src="js/lib/jquery-plugins/data-selector.js" type="text/javascript"></script>
<!-- statusbar -->
<script src="js/lib/statusbar.js" type="text/javascript"></script>
<!-- Own libs -->
<script src="js/app/namespace.js" type="text/javascript"></script>
<script src="js/app/translation.js" type="text/javascript"></script>
<script src="js/app/toast.js" type="text/javascript"></script>
<script src="js/app/config.js" type="text/javascript"></script>
<script src="js/app/settings.js" type="text/javascript"></script>
<script src="js/app/utils.js" type="text/javascript"></script>
<script src="js/app/database.js" type="text/javascript"></script>
<script src="js/app/grid.js" type="text/javascript"></script>
<script src="js/app/sidebar.js" type="text/javascript"></script>
<script src="js/app/logo.js" type="text/javascript"></script>
<script src="js/app/news.js" type="text/javascript"></script>
<script src="js/app/registration.js" type="text/javascript"></script>
<script src="js/app/sync.js" type="text/javascript"></script>
<script src="js/app/login.js" type="text/javascript"></script>
<script src="js/app/cart.js" type="text/javascript"></script>
<script src="js/app/productdetail.js" type="text/javascript"></script>
<script src="js/app/customer.js" type="text/javascript"></script>
<script src="js/app/recipe.js" type="text/javascript"></script>
<script src="js/app/endlessgrid.js" type="text/javascript"></script>
<script src="js/app/visitreports.js" type="text/javascript"></script>
<script src="js/app/reports.js" type="text/javascript"></script>
<script src="js/app/progresshandler.js" type="text/javascript"></script>
<script src="js/app/departments.js" type="text/javascript"></script>
<!-- iScroll -->
<script src="js/lib/iscroll/iscroll.js" type="text/javascript"></script>
<script src="js/lib/iscroll/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<link href="js/lib/iscroll/jquery.mobile.iscrollview.css" rel="stylesheet" type="text/css" />
<link href="js/lib/iscroll/jquery.mobile.iscrollview-pull.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.hashListeningEnabled = false;
});
</script>
<script src="js/app/app.js" type="text/javascript"></script>
<!-- Debugger -->
<!--<script src="http://192.168.100.199:8080/target/target-script-min.js#anonymous"></script>-->
<!--<script src="http://192.168.16.125:8080/target/target-script-min.js#anonymous"></script>-->
<!-- <script src="http://debug.phonegap.com/target/target-script-min.js#bee0a570-a515-11e3-8d7c-22000a98b3d6"></script> -->
</head>
<body>
Content is probably not relevant and also way too long
</body>
On the button regRegister put action
onclick="yourFunction()"
and read this : How to add function on button in phonegap?
The regRegister button has type=button, not type=submit, however I am not sure this is the problem. I had similar issues with tap not working in an Ionic / Cordova app and the problem was that Ionic's tap system was interfering with some maps I was loading (OpenLayers). In Ionic the solution is this one.
Perhaps one of the libraries you are loading interferes with jQuery Mobile.
I solved the issue as it was a HTML problem. On top of my HTML there was a div that covered the whole screen. This div had a display: none style attached to it which made it impossible for me to click on it. By removing this I was able to click every button again.
Hi In my android phonegap app,i have used jquery autocomplete feature.I need to get the keyvalue pair in autocomplete
Here is my example code:
var Person = [{"Prateek":"hello"},{"James":"android"}];
$(".searchbox").autocomplete(Person);
When i type 'j' in the textbox i need to get android instead of james in the autocomplete textbox.But i am getting error and result is not shown in textbox.And i am using autocomplete js which can be used also in asp.net
Please guide me where i am wrong.Thanks In Advance
make sure you have the following links, the ordering does matter
<link rel="stylesheet" type="text/css" href="jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-ui-1.9.2.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>
then use autocomplete like this
$(".searchbox").autocomplete(source: Person)
jquery ui can be download here http://jqueryui.com/download/
EDIT:
you can also look at listviews at jquery mobile docs
When trying to use jqplot in my Android PhoneGap application I get this error:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'jqplot' at file:
The graph is supposed to show after pressing a button.
I have exactly the same code running properly on a webpage in Chrome, which shows that the code is correct.
The link below has the same problem but nobody has answered it, so I thought i'd see if anyone has since found a work around.
How to plot jqplot chart inside phonegap app for Android
Includes:
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
<script type="text/javascript" src="jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/jqplot.canvasTextRenderer.js"></script>
jqplot code:
function makegraph() {
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
}
HTML:
<div id="chartdiv" style="height:400px;width:300px; "></div>
Thanks
Found the answer:
put data-ajax="false" in the href tag to force a page reload and the jqplot script will be loaded.
Otherwise put the jqplot script and css files after the data-role="page" tag and the script will be loaded each page transition.
I am trying to build a web app for Android device using Senahc Touch and display a splash screen. I was using the Sencha framework which has a Ext.Setup property that you can specify the iPhone splashscreen. I've stopped trying to get this parameter to work and am now just trying to use standard HTML5 meta tags to load the splash screen. Has anyone ever managed to get the Android splash scren displayed either in a basic HTML5 app or a fullyblown Sencha app?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="TSplash.gif" />
<script src="sencha-touch.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen : true,
html : 'Hello World_7!'
});
}
});
</script>
</head>
<body></body>
</html>
One way is to add a background image to the body of your html. You see it on startup for a moment before your activity's js kicks in:
<HTML>
<head>
<title>Contacts</title>
<script type="text/javascript" src="sencha-touch.js"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<link href="app/app.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="0000" style="background-image: url(TSplash.gif);"></body>
</HTML>