I built an web-app using the the JQuery Mobile multi page template
http://jquerymobile.com/demos/1.0rc1/docs/pages/page-anatomy.html
It looked fine on HTC Desire HD, iPhone, iPad but not on my friends Samsung and HTC Desire.
After multiple code tweeks I realised if i changed all my relative paths to absolute paths it worked fine.
Do I need to link every object I build using JQM in this manner or is there something inside the head tag I can add??
There are issues with relative paths. see https://github.com/jquery/jquery-mobile/wiki/Refactor:-navigation-paths
Related
I'm working on a Node Webkit project (now called NW.js). The latest stable version of NW (0.12.1) allows the "webview" tag from Chrome extensions to be integrated into a NW project.
After some initial testing, the webview tag seems to work fine for displaying basic webpages. But it won't display any Flash videos embedded in a webpage.
Flash videos play just fine outside of webview (ie in the normal NW browser), as I have "plugin" set to "true" in package.json, thereby using the Flash dll installed on my system. They just don't play inside a webview.
I just came across an article here...
https://developer.chrome.com/apps/tags/webview#local_resources
...which states that "webviews are prevented from loading any resources packaged with the app". So I'm guessing maybe that is what's preventing any Flash dll's installed on my system from being used by webview? I'm not quite sure how to fix this though (assuming this is even the actual problem). Do I need to create a manifest.json file specifically for this, as stated in the article linked to above? If so, what exactly would I put in there? I've been using NW for a while, but haven't really messed around with Chrome extensions code at all, so that part's still a bit fuzzy to me.
Thanks!
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
I'm trying to switch our mobile site from the jQuery Mobile Alpha to the latest Beta version. The problem is with the way the Beta handles URLs for dynamic pages.
Our live Alpha 4 site loads the dynamic pages as relative links (i.e. /#news/). The Beta 1 site loads the dynamic pages as absolute links (i.e. /#/group/webdev/cgi-bin/m/news/).
My question is, is there a way to change the jQuery Mobile Beta to handle URLs as the Alpha 4 version did?
Here are my pages (click the News link for an example):
Live mobile site (jQuery Mobile Alpha 4)
Dev mobile site (jQuery Mobile Beta 1)
there are issues with relative paths. see
https://github.com/jquery/jquery-mobile/wiki/Refactor:-navigation-paths
I found a solution that worked for me.
I modified the jquery mobile sourcecode and replaces the variable "newPath" with the following code:
var newPath = path.get( $('head base').attr('href') );
Works like a charm with relative paths and base href.
I just updated the jQuery Mobile version of our client book-in page to the latest 1.0a4.1 and I need some help debugging a window sizing issue off-site (I'm not on location).
The page runs on an iPad at the store so clients can book in their own cases. However, the page is being displayed like it's on an iPhone with huge lettering. "Emulating" with Ripple shows everything as it should, though.
I can't debug it from here and I'm not using any other CSS besides the base 1.0a4.1 stylesheets. How do I force jQuery Mobile to display the page as if on an iPad?
Here is a screenshot sent by the store clerk:
I didn't have the time to test it or try the fix, so it's still a guess, but at least based on your code inspection ;)
ok, so you put a meta viewport in your page and JQM also pops in a little
<meta content="width=device-width,minimum-scale=1,maximum-scale=1" name="viewport">.
As I said - I didn't test it, but I expect a collision. I have read somewhere that JQM was supposed to stop putting those metatags there... Try fiddling with that metatag a bit.
Also - see if the alpha4 or 4.1 release notes (on the blog) say something about viewports.
Running Media Queries
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.