Page only in portrait - javascript

I'm trying to have the index page of my app viewed only portrait. I've surfed the web but I didn't manage to find anything, except for window.orientation which it doesn't work to me. How can i do? I'm using Cordova (HTML, CSS and javascript). Thank you guys!

In your config.xml file add/change this line in your global preferences .
<preference name="Orientation" value="landscape" />
Delete any existing orientation settings if there are any .
fyi. file location should be in following : app/www/config.xml according to:
https://cordova.apache.org/docs/en/4.0.0/config_ref/

If you want to lock orientation in a particular page use the following plugin link
http://github.com/gbenvenuti/cordova-plugin-screen-orientation
So by using this plugin while loading page you can lock the orientation and while leaving or unloading the page you can unlock the orientation.

Related

How to hide URL Bar in Ionic 5 Capacitor using Browser Plugin?

Checking the new Ionic Capacitor Docs, there seems NO OPTION to hide the url bar of the Browser Plugin (Previously InAppBrowser) at the moment. Need help please.
According to this discussion on a GitHub Issue thread, this is not going to be possible due to the fact that both the IAB and Browser plugins use SFSafariViewController, which doesn't allow you to hide the native controls.
That said, this has been driving me crazy for a while now, as I can't hide the URL bar in either OS even when using the original IAB.
I use iframe to solve the problem
<iframe src='https://stackoverflow.com/' />
ps: url use https

Disable scroll background on showing customize popup

I'm using Cordova to build Android/IOS app with Javascript
Versions:
cordova-android: 6.2.3
cordova-ios: 4.4.0
Before continue actions, user must be re-ask to confirm. A comfirmation popup will be displayed.
Problem is user can scroll background screen when popup shown in their own device. In development environment (browser), its working perfectly by setting popup wrapper full size of screen. I need disable scrolling in device for this case.
What are the best and simplest ways to fixed it?
Sorry for my bad English!
<preference name="DisallowOverscroll" value="true"/>
put above line in your config.xml.
JS solution could be putting :
document.querySelector('body').classList.add('noscroll');
just before the confirmation popup.
And remove it after:
document.querySelector('body').classList.remove('noscroll');
where noscroll is a class defined in (for example) in styles.css:
.noscroll {
overflow: hidden;
}

Blank Screen between a SplashScreen and webview in phonegap iOS

How can I avoid the blank white screen appearing between the phonegap splashscreen and webview loading stage in iOS.I have followed the suggested solutions..like
[1]: http://docs.phonegap.com/en/2.5.0/cordova_splashscreen_splashscreen.md.html#Splashscreen,and other but still the white screen persists even after setting time delay.
I'm loading a external mobile website inside my local index.html file using window.location.href.
Thanks
Try removing page transitions, This helped me to some extent, and use latest phonegap. Use the following code before including jquery mobile library.
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition="none"
});
Edit: Oops, it was between splash screen and the first screen. Try this
link

jQuery Mobile PhoneGap App flickers on startup

I have a jQuery Mobile PhoneGap app that loads all of my pages fine, except for then my app starts up.
The application shows a screen that says Phone gap IPhone non-retina and then shows all of the pages I have created on one screen before my application starts. I load the stylesheets scripts and html body dynamically in a java script file.
Is this a problem that would be occurring on my end, phone gaps end, or JQM end? I will supply code if need be.
I am using JQM 1.2.0 JQuery 1.8 and JQM 1.2.0 css
The flicker happens between the splash page and my first page load.I use this javascript to load the pages into my index.html
javascript:
$("body").load(remoteURL + "body.html?v="+getTimeStamp(),function()
{
loadPage();
}
It take some time, for all scripts to load and your page to set up. You can go to the Phonegap.plist and disable the AutoHideSplashScreen and hide the splash screen from javascript, once the page is fully loaded with:
navigator.splashscreen.hide();
This fixed the problem for me.

Change orientation on Phonegap JQuery mobile

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.

Categories

Resources