JSFeeds: thewebjuice.com - Learn to detect discrete Orientation Changes using orientationchange

Friday, 14 July, 2017 UTC

Learn to detect discrete Orientation Changes using orientationchange

Summary

Introduction to discrete orientation change

Discrete Orientation change refers to the change in the orientation of a device. To be precise from landscape to portrait or vice versa. So what is so new in this? In order to change certain things on the web page, you require detecting the orientation of the page. This is a very powerful API and can help you in various ways while you use it in different applications. The applications where you can use it are as follows:-

Developing a game on the browser
Having a WebGL implementation
For WebVR
For WebAR

Just to mention these are few of the places where you can make use of the orientation. As we refer in the title of this post, these orientation are discrete in nature, that means these are small changes that are being triggered when the orientation of the device changes. Now let’s go ahead and code something up and use an emulator to see the results.

NOTE: You can apply CSS Styles using Media Query for Portrait and Landscape modes but in order to detect and orientation and use JavaScript in order to Push it into the DOM you require a way to detect the Orientation.

Implementation of discrete orientation change

In order to implement the discrete orientation change, we will be using the event

orientationchange

provided to us by the Web Platform itself. This event can help us in detecting whether the device has changed its orientation. Let’s get onto coding this out.

window.addEventListener("orientationchange", function() {
    alert("Orientation angle is " + screen.orientation.angle);
});

By just writing the above piece of code we can easily get the angle of the device orientation. It’s pretty easy to get started. You can see the implementation in below in the emulator as a GIF. You can alternatively go to Code Pen. You can also go ahead and Open this Link on Mobile to Test.

Facebook
Twitter
Google+
LinkedIn
Buffer

Discrete Device Orientation

Now how can you use it in order to know which orientation the device is in? That’s pretty easy I have implemented a sample below to make you understand that as well.

Is it Landscape or portrait?

Let’s implement a small program in order to see is it in landscape or portrait mode. We will infer this from the below-mentioned analogy.

If the width of the device is greater than the height its landscape.
If the width of the device is less than height its portrait.

So the HTML template which we are using for this will look like

<div id="app">
  <h1 id="heading">Default</h1>
</div>

The JavaScript code will go as follows:-

window.addEventListener("orientationchange", function() {
  var landscape;
  var heading = document.getElementById('heading');
    if(screen.width>screen.height){
      landscape=true;
      heading.innerHTML="Landscape"
    }
  else{
    landscape=false;
    heading.innerHTML="Portrait"
  }
});

This code, when running on a mobile browser, will render as shown in the GIF. You can alternatively have a look at the CodePen Sample as well. You can also Open this link on Mobile.

Facebook
Twitter
Google+
LinkedIn
Buffer

Discrete Device Orientation – With Change in Text

Conclusion

In order to conclude you can see that it does not require any special plugin or any special framework to understand whether the device is in the Landscape or the Portrait mode. It just takes a simple event listener that will help in to bring value to your web application.

The post Learn to detect discrete Orientation Changes using orientationchange appeared first on The Web Juice.

... more @ thewebjuice.com

thewebjuice.com