I have a problem with jQuery Mobile 1.3.1 with an input file (accept="image/*;capture=camera") and iOS.
When I click on the button to select a file or to take a picture (choose take picture), then I switch the device in landscape mode to actually take the picture and switch to portrait to confirm. After that, the page is cut at the top. I have to switch the device orientation to solve de problem. I saw that the min-height is 20px smaller just after selecting the file.
Does anyone know how to solve this problem ?
Or can I force jQuery mobile to recalculate the page dimension after file selection ?
You can see the problem here : http://www.reestcompany.com/jqmtest/test.html
You have to add the site to the home screen to have the web app mode and see the problem.
Thanks for you help
You can use trigger page create to create the
$('#pagi-id').trigger('updatelayout');
As mentioned in the jqm docs
Example,
$(window).on( "orientationchange", function(event) {
$('#pagi-id').trigger('updatelayout');
});
I posted an issue on jQuery mobile Github, but it is not a problem from jQuery mobile, it is a problem from Apple. So I also reported the bug to Apple.
https://github.com/jquery/jquery-mobile/issues/6138#issuecomment-20572130
Related
I am having a problem with making my mobile app home screen look like the image below, I have tried using grids but everything aligns to the left.
Has anyone successfully used grids in jquery mobile as home screen with icons?
I created a quick example that should help you on how to create such a home screen.The reason everything aligns to the left in your trys might be because you added style="text-align: left" to your grids? Cant really tell without any code from your side. Here is the
Example
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
I am trying to use the iOS smart app banner on my website. I am currently using jquery mobile 1.3.1 for development. The problem I'm having is jquery mobile automatically hides the address bar on page load. Since the smart app banner appears to be a part of the address bar, the user cannot see the smart app banner unless they scroll up. Is there anyway around this problem? Ideally the page would load and show the smart app banner and not the address bar. However, at this point I would be fine showing both on page load. I know the folks over at HTML5 Boilerplate have solved this issue. See:
Hiding address bar without hiding the smart app banner on iOS 6
The problem with this solution for me is turning off the hide address bar feature in jquery mobile. I can't seem to figure out how to accomplish without altering the jquery mobile core code. I don't really want to alter the jquery mobile code. Mainly because I don't like changing code that I have to update when a new version comes out. Plus I am pulling the jquery mobile file from jquery's CDN. I would like to find another way to solve this problem. Any ideas? Thank.
Add
window.oldScroll = window.scrollTo;
window.scrollTo = function(){return false;};
before you load jquery mobile. This will override Jquery mobile hiding. then you can use the helper.js by reassigning scrollTo after jquery mobile script.
I'm a newbie with jquery mobile but I want to build a vertical navigation panel with its specific animation (no page changing).
A good example is here ( i don't want sencha touch, i need to do this with jquery mobile): http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
For example, if you select "User Interface", just the menu is updating (and a button back appear...)
Another good example is IOs, as the dropbox Ipad application (cf http://www.youtube.com/watch?v=qeqw5OroHzY)
How I can do that with jquery mobile ? I see panels, the 1.3 new feature, but it's not really the same thing ...
Thanks for your help
Try this: jQueryUI's .menu
Other than that, it's just a fancy <aside>
I am writing an application for iPad using phonegap (Simple application using HTML5 and jQuery). The problem is the application window is draggable, as seen in image when I drag window down it comes down and when I leave window it goes up automatically. I don't want this behavior.
Try to set the UIWebViewBounce to NO in your file Cordova.plist.
Check this link: How to prevent app running in phone-gap from scrolling vertically?
Note: with this solution, you may disable the "landscape mode" of your app.
Hope this helps, let me know if this works for you mate