Change orientation on Phonegap JQuery mobile - javascript

Hi i write simple app using jqm and phonegap, and i have some problem with change orientation. I need to change orientation on one page. I can change values "Supported interface orientations" but it work on all pages, may be exist way to change orientation on one page ?

You can use this plugin.
https://github.com/champierre/pg-plugin-screen-orientation
To lock the screen to Landscape:
navigator.screenOrientation.set('landscape');
To lock the screen to Portrait:
navigator.screenOrientation.set('portrait');
To unlock:
navigator.screenOrientation.set('fullSensor');

Here is an updated plugin which works perfectly for me: https://github.com/apache/cordova-plugin-screen-orientation
To use it (for cordova version > 4) execute this command:
cordova plugin add cordova-plugin-screen-orientation
Or for phonegap:
phonegap plugin add cordova-plugin-screen-orientation
Then use it like this:
screen.lockOrientation('portrait')
screen.lockOrientation('landscape')
Works for Android & iOS.

Related

Cordova disable shrink view on input focus

I'm creating an app in Cordova/Phonegap (v6.5.0).
Platforms installed:
- IOS (problem is present)
- Android (problem is present)
- Browser (problem is not present)
Now I have a known problem, but no adequate fix for it.
When I focus on a field on my page, the whole page tries to fit on the view the user has (between the top bar and the virtual keyboard). This makes my fields overlapping each other and making the app ugly.
What I would like to have is that my page stays the same, so not adapting to the keyboard.
Do any of you have a solution for this? I have this on all my pages.
Thanks in advance
EDIT:
I found the answer by myself on the following link: Soft-keyboard makes the cordova-view shrink
The cross platform (iOS and Android) solution to this problem is to install the following plugin:
cordova plugin add ionic-plugin-keyboard --save
And add the following code to your deviceready handler:
document.addEventListener('deviceready', function(){
if (window.cordova && cordova.plugins && cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.disableScroll(true);
}
});
Note: Ignore the fact it's an iconic plugin, it works fine with regular cordova projects

How do I load jquery mobile only for mobile browsers, but the regular site for desktop?

So I have an existing desktop html site, but I've created a jquery mobile version. The thing is I'm trying to figure out how to load only the jquery mobile version for mobile phones, but show the desktop version for desktops. I couldn't find anything on the jquery mobile documentation.
You can essentially do with with jquery using the window width or by triggering it on CSS media query breakpoints. A few references below:
Triggering jquery with css media queries
http://www.venveo.com/articles/view/quick-tip-jquery-media-queries
I am however now sure of the ramifications of making it responsive... once jquery mobile kicks in, all bets are off.
You are probably better off calling the jquery mobile on a browser detection rather than a screen breakpoint.

How to enable zoom in Cordova iOS app

I have a web app I've run through Cordova/PhoneGap to create an iOS app. When I run the site on mobile Safari, zooming in and out works fine, but on the iPhone and iPad pinch to zoom doesn't work anymore.
Is there something in Cordova that would be preventing normal zooming from working?
The app uses the RaphaelJS plugin but that's all, aside from the cordova js library
you need to enable the ViewportScale in the Cordova.plist, which is set to NO by default.

scrolling using jqueryMobile in phonegap android

In jquery mobile tutorial they given all scrolling related functionality with examples but if i am using same functionality in phonegap android there scrolling not working please suggest me what shoul i do? I don't want to use iScroll and jQTouch
Thnks
Apurv
Have you tried the experimental jQueryMobile scrollview plugin? (github link)

Loading JS script for only iOS devices?

I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.
You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.
You can use Detect Mobile Browser (it has a library for javascript).
you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}

Categories

Resources