QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Intel XDK Orientation Guide

Intel XDK Orientation Guide

This post is a part 44 of Intel XDK Complete Tutorial post series.

In this tutorial I will show you how you can lock your Intel XDK apps orientation and also detect the current orientation.

Locking Orientation

intel.xdk.device.setRotateOrientation() function is used to lock orientation.

Lock to “portrait” orientation

intel.xdk.device.setRotateOrientation("portrait");

Lock to “landscape” orientation

intel.xdk.device.setRotateOrientation("landscape");

Unlock Orientation

Unlocking the orientation again allows the app to change orientation according to device rotation. intel.xdk.device.setRotateOrientation() function is also used to unlock orientation.

intel.xdk.device.setRotateOrientation("any");

Finding current orientation

intel.xdk.device.orientation property can be used to find the current orientation.

if (intel.xdk.device.orientation == "90" || intel.xdk.device.orientation == "-90")
{
        //landscape
}
else
{
        //portrait
}

Finding Initial Orientation

Initial orientation is the orientation when app was launched. intel.xdk.device.initialOrientation can be used to find the initial orientation.

    if (intel.xdk.device.initialOrientation == "90" || intel.xdk.device.initialOrientation == "-90")
    {
            //landscape
    }
    else
    {
        //portrait
    }

Tracking Orientation Change

Whenever orientation changes intel.xdk.device.orientation.change event is fired.

       document.addEventListener("intel.xdk.device.orientation.change", function(){
           if (intel.xdk.device.orientation == "90" || intel.xdk.device.orientation == "-90")
           {
                    //landscape
           }
           else
           {
                    //portrait
           }
       });
Nov 5, 2014Narayan Prusty
HTML5 Mobile App Development Using Intel XDKHide Status Bar In Intel XDK
Comments: 3
  1. Silver
    5 years ago

    I keep getting confused with these coding tutorials -_-
    1. coz i’m new to Intel XDK
    and 2. is that you didn’t state where you should put the code weather it’s in app.js or somewhere else…
    please ever so kindly clarify this coz i don’t get it at all…

    ReplyCancel
  2. Zamiel
    5 years ago

    Orientation on android app looks good if landscaping,it wide open for great experiences

    ReplyCancel
  3. Juan
    6 years ago

    Actually just use buttons to change the orientation because I can’t do the intel xdk detect automatycally the orientation :/

    I need acelerometer plugin?

    ReplyCancel

Leave a Reply to Silver Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 4 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Locking Orientation
  • Unlock Orientation
  • Finding current orientation
  • Finding Initial Orientation
  • Tracking Orientation Change
Related Articles
  • Retrieve Viewport Height and Width In Intel XDK
  • Launch Browser Inside Intel XDK App
  • Intel XDK Programming Guide to Background Execution
  • Change Viewport Width using Intel XDK
  • Detect Shake using JavaScript
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license