i am creating a jQuery mobile application.Icons doesn't appear in any of my page.
here is the code
<link rel="stylesheet" href="css/jquery.mobile.min.css" />
<script src="script/jquery-1.7.1.min.js"></script>
<script src="script/jquery.mobile.min.js"></script>
But when I using CDN hosted file its working fine. Why should this happen?
If you using it locally, then you will have to download 4 more files from images directory:
icons-18-black.png , icons-36-black.png, icons-18-white.png and icons-36-white.png. These are the four image files jquery css uses to display those icons. Download them and save it inside "images" folder and sharing the same root folder as that of your css file. And it would be working fine coz, CDN will host these images for you.
Dowload Link
Because you are using a internal package. The internal package must be getting the icons from your pc. You should have to include the whole files in the correct directories. Or try including this hosted libraries
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
You haven't provided enough information in your question. Your error could be for many reasons such as:
If you're using an icon font:
is the font uploaded to the right directory?
Is the character you're calling supported in that font?
Is the font-size of your icons set to a visible value?
If you're using jQuery's included icons:
Have you uploaded them to the right directory?
Are you pointing your URL to the correct location to load them?
I had the same problem with the version of jQuery Mobile that I downloaded.
I had downloaded the code from a "jquerymobile.jqGrid-Trial.zip" file. On my laptop, the jqGrid Mobile icons looked fine, but on an iPhone or Android device, they'd be badly offset.
My solution was to modify part of the jquery.mobile.css file to look like this:
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-bars, .ui-icon-edit,
.ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-18-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
(Previously, it had a different background image name in there, and had a quoted image width of 864px, rather than 776px.)
Btw, to find this solution, I actually ignored the .zip file I'd downloaded from the jQuery website, looked at jqGrid's own example (which did work fine on a device), then compared the "jquery-mobile-1.2.0.css" file which they'd chosen to use:
Working jQuery Grid demo
Hope this helps.
Related
My site doesn't seem to show the fonts from font awesome, even though I have included the css from cdn as shown here
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
There should be a icon beside "tenant info" and "landlord info" and few others but those are some that are not showing up.
The site looks fine running locally but does not on live.
UPDATE
Fixed, font folder was in the wrong spot
Found # https://fontawesomecdn.com
https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css
Use this Code in html-head:
<link rel="stylesheet"
href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css"
integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU"
crossorigin="anonymous">
To easily update my app, I copy the content of the www folder to the phone and then do a window.location = workingDirectory.toURL() + "/index.html".
EDIT - note that this works until Phonegap 3.4, but not on 3.5 (nothing seems to be happening when I try to change the location). If instead of toURL I use toNativeURL, then it works also on 3.5. Using toNativeURL also fixes the current issue on iOS.
Copying all the files and opening the index works fine on both iOS and Android. The problem on iOS though is that there is absolutely no styling to the page, as if the links to the CSS files weren't working. Everything is working fine on Android.
My links are relative (eg <link href="css/reseter.css" rel="stylesheet">). Links to other pages or to scripts do work.
Here is the simplified main page I open:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<div class="red">I should be red but I'm not!</div>
This correctly takes me to the other page.
</body>
</html>
style.css
.red { color: red; }
main.js
alert("HELLO is correctly displayed");
I correctly get the alert (its title is cdvfile://localhost/) and I can also correctly go to page2.html. The only problem is with the styles.
If I open the page in Safari pointing to my computer, the style is correctly displayed.
I tried a few things, to no avail:
Add <base href="cdvfile://localhost/persistent/MyApp/"> in the <head>
Update all my href and src to have the full cdvfile path (eg use <link href="cdvfile://localhost/persistent/MyApp/css/reseter.css" rel="stylesheet">)
I finally got it working in PhoneGap 2.9 by using fileSystem.root.fullPath. On PhoneGap 3.3 it only return /. Is this a bug on PhoneGap 3.3 that when using cdvfile, everything seems to work except the CSS files?
I decided to temporally use a relative path to my app for iOS on PhoneGap 3.3: ../../Documents/MyApp/index.html. I don't know if it's safe to use or not.
EDIT In Phonegap 3.5 (I haven't tested in 3.3), using work window.location = workingDirectory.toNativeURL() + "/index.html"; (ie using toNativeURL instead of toURL) works.
Check the following link (the plugin was changed):
http://cordova.apache.org/news/2014/02/10/plugins-release.html
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 have a Dart polymer component referring to an image. The component is in the path component/logo-header.html
<polymer-element name="logo-header">
<template>
<style>
</style>
<img src="../image/youtube.png" style="width: 109px;height:47px;float:left" />
</template>
<script type="application/dart" src="LogoHeader.dart"></script>
</polymer-element>
This code works fine for when I Build the project and use the built application. It does NOT work if I just run the application.
How can I refer to the image so that the URL is correct for the built version and the run from the debugger?
My problem was that the URL is in the img src, when this is run from the dart editor the relative path is different to when this is run from the build html. (When I say run, I mean open the html page).
Putting the URL into the style tag fixed the problem, this made the relative URL to be the same when it is run from dart editor or run from the build html. Now the image directory is located in the web directory so its web/image/youtube.png.
<polymer-element name="logo-header">
<template>
<style>
.youtube {
background-image:url('image/youtube.png');
}
</style>
<div class="youtube" style="width: 109px;height:47px;float:left"></div>
</template>
<script type="application/dart" src="LogoHeader.dart"></script>
</polymer-element>
This fixed the problem.
You can reference your image like this:
/packages/<pkg_name>/<path>
This is based on How to refer to assets
This should work when you put the image in the [package]/asset/image (image subdir is optional of course) directory and use the path assets/image/youtube.png. This may fail when run from DartEditor though because DartEditor IMHO still doesn't support the asset directory.
see also Assets and Transformers
If you use a path relative to your web directory it should also work.
To provide a concrete example it's necessary to know in which directory your logo-header element is stored.
The problem was specifically that when the Dart application was run from the Dart editor (IDE) the path to the image was different to the path to the image when running the build HTML (the build product).
Perhaps this is a bug or ... not a bug, I don't know. Its annoying that a path should have a different path when running from IDE or running from build product. The fix was to use CSS, the fix is documented in the question now.
When I use Google Webfonts, they load fine on every browser I care about, EXCEPT Chrome/iOS. This seems odd, as it works fine on Chrome for Mac and Safari for iOS, so I don't think it's an iOS problem or a Google Chrome problem. It seems to be specific to Chrome/iOS.
Any ideas, or ideas on HOW to troubleshoot this, would be great!
Thanks!
EDIT
I am using Google Web Fonts hosted on Google, with the following:
<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" />
In my font (SASS), I am using the following:
h1
font-family: "Leckerli One", cursive
I'm seeing the same issue. Hosting the font files on my own server and rewriting the #font-face rules to match solved the issue for me, both with my local dev server and in prod.
I don't know the cause; my best guess would be some same-origin issue that's enforced differently in UIWebViews (iOS Chrome being a UIWebView due to App Store rules).
You can use the Google Fonts API Loader which will detect the user's browser and send back appropriately formatted CSS.
Sample code is available in the first response on this Stack Overflow question.
This will allow both Safari and Chrome (and other UIWebView-based browsers) to display the font correctly.
Note: if you want to store the fonts locally, as #Dave suggested, this CSS should work.
IOS devices use TTF formats only (or OTF if they follow the developer guidelines below). That font is being served as WOFF, EOT and OTF (assumably not following the guidelines) . There are some services that will give you other versions. Try specifying the font using #font-face and see if that fixes the issue! Fontsquirrel has an #font-face generator to do the heavy lifting.
In regards to the follow up question. There are some developer documentation from Apple on their implementation of TrueType Fonts. It can be found here. Essentially, TTF formats store the font as sfnt resources. The only other font format that can do this is OpenType's offset table sfnt wrapper. Because IOS reads fonts using sfnt wrappers, you will run into issues with fonts that are not stored in this way. (Sorry for all the jargonny talk).
In the CSS you may use
!important
Example:
#font-face {
font-family: 'Monda' !important;
font-style: normal !important;
font-weight: 400 !important;
src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important;
}
In case anyone else still sees this issue - a font not loading in Chrome on iOS 9 or older - double check that the font is imported as a css file, and not as a js file. Fonts.com will give you the option to import fonts as js, which won't get picked up on Chrome / iOS 9 or below. Changing my import to css fixed this for me.
For me works add in php page:
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Trocchi');
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
</style>
I've got similar problem with UIWebView lately. I made additional changes to both iOS app and web source, nothing helped.
Finally fixed it by simply changing Google Font's link to https.
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.