JQuery to identify "Potrait" or "Landscape" mode for device

Hello Kind Readers,

Recently while enabling Device Channel for SharePoint 2013, I came across a requirement to identify whether the device is in Potrait Mode or Landscape Mode. Based on the mode of the device, different behaviour should happen. There is a simply jQuery event that helps you capture this device transition from Potrait to Landscape or vice versa.

You need to make use of jquery mobile which has an event as orientationchange that gets triggered whenever we make the transition.

Below code snippet will explain more on this.

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript">

$(window).on( "orientationchange", function(event ) {
  alert("This device is in " + event.orientation + " mode!" );
});

// You can also manually force this event to fire.
$(window).orientationchange();
</script>

In this way, using orientationchange event and fetching the value of event.orientation method, you can find the device mode.

Hope it Helps !

JSRequest to play with Query string

At times we are required to fetch some parameters from query string. There are various ways to play with it. Recently I came across a short and simple object to fetch parameters from query string.
JSRequest is a javascript object that lives on the SharePoint page through which you can easily find the query string parameter, filename and path name.

Usage

e.g. URL is /Pages/default.aspx?fName=Geetanjali&lName=Arora

JSRequest.EnsureSetup();            //mandatory
var fName = JSRequest.QueryString["fName"]; // returns Geetanjali
var lName = JSRequest.QueryString["lName"]; // returns Arora
var fileName = JSRequest.FileName;                // returns default.aspx
var pathName = JSRequest.PathName;             // returns /Pages/default.aspx


Quite simple as you can see from the above snippet. Hope it helps.