I am in the very beginning stage of an android application in phone gap/ jQuery mobile
In eclipse I created a proj and all. Working in my device.
My problem is a "loading" text is showing in my application at footer position.
When I removed the jquery-mobile.js, then its not showing "loading". My code as follows.
How to remove this "loading" or is there anything missed in my code ?
Thanks in advance .
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
Start
</body>
</html>
First of all you were missing the jquery mobile css file in your code. Adding it will make your "loading" look better
Secondly as i see in your code that you have used phonegap 1.0.0 which is very old. You should use the latest version of phonegap which is now called as cordova and the latest version number is 2.0.0 Try using that as its awesome.
Related
I've had a look at other solutions proposed to other similar questions on StackOverflow and I can't seem to get my favicon to display for my Rails page in Chrome (at least on the desktop, it works for Chrome on my iPad weirdly).
I've tried having it as an .ico, as a .png, and currently have it as a Base64 string as proposed in response to a similar question. All of these work in Firefox, but will not work in Chrome.
The page is deployed using Heroku, and the link href tag is in the head tag.
The page is at https://www.resnate.com.
EDIT: Code:
<head>
<meta property="og:title" content="Resnate: The Music Social Network." />
<meta property="og:description" content="Music, Gigs and Merch." />
<meta property="og:image" content="/assets/previewimg2-c6c3bbb488ce1d2360bb605f93adc8421afe44813c1de1e324aa008858dbba18.png" />
<title>Resnate: Music, Gigs, Merch.</title>
<link rel="stylesheet" media="screen" href="/assets/application.self-a2388fc8a11c59fee992af9cba7099a53de4bd515465610aa19c43a3b90054f6.css?body=1" data-turbolinks-track="true" />
<link href='//fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<script src="/assets/jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-d602bdfe68ffc63b9f9cc512872aa3cfff046228a0a36e90dd476e8ef54c1b09.js?body=1" data-turbolinks-track="true"></script>
<script src="https://js.pusher.com/2.2/pusher.min.js"></script>
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAABYlAAAWJQFJUiTwAAAACXZwQWcAAAAgAAAAIACH+pydAAAC8klEQVRYw+2XsWscRxSHv5nZ273bVRw43BrLcEIGkwgRY8g/YHDhwq3BpcvgwrhyYRUOuFGVMmXAJJCgQn+Cgw3BRpGNweJUyE5njLGk273bvZt5KeZ0J4WTtCffKY1fuey83zfvzbx5TzXv3JPO1lt0GIIAiulaX8MVBdXZ8wSdrbe0N5qoKEK6vSmre1OVAMlzAAIdhqgoQlermHrsI+DcFEIhoDUI2CzDAToMCRCQbg9Tj7n4y89U6nUIDEpNFkBEoGfpfvzIm1u3sbstEAgGG1UQfH0GjKHd3ERp46knE3TEWWqNhtfYrzn4xzlUFNFubvL6xk10NQKlPjsSIgIiuE7OpZXH1OYa/RR7GwLgxZQ26GqErtVwaYbNczgphAg6itBJ7BX0XmqH/oIRq0ApXJpx9sZ1znx/BZumoPSY4g6TJOw8+4sPK6tgNKNSGoxaq5TCFgUzi99Sv3YV6fVQQXCc5EH9/hrX6fD+tz8wcW3kf0d6FWsB2Fr6kWyjiUmSUuI2TYnn57jw8MHAx2F29Lb6Yc82Nmm9+BsVVrCt9NCDKSKYmQQpugzyfEzqSsXVJDEqrPDV4gIzl7/zVUz/B8IJKopoPX/B7to6pn/wjrPSiXVpRrLwDefu/jDyTOx9e/dome0/n5V1Wx5gb5fAyLyKtR7KjVe8xgPoh10Zc/it0OPVjDEv9+TtC8CXQ1gaQCcx6for/ln+6chClK6/Grx+EwOwaYYUXXbX1vn05GmpUmzTbAIA4huHeL4ByJiPUeOAjxMBKGMAmF26f6LneL+PsQBEBB2GtNZeoqvVz2pIWmsv0WHoW7NyAMq3UknMh5VV3v/6+0RaMtduM6rV3wcgiAjiLK7jhwaMLv2sHs4guHYb18kRZ/uRGEZjCKA1kufUGg0urTyeWlvur/AwncFAQ6C3vUOlXqc215jaYNLb3mG/ZoDys5rNMt7cun1qo5mqBH4wcUWB5DkO/Lh0CrY3nLqiIKjOngf438bzfwFHKVzQwuVyewAAAFl6VFh0U29mdHdhcmUAAHja88xNTE/1TUzPTM5WMNMz0rNQMDDVNzDXNzRSCDQ0U0jLzEm10i8tLtIvzkgsStX3RCjXNdMz0rPQT8lP1s/MS0mt0Msoyc0BAK1OGKx0FS5rAAAAIXpUWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzAAB42jMEAAAyADIMEuKEAAAAInpUWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAAAeNozNLIwAgACAADOvq1X/gAAACF6VFh0VGh1bWI6OkltYWdlOjpXaWR0aAAAeNozNLIwAQACAgDQ2j98IAAAACJ6VFh0VGh1bWI6Ok1pbWV0eXBlAAB42svMTUxP1S/ISwcAEXsDeF85R+IAAAAgelRYdFRodW1iOjpNVGltZQAAeNozNLY0NjcyNTI3BAALOQIJ9tf2MgAAABl6VFh0VGh1bWI6OlNpemUAAHjaM7LMTgIAAq8BOcs8cVIAAAAcelRYdFRodW1iOjpVUkkAAHjaS8vMSbXS19cHAAyaAmiUQFGqAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="nM46FYSVzSqJFGHsAMGU/IrPXSNExiq25L5Q7vJp2ZP+f3uj1u9isqrpgNna/mAl1X0eABdwsP6YYt8qzgDHTA==" />
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I know this question is two years old now, but as I have been struggling with this exact problem for 3+ hours surfing the net without finding a solution to my case (I was doing everything people suggested in all its flavors) and I have just suddenly make it work, I think I'm going to post my experience just in case I can save the pain to the next victim.
My setup was exactly the same as OP's: Rails app with a favicon displaying in every single browser but Chrome. I tried to follow #toddmetheny answer without success.
It turns out that as this app I'm working in loads a whole lot of scripts inside <head>, where you place the favicon <link> tags becomes important. I don't really know why this happens (would be much appreciated if someone could either confirm or destroy my theory), but I guess that while Chrome is loading those scripts, as it has not yet found any <link> tag referencing a favicon, it requests the default /favicon.ico. I noticed this while looking at the Network tab: Chrome always requested /favicon.ico while the other browsers requested the one referenced in the <link> tag as expected.
I don't know if this might have been the cause to OP's problem (as I see he loads some scripts too), but the solution was as simple as moving the favicon_link_tag block to the top of <head>, just after <meta> tags.
Hope this helps some desperate folks out there!
Try using the rails helper favicon_link_tag.
Make sure your icon is saved in app/assets/images. Clear your browser cache to ensure you're using the latest.
I am using jquery mobile in Adobe Air.
When I updated jquery mobile to 1.4.5, I found the icons are disappear.
I testing in a very simple html, when using jquery.mobile-1.1.2.css, the icons work well, but when changing to jquery.mobile-1.4.5.css the icons disappear as shown in the screenshots.
I have checked the 1.4.5 icons file, they are in images/icons-png.
I use too many features of 1.4.5 to switch back to 1.1.2.
The questions are:
How can I fix the missing icons in 1.4.5?
What are some tips for debugging this myself?
I usually debug in Chrome, but this works in Chrome.
I am testing air OSX; my air CFBundleVersion is 18.0.0.180
<html>
<head>
<title>Hello World</title>
<script src="AIRAliases.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.2.css"/>
<!--link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.2.css"/-->
<!--link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.css"/-->
</head>
<body>
<h1>Hello World</h1>
<div id="informationPage" data-role="page">
<div data-role="header">
<h1> 1.1.2 </h1>
</div>
<div data-role="content">
<select id="heightDropdown">
<option value="408">Here is 1.1.2.css</option>
<option value="409">4'9"</option>
</select>
</div>
</div>
</body>
</html>
I work for the asker.
The problem come from AIR don't support SVG icons which have brought in since jQuery Mobile 1.4.0 and use as default format.
To use png icons as default format. Download jquery.mobile-1.4.5.zip from
jQuery Mobile site. Then use jquery.mobile.inline-png.css or jquery.mobile.external-png.css replace jquery.mobile.css. If use jquery.mobile.external-png.css, make sure copy images folder too.
I have a simple app developed with jQuery Mobile and implemented in PhoneGap. It works fine in the iPad 4.3 simulator, but not on iPad 5.0 simulator and an actual iPad running iOS 5...
This is the head section of the html file:
<head>
<meta charset="utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta content="width=device-width,minimum-scale=1,maximum-scale=1" name="viewport"/>
<link rel="apple-touch-icon" href="icon.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>
<title>App demo</title>
<link rel="stylesheet" href="scripts/jquery.mobile-1.0rc2.min.css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"/>
<script type="text/javascript" src="scripts/jquery.mobile-1.0rc2.min.js"/>
<script type="text/javascript" src="scripts/general.js"></script>
<script type="text/javascript" src="scripts/app.js"/>
</head>
When I run it on iPad simulator 4.3 everything works great. But on 5.0 it just shows a blank screen. Same with the actual iPad with iOS 5. If however I remove the script references it sort of "works" in that it shows the content of the HTML page, but of course without the styling and functionality of jQuery Mobile... Including any jQuery at all seems to break it, e.g. if i leave in only the reference to jquery-1.6.4.min.js it won't work either. Or one of my custom js files for that matter.
Does anyone know what's going on here? Does it have something to do with placement of the file references? I think I have placed them in the correct order (jQuery first, then jQuery mobile and then my custom js)... It doesn't seem like it never works, I tried this app http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ and that works fine. It has the script references rather strangely placed at the bottom of the file, just before the closing body tag. But I tried doing that too, and then the jQuery Mobile stuff didn't kick in at all (although I could see the content).
And still, since it works in the 4.3 simulator I don't think there is something really wrong with my code, but then why doesn't it work in 5.0?
This question here on stack overflow seems to suggest that the UIWebView in iOS5 requires external script links to have an actual closing tag rather than simply ending with '/>'.
Try to change the links to:
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
Does that change anything?
I'm trying to migrate a Phonegap app wich uses jQuery Mobile to Blackberry. When I start the app, which runs fine on Android and iOS. I see no styles, javascript whatsoever.
I figured, that Blackberry webworks apps use different file paths than iOs and Android. I find this file path thing a bit odd in general.
Like when you use a file path in an HTML file like for <img src="res/img/..."> the normal relative path is fine for Android and iOS. BUT if you specify a file path in JS you need "file:///android_asset/www/res/img" for Android while "res/img/" is fine for iOS. But anyways... what's the case with Blackberry here?
Do external JavaScript and CSS files require something like the following?
<link rel="stylesheet" href="local:///lib/jquerymobile/jquery.mobile.min.css" />
or should it work the normal way by just specifinging the relative path?
Besides that, are there other pitfalls? Like I heard about file naming issues when using "dashes", "underscores", whatsoever.
Would be great if someone with exerience with Phonegap apps for BB could share their experiences.
This is what i have:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height,
initial-scale=1.0, 'maximum-scale=1.0, 'minimum-scale=1.0, user-scalable=no" />
<!-- PhoneGAP -->
<script src="json2.js" type="text/javascript"></script>
<script src="phonegap-1.0.0.js" type="text/javascript"></script>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="resources/jquery.mobile-1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="resources/jquery-1.6.4.min.js"></script>
<script src="resources/jquery.cookie.js"></script>
<script src="resources/jquery.mobile-1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
That´s the order that works, check the src attribs to know where you must copy the jqm library.
Good luck!
I'm at the very early stages of writing a BlackBerry app using WebWorks. I'm aiming at mainly OS6 devices (Torch), but I need it to be compatible with OS5 for a small number of users who'll be using older devices. As far as I'm aware, WebWorks should work on OS5, however I have created a basic app with a hyperlink, and the text doesn't show on the OS5 simulator (it works fine on the OS6 simulator). All it shows is a blank screen. I've tried to just put some text on the app (i.e. not in hyperlink tags) and this doesn't show either.
HTML file as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" />
<title>My App</title>
<script type="text/javascript" language="jscript" src="http://localhost/PubInfo/scripts.js" />
</head>
<body>
Click to show device model.
</body>
</html>
You'll notice the only unusual thing I've done (and this is reflected in the config.xml to load the index.htm) is to reference the script file from localhost so I can amend the app without recompiling, again this works fine in OS6 so I don't think it's this that is causing the problem.
I'm developing using the WebWorks Plugin for Visual Studio on Windows 7 (x64). Apart from referencing the files from localhost, everything else is default, i.e. as it is set up when you create a new project.
Has anybody come across a similar problem, and if so what was your workaround? Any help would be appreciated.
Its because your script is not well written (completed):
Also update your meta tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<script type="text/javascript" language="jscript"
src="http://localhost/PubInfo/scripts.js"></script>
</head>
<body>
Click to show device model.
</body>
</html>