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.
Related
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.
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.
I'm working on a small WebApp for iPad to present Reportings to a user from SSRS. I know that there are existing solution like the one of MobiWave, but my costumer ask me to develop a solution wich is more suitable for his enviroment.
So my question is the following. I'm loading the content of the SSRS into an iFrame and present it to the user. Now, when I click on the links the behavior is the following. In Chrome an Safari Mobile (on the iPad) the Site works as expected. When I runs the same site as a webapp the links are opened in a new safari window. I tried many solutions like this and this but I didn't got it working as expected.
My Code is the following:
<!DOCTYPE html>
<html>
<head>
<title> TEST </title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png" />
<link rel="apple-touch-startup-image" href="images/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a data-role="button" data-rel="back" data-icon="arrow-l">Back</a></li>
<li>Home</li>
</ul>
</div>
<div id="content" data-role="content">
<iframe src="../ReportServer"></iframe>
</div>
</div>
</body>
</html>
EDIT
The code which is loaded to the iFrame is the following:
<html>
<head>
<meta name="Generator" content="Microsoft SQL Server Reporting Services, Version 10.50.1600.1">
<title>localhost/ReportServer - /Reportings</title>
</head>
<body><H1>localhost/ReportServer - /Reportings</H1><hr>
<pre>
[In übergeordnetes Verzeichnis]
Donnerstag, 13. September 2012 15:16 39033 Report1
</pre>
<hr>
Microsoft SQL Server Reporting Services, Version 10.50.1600.1
</body>
</html>
Which links are opening the new tab, the jqm navigation or the reporting services report contents? Are your reports loaded as a full reporting services site Ui or are you linking directly to a reportserver basic rendering of the report?
If linking to a report server version of the report one fallback might be to render as PDF instead of HTML.
Consider removing the dependency on jQuery Mobile as it can interfere with normal page/click events. You may also want to look at other alternative mobile frameworks if you plan to build a larger mobile app and have problems with jQM compatibility:
http://enyojs.com/
http://www.sencha.com/products/touch
http://www.kendoui.com/mobile.aspx
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.
I am new to jquery mobile framework. I implemented the sample application using jquery mobile.Now i want to deploy this application into device. I don't know how to deploy this? please can anybody help me.
Sample Application
<!DOCTYPE html>
<html>
<head>
<title>My Page< /title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
<div data-role="footer">
<h1>End of the page</h1>
</div>
</div><!-- /page -->
</body>
</html>
thanks
Jquery is a framework which makes your life simpler in modifying the content through its
funcitons,selectors.Instead of writing huge lines of javascript You can make your life simpler with Jquery.
In order to check your result of your code.
You can use phonegap .
Install the phonegap plugin with eclipse.
Create an new project through phone gap.
Paste your code in index.html.
Then build the code as per your choice of mobile platform.
Then u can debug/run the code through android simulators or deploy it on the phone.
jQuery mobile only provides you with tools for mobile UI (mostly, touch-oriented). It is used with normal web application backend to make mobile view (presentation), based on user agent, for example. Such applications are deployed on web-server. If you want to make device-deployable application - use PhoneGap or something like that.