Home/ Questions/Q 9035241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T08:42:32+00:00

I am creating an ios/android app with phonegap(cordova) framework. My UI code is little

  • 0

I am creating an ios/android app with phonegap(cordova) framework. My UI code is little bit lacking in horizontal orientation. So, I want to change the look and feel only for horizontal orientation and not for vertical. Is there a condition which i can apply in index.html to achieve this, preferrably in javascript/jquery. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can create an event listener for the event onOrientationChange() in which you can probably change the css file which applies in a particular orientation.

    // create the link tag for the css file in your head section
<HEAD>
<LINK ID="OrientationSpecificCSSTag" REL="stylesheet" TYPE="text/css" HREF=""> // keep the href empty, will set later
.....
</HEAD>

    Now attach the event listener in your javascript file or your script tag

    // attach the onOrientationChange event listener in your script tag
window.addEventListener( 'onorientationchange', OnOrientationChange, false );

    Implement the OnOrientationChange function which actually changes the css files according to the orientation

    function OnOrientationChange()
{
    // case: if portrait
    if( window.orientation == 0 || window.orientation == 270 )
    {
         document.getElementById('OrientationSpecificCSSTag').HREF = 'landscape.css';
    }
    else
    {
         document.getElementById('OrientationSpecificCSSTag').HREF = 'portrait.css';
    }
}
    • 0