Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Rebelllious
Posts: 46
Registered: ‎06-02-2013
My Device: 9780
My Carrier: MTS UKR
Accepted Solution

Defining orientation of BB10 device

I have an app in which the major element on the screen is a textarea. For portrait mode, the number of lines is set to 9 and everything looks smooth. But for landscape mode 9 rows is far too many. I need to set this property to 2. For this purpose I tried to use smth like this:

<script>
var x = 0;
function detectOrientation(){
    	if(typeof window.onorientationchange != 'undefined'){
        	if ( orientation == 0 ) {
            	x = 9;
            	//Do Something In Portrait Mode
        	}
        	else if ( orientation == 90 ) {
            	x = 2;
            	//Do Something In Landscape Mode
        	}
        	else if ( orientation == -90 ) {
            	x = 2;
            	//Do Something In Landscape Mode
        	}
        	else if ( orientation == 180 ) {
            	x = 9;
            	//Do Something In Portrait Mode
        	}
    	}
}
</script>

<textarea name="text" id="text" rows="x"></textarea>

 But in Ripple emulator, as well as device emulator, I keep getting X as 2 regardless of the orientation I choose. What am I doing wrong?

P.S. I am new to WebWorks, sorry...

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Defining orientation of BB10 device

window.onorientationchange is an event that gets fired when the device switches from portrait -> lanscape or the other way around

 

Something simple that will work...

 

var x = 0;

window.onorientationchange = function() {
  // Are we in Landscape mode?
  if(window.innerWidth > window.innerHeight) {
    x = 2;
  } else {
    x = 9;
  }

// Do something with x here

}

 

window.innerWidth / Height return the width + height of the browser.

 

If the width is greater than the height you're in lanscape mode

 

Its useful to test for landscape rather than portrait as a Q10 only has portrait mode (720x720)

 




Click the like button if you find my posts useful!
Please use plain text.
Developer
Rebelllious
Posts: 46
Registered: ‎06-02-2013
My Device: 9780
My Carrier: MTS UKR

Re: Defining orientation of BB10 device

[ Edited ]

Indeed, it's simple, but effective!

Yet, I had to set the property of rows="x" to rows="9" for the text area for it to be loaded with the proper look at launch.

var x = 0;

window.onorientationchange = function() {
  // Are we in Landscape mode?
  if(window.innerWidth > window.innerHeight) {
    x = 2;
  } else {
    x = 9;
  }

document.getElementById("text").rows = x;
}

<textarea name="text" id="text" rows="9"></textarea>

 Thanks a lot once again.

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Defining orientation of BB10 device

Yep, of course - I'm just being lazy leaving you something to do :smileyhappy:

 

It's also advisable to move the var x = 0 line inside the function at the start if you're not using it elsewhere to avoid possible scoping issues




Click the like button if you find my posts useful!
Please use plain text.
Developer
Rebelllious
Posts: 46
Registered: ‎06-02-2013
My Device: 9780
My Carrier: MTS UKR

Re: Defining orientation of BB10 device

Thanks, noted. It's a one place var, so I will move it inside.
Please use plain text.