JQuery Mobile Label on Loading screen - jquery-mobile

I am using JQuery Mobile version 1.1.1
I have a loading image with as a splash screen.
I need to add a version label to it but I do now know if this is possible or not.
Has anyone ever done this?

Related

iPhone/iPad Status bar overlapping on app's header

I am using worklight 6.2 Consumer Edition on WAS Liberty Profile 8.5.5.1 Server. I am using jQuery Mobile 1.4.2 to develop UI. When I install app on iPhone/iPad, status bar of phone is hiding some part of my app's header.
How can I fix this issue (if its an issue)?
This works fine in a default new app with jQuery Mobile that was generated by Worklight Studio. As you can see, the status does not overlap the text.
You can also take a look at the Worklight Starter with jQuery Mobile edition, that also works on iOS w/out the status bar covering the top of app. Compare your CSS.
You need to provide a screen shot of what you're seeing, as well as provide a sample application where you are experiencing it. This issue originates from your code. Provide code.
One possible solution would be to add some margin-top to whichever element is at the top of your applicaiton's HTML.

Jquery mobile + phonegap only black theme

I've build a test app with phonegap build using only the jquery mobile example file.
In the browser the style is white (see the link: http://view.jquerymobile.com/1.3.2/dist/demos/examples/ ) but in the app i see the header and the buttons in the black version.
Anyone have some idea to solve this?
Tnx
Did you try changing the data-theme='a'. The data-theme controls what the buttons and background look like and Jquery mobile has created a standard set of swatches. http://jquerymobile.com/demos/1.1.1/docs/api/themes.html - check this out for more information on changeing the colors or themeing.

jquery mobile min-height after input file camera

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

iOS Smart app banner with jquery mobile

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.

Is there any way to handle the flickering screen in jQuery mobile

I am using jQuery mobile 1.1.0 and I am facing a problem that when I run the application in the browser it works fine but when I run this through 'Home screen icon' it starts flickering the pages.
I am using iphone 5.1.
Does anybody have a solution for this issue?
You need to update to jQM 1.1.1, screen flickering issues have been fixed in this version. This problem affected running jQM in UIWebView container like PhoneGap, but I assume it's similar when you save it on the home screen.
Try updating and see if it'll fix your problem.
Announcing jQuery Mobile 1.1.1
It's because of the page transitions. If you disable them globally for the time being, you'll fix your problem. It sucks to lose the transitions, but the white "flash" is far worse.
Here's the docs on disabling page transitions: http://jquerymobile.com/test/docs/api/globalconfig.html

Resources