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.
Related
I'm on Windows 10, developing some app with TWebBrowser, and I had plan to use jQuery / BootStrap and some other CSS like FontAwesome
All these are perfectly compatible with Internet Explorer, at least latest versions. Anyway, the TWebBrowser inside my app, doesn't appear to work with simple html code like:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<span id="text1"><i class="fa fa-user fa-2x"></i> - Personal Profile Update</span>
</body>
</html>
This code should show an user icon from FontAwesome, but doesn't appear anything.
The application code is very simple, I just put WebBrowser on my Form, and on FormShow I do:
WebBrowser1.Navigate('http://localhost/');
But like I said, no icon is displayed. And this is just one example, I noted that Bootstrap html forms styles, jQuery carrousel, doesn't works too... I thought WebBrowser was just like Internet Explorer control, but looks like it doesn't. Is there any easy solution to make it compatible with this stuff?
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.
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>
I want to use the Jquery UI Theme Switcher Widget on my page.
The problem is the Switcher is hosted via http and my page is a https page.
So I get security errors including the switcher.
Does anyone know if I can get the source of the switcher so I can host it on my site?
Or are there any third party switcher scripts that I could use?
Thanks!
For anyone that lands here. Here is what I found.
A list of 10 of them is here: (update link is dead now - Apr 2016)
http://www.net-kit.com/10-practical-jquery-style-switchers/
A replacement for the jquery theme switcher that you can run locally is here:
https://github.com/harborhoffer/Super-Theme-Switcher
I don't know about any other third party implementations, but it's easy to do yourself too. Just set an id on a link element and use jQuery to change the src attribute when a select box changes. Abstracting it into a plugin is pretty easy as well.
I don't want to sound like I am promoting a project I did, but I wrote a jQuery-UI theme switcher based on the themeswitchertool, in order to create one that actually works as advertised. Mine does not link to all the themes by default, but enables you to add any theme you want. Adding all the themes from the jQuery-UI site is trivial.
There is also Super Theme Switcher, which everyone else seems to be using, but it is not as feature-rich as mine, due to it being a port of the old themeswitchertool. This one DOES link all the jQuery UI themes by default.
I had similar errors so I downloaded the js from http://jqueryui.com/themeroller/themeswitchertool/, saved it as jquery.themeswitcher.js and replaced all http jquery-ui urls with google apis https urls.
The only changes were in the var switcherpane where each link looks like:
<li><a href=
"http://jqueryui.com/themeroller/css/parseTheme.css.php?....">
<img src=
"http://jqueryui.com/themeroller/images/themeGallery/theme_90_ui_dark.png" alt=
"UI Darkness" title="UI Darkness" /> <span class="themeName">UI
darkness</span></a></li>
Which I replaced with:
<li><a href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<img src="content/images/theme_90_ui_light.png" alt="UI Lightness" title=
"UI Lightness" /><span class="themeName">UI lightness</span></a></li>
If you search through the file there are a few other html images that are referenced further down.
You can find all the images here
You can simply set the src links to "https" and it will work fine.
<link rel="stylesheet" href="themes/MyTheme.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.1/jquery.mobile.structure-1.4.1.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>