Locking jQuery Mobile App Orientation Using Cordova

Written by on September 3, 2015

Locking jQuery Mobile App Orientation Using Cordova

To celebrate an imminent release of jQuery Mobile I’ve decided to cover it once again. I don’t know if version 1.5 is going to be successful in bringing it back to the previous glory, I can only hope. So let’s for a change write something that’s not related to AngularJS products.

What to do, what to do? I remember when I was still working with jQuery Mobile, locking application orientation was such a pain in the neck. Today it can be easily done using Cordova Screen Orientation plugin.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!


Preparation

Before we can start, make sure you have everything configured correctly.

You will need to have these:

  • Android Environment (or iOS if your working on a MacOS)
  • nodeJS
  • Cordova

If you don’t have everything mentioned here please take a look at this article for more information: Building a Native Mobile App with Cordova and jQuery Mobile.

1. Update Cordova

Don’t forget to update Cordova, older versions may not work with this tutorial:

npm update -g cordova

2. Create a New Project

cordova create JQMOrientationDemo
cd JQMOrientationDemo

Warning: Since a few of my readers never worked with Cordova CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.

At this point, we need to upgrade JQMOrientationDemo project with an appropriate platform. Because I’m using Windows we’re going to create an Android application:

cordova platform add android

if you’re a MacOS user, create an iOS application like this:

cordova platform add ios

3. Install Screen Orientation Plugin

Next, we need to import and install screen orientation plugin into a newly created project:

cordova plugin add net.yoik.cordova.plugins.screenorientation

GitHub

If you’re using Cordova 4.0 or any higher version, you will also need to install WhiteList plugin. Without it we will not be able to access remote content plus application
will spam console log with warning messages.

cordova plugin add cordova-plugin-whitelist

And add this security meta tag to your index.html file:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Development

At this point, you should have everything set up and ready, we can begin.

For example, during the app initialization, if we want to lock screen orientation, we can use this code:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
    screen.lockOrientation('landscape');
}

One last thing, because we’re working with Cordova we also need to include cordova.js file. Just add this line to your main HTML file:

<script src="cordova.js"></script>

That’s everything, during the build process Cordova CLI will automatically prepare this file for us.

Continue to the next page

Categories

3 thoughts on “Locking jQuery Mobile App Orientation Using Cordova”

  1. Is there any difference among using this plugin and using this preference “” in config file?

    • Yes, there is if you’re using it on any Android device older than 4.4. Some older device browsers had this feature partially implemented or not at all. This plugin is using pure Java/iOS to determine screen orientation and it’s not depending on browser values.

Leave a Reply