jQuery Mobile's Loader Widget uses by default the ajax-loader.gif spinner, which on Google's CDN comes as a 46x46 blank image. This results in no animation being displayed (jsfiddle)
$.mobile.loading("show");
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<p>Google CDN "jquery.mobile-1.4.2.min.css"</p>
... when loading jquery.mobile-1.4.2.min.css from Google's CDN. (Compare to jQuery's CDN:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<p> jQuery CDN "jquery.mobile-1.4.2.min.css" </p>
or Microsoft's CDN:
<link rel="stylesheet"href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<p> Microsoft CDN "jquery.mobile-1.4.2.min.css" </p>
)
If this is in fact a bug at Google's CDN, how can it be reported? Google Hosted Libraries Developer's Guide refers you to the discussion group, where I found one question (and another at the jQuery forum) and no answers.
Related
I have a web page content ex: index.html, for css, js. I want to link this content (i.e. content of index.html,for css, js) to some other web page? I have used it some times ago, something like but could not remember now. Can any one help?
Thanks.
Point to an external JavaScript file:
<script src="myscripts.js"></script>
Point to an external CSS file:
<link rel="stylesheet" type="text/css" href="style.css">
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 just started using jQuery Mobile for an ASP.NET site which will have certain pages designed expressly for touch/tablet access. JQM certainly seems the way to go, but for some reason I am unable to get icons to show, even when I keep it very simple and only use CDN hosted JS and CSS, as follows:
<head runat="server">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/jquery.mobile-1.4.4.min.js" ></script>
</head>
and then in the body:
<div data-role="main" class="ui-content">
Options
This all seems standard. The only possible thing I can think of is that I am testing using a Microsoft Surface 2 running Windows 8.1 RT and IE11 - but surely this can't be the problem? Can anyone confirm that this should work?
Jon
mmh.. this should work but also, you should avoid data-rel="dialog" (deprecated) but instead data-rel="popup" and set data-dialog="true" in the dialog page.
For some strange reason, when I load my web app on chrome, jquery mobile is flawless but when I try it on my iphone, it never renders properly. The page just crashes and looks awfully bad. I decided to use the cdn because I was told it was faster.
<!-- the three things that jQuery Mobile needs to work -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
I copied the above snippet directly from the jquery site. Any suggestions as to why am getting different behaviors?
Now that the JQM 1.1 RC is out, I would like to migrate my 1.0 mobile app to this 1.1 version. How can I do that? Do I have to replace every file or just some specific files? What should be my migration path?
Edit: I plan to use my app using PhoneGap, which means, that I will want to have all resources locally, so no external references.
Adjust your jqm css and js references. Also, you'll need jquery 1.7.1
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0- rc.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.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script>