I'm working on my first PhoneGap app with JQuery Mobile and I've having a problem getting the included icons to show.
When I reference a local instance of the .css file, like so:
link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
I don't get any icons. Just dark circles. I can see that the css is loading, because if I throw in a bogus path the results don't look like JQuery Mobile at all.
But when I reference a CDN, like so:
link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
I get nice buttons, no problems. I'm using Firefox to view output, but builds all the way onto an Android device show the same symptoms.
I'd punt and use the CDN, but I'm under the impression that if I want the app to run disconnected, then I should just include the .CSS file.
I've double checked my local CSS and downloaded it a second time, but no change. Anyone seen anything similar?
Make sure you have the jQuery Mobile images directory in the same directory as jquery.mobile-1.0.1.min.css.
I've just started with PhoneGap and had the same issue with JQuery Mobile.
Once I added the images under the www folder, I set the Build Action for each image to "Content." By default, mine were set to "Resource."
After this, the images appeared in my Windows Phone Emulator.
Hope this helps.
Chuck
Related
I created Phonegap application that holds web pages in file system. When I open any of these web pages from filesystem, only chosen page is loaded, but related files (images, css etc.) not.
For example there is webpage in filesystem under path:
cdvfile://localhost/temporary/1/
In this directory there are files like: index.html, style.css, img/background.png etc.
When I open file index.html only this file is opened, but page has no styles and no images. These related files have relative path in index.html.
This situation is on iOS platform only. On Android platform and on google chrome all works. Why is that and can I fix it?
EDIT:
I just figured out that links and js loaded from file work. For example:
link
opens right page. But css like:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
are broken.
EDIT:
Unfortunately, this is an open bug in cordova project: https://issues.apache.org/jira/browse/CB-6532
See https://stackoverflow.com/a/22801512/276648
I ended up using a relative path (ie something like ../../Documents/MyApp/temporary/1/) instead of the full path (ie cdvfile://localhost/temporary/1/) to fix the CSS issues in iOS.
It looks like you are running into CB-6532. I just put in a pull request for a fix -- you can temporarily use my fork until it is accepted:
https://github.com/loufranco/cordova-plugin-file
To use it, do
cordova plugin remove org.apache.cordova.file
cordova plugin add https://github.com/loufranco/cordova-plugin-file.git
Remember to reverse it if the pull request is accepted.
I created a new Phonegap 2.5 project from scratch, and I've been trying to load an external URL in it, but I keep getting input boxes popping up on startup before loading the actual URL. I first get a pop-up with the URL of the website, then in the input box it says "DeviceInfo","Device652321624". If I click Cancel, it pops up 2 more times before loading the website. On the website itself, it loads some relative URLs, but others cause the entire page to refresh and the input boxes to pop up again.
I set the URL by setting <content src="http://phonegap.example.com" />, which is just a regular website with Javascript. I even tried commenting out all Phonegap specific code (no more ondeviceready calls), but it still causes the problem. http://www.google.com loads for me, so I'm not sure what else to check. And it works with the Android version that I've developed.
If it helps, I've also seen this message in the XCode log: Resetting plugins due to page load.
I've had the exact same problem today.
I fixed it by checking the include of the cordova.js file (this js is generated when you create the project using the create command.
( called cordova.js in the renamed cordova project version. probably phonegap.js in phonegap ?)
anyway my include was :
<script type="text/javascript" src="js/cordova.js"></script>
whereas je js file was in the project root :
I changed it to
<script type="text/javascript" src="cordova.js"></script>
and every things is fine now.
also, the 'create' command for Android generate a different js file. make sur that the new one generated for ios is used.
hope that helps !
Problem is you are using android's cordova.js instead of ios's cordova.js.
Just make sure you are using the proper one.
When I add jqm-icon-pack-2.1.2-fa.css to my website, the jQuery UI fonts don't show. If I remove the reference, they show. I'm creating an MVC4 mobile application using Visual Studio 2012. Here is how I'm referencing the css files:
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.structure-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.theme-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jqm-icon-pack-2.1.2-fa.css")" type="text/css">
If I remove the last reference, the jQuery icons work but the Font Awesome icons don't work. I've tried to reorder the references and that didin't work. I've inspected the page with Firebug and I can't see a difference. I've made sure the paths are correct as well. I'd like to post a link to my website but it's inside an extranet so it can't be accessed. The best I can offer is I'm setting an input to type="search" and the search icon and clear text icon do not appear. Any help would be greatly appreciated!!
ANSWER: I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.
Using the JQTouch library, usely links like the following ... should open the new page in the SAME window. That works fine when I go to the site using Safari BUT when I launch the site from the home saved icon, it opens a fullscreen site and on the first link it opens a NEW Safari window. How can I make it stay in the same original fullscreen window?
You have to set the target to _webapp. E.g:
<li class="arrow">Some Page</li>
and then it will load on the same page.
You need to look into manifest files.
The manifest file declares what files (html, javascript, css, jpgs etc.) that the iPhone should cache in order to make a webapp work offline. A part of the manifest file is used to declare which URLs are OK to use when in full screen (webapp) mode.
Specifically look at NETWORK in manifest files.
Example:
NETWORK:
*
This should allow access to any URL you like, and stay in webapp mode.
Alternatively use target="_self" - I haven't seen target="_webapp" anywhere.
/Mogens
One solution I found here is to change the way you write your links for a mobile app. Rather than a href='link.url' you'd write a href="javascript.window.location.href='link.url'"
Dislaimer: I haven't personally tried this yet, so I can't guarantee it will work. But logically, it does make sense.
Using target="_webapp" works only if you remove the rel="external", you cannot have both.