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
Contributor
richie-agarwal
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --

Screen Orientation

Hi,

 

Can anyone please help me detect screen orientation on playbook using webworks.

 

I have used 

 

@media screen and (max-device-width: 1200px) {
  .wrapper {
     width:720px;
     background: #ccc;
  }
}

 

 

but still no change is seen when i change device orientation by swiping from bottom right to center.

 

Please use plain text.
Contributor
slondell
Posts: 33
Registered: ‎02-23-2011
My Device: PlayBook
My Carrier: Simulator

Re: Screen Orientation

I remember another post that mentions that the emulator is having a problem with orientation with WebWorks.  When I find it, I'll update this post.

 

--------------------------------------
ABC Trace for BlackBerry PlayBook
Please use plain text.
Contributor
slondell
Posts: 33
Registered: ‎02-23-2011
My Device: PlayBook
My Carrier: Simulator

Re: Screen Orientation

Please use plain text.
Contributor
richie-agarwal
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --

Re: Screen Orientation

I'm not trying to fix app to a particular orientation. I want my app to respond to the change in orientation.

I want my app to detect it's current orientation and display pages accordingly

Please use plain text.
Contributor
richie-agarwal
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --

Re: Screen Orientation

Here is the sample code that i was able to find from webcast.

 

After testing it i feel that by swiping from center to bottom right your screen will not actually change its orientation. Landscape mode itself will get shrunk when we swipe.

 

simulator does not support portrait mode. 

Please let me know if i'm wrong.

 

 

<html>
<head>
	<title>CSS3 Media Queries</title>
	<style type="text/css">
		h2 { margin-top: 0; }
		/* The following CSS is applied to web content loaded on any screens larger than 1024px wide (e.g. Desktop Browser) */
		@media (min-width:1024px) 
		{
			#playbook, #screen480, #screen360x480, #screen360x400  { display: none; }
			body {
				font-family: Times New Roman;
			}
			#desktop { 
				display: block; padding: 0.5em;
				color: black; border: solid 0.1em black;
			}			
		}
		/* The following CSS is applied to web content loaded on any screens up to 1024 wide (e.g. BlackBerry Playbook) */
		@media (min-width:480px) and (max-width:1024px) 
		{
			#desktop, #screen480, #screen360x480, #screen360x400  { display: none; }
			body {
				font-family: Calibri;
			}
			#playbook { 
				display: block; padding: 0.5em;
				color: purple; border: solid 0.1em purple;
			}
		}
		/* The following CSS is applied to web content loaded on any screens up to 480 wide (e.g. All current BlackBerry Smartphones) */
		@media (max-width:480px) 
		{
			#desktop, #playbook, #screen360x480, #screen360x400  { display: none; }
			body {
				font-family: Trebuchet MS;
			}
			#screen480 { 
				display: block; padding: 0.5em;
				color: green; border: solid 0.1em green;
			}
		}
		/* The following CSS is applied to web content loaded on any screens up to 360x480 (e.g. BlackBerry Torch 9800) */
		@media (max-width:360px) and (max-height:480px) 
		{
			#desktop, #playbook, #screen480, #screen360x400  { display: none; }
			body {
				font-family: Verdana;
			}
			#screen360x480 { 
				display: block; padding: 0.5em;
				color: red; border: solid 0.1em red;
			}
		}
		/* The following CSS is applied to web content loaded on any screens up to 360x400 (e.g. BlackBerry Style 9670) */
		@media (max-width:360px) and (max-height:400px) 
		{
			#desktop, #playbook,  #screen480, #screen360x480 { display: none; }
			body {
				font-family: Arial;
			}
			h1 {
				font-size: 1.5em;
			}
			#screen360x400 { 
				display: block; padding: 0.5em;
				color: blue; border: solid 0.1em blue;
			}
		}

		/* Specific CSS can be applied to page elements if the user is holding their device in a given orientation */
		@media (orientation:portrait)
		{
			#isPortrait { display: block; }
			#isPortrait b { text-transform: Small-caps; }
			#isLandscape { display: none; }
		}
		@media (orientation:landscape)
		{
			#isPortrait { display: none; }
			#isLandscape { display: block; }
			#isLandscape b { text-transform: uppercase; letter-spacing : 0.5em;}
		}
	</style>
	<script type="text/javascript">
		function showDimensions()
		{
			var ele = document.getElementById("screenWidth");
			if (ele)
			{
				ele.innerHTML = "<p>";
				ele.innerHTML += "<b>Screen (width x height):</b> " + screen.width + " x " + screen.height + "<br/>";
				ele.innerHTML += "<b>Viewport (width x height):</b> " + window.innerWidth + " x " + window.innerHeight + "<br/>";
				ele.innerHTML += "</p>";
			}
		}
		window.onresize = function()
		{
			showDimensions();
		}
	</script>
</head>
<body onload="showDimensions()">

	<h1>CSS3 Media Queries</h1>
	<div id="screenWidth"></div>

	<div id="isPortrait">
		<p>
			The current orientation of this page is <b>portrait</b>.
		</p>
	</div>
	<div id="isLandscape">
		<p>
			The current orientation of this page is <b>Landscape</b>.
		</p>
	</div>

	<div id="desktop">
		<h2> width &gt;= 1024  </h2>
		<div>
			A media query has detected a screen width greater than 1024px.  The following BlackBerry devices have this screen dimension:
			<ul>
				<li> <i> None </i> </li>
			</ul>
			You are likely using a Desktop browser.  Resize the browser to see how different media queries apply their styles to this page.
		</div>
	</div>
	
	<div id="playbook">
		<h2> 480px &lt; width &lt;= 1024  </h2>
		<div>
			A media query has detected a screen width between 480px and 1024px.  The following BlackBerry devices have this screen dimension:
			<ul>
				<li> BlackBerry PlayBook </li>
			</ul>
		</div>
	</div>
	
	<div id="screen360x480">
		<h2> width &lt;= 360 and height &lt;= 480 </h2>
		<div>
			A media query has detected a screen width of 360px or less and a screen height of 480px or less.  The following BlackBerry Smartphones have this screen dimension:
			<ul>
				<li> BlackBerry Torch 9800 </li>
			</ul>
		</div>
	</div>
	<div id="screen360x400">
		<h2> width &lt;= 360 and height &lt;= 400 </h2>
		<div>
			A media query has detected a screen width of 360px or less and a screen height of 400px or less.  The following BlackBerry Smartphones have this screen dimension:
			<ul>
				<li> BlackBerry Style 9670 </li>
			</ul>
		</div>
	</div>
	<div id="screen480">
		<h2> width &lt;= 480 </h2>
		<div>
			A media query has detected a screen width of 480px or less.  The following BlackBerry Smartphones have this screen dimension:
			<ul>
				<li> BlackBerry Torch 9800 </li>
				<li> BlackBerry Style 9670 </li>
				<li> BlackBerry Bold 9780 </li>
			</ul>
		</div>
	</div>

	<h3> Links: </h3>
	<ul>
		<li> <a href="http://docs.blackberry.com/en/developers/deliverables/18234/index.jsp?name=CSS+Reference+-+BlackBerr..."> BlackBerry Browser CSS Reference Guide </a> </li>
		<li> <a href="http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry+Browser"> BlackBerry Browser Documentation</a> </li>
		<li> <a href="http://www.w3.org/TR/css3-mediaqueries/"> W3C Media Queries Specification </a> </li>
	</ul>
	<h3> Examples: </h3>	
	<ul>
		<li> <a href="http://www.webdesignerwall.com/tutorials/css3-media-queries/">Web Designer Wall: CSS3 Media Queries</a> </li>
		<li> <a href="http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-...">Smashing Magazine: How To Use CSS Media Queries To Create to Mobile Version of Your Website</a> </li>
	</ul>
	
</body>
</html>

 

/* The following CSS is applied to web content loaded on any screens larger than 1024px wide (e.g. Desktop Browser) */
@media (min-width:1024px) 
{
	#playbook, #screen360x480, #screen480, #screen360x400  { display: none; }
	body {
		font-family: Times New Roman;
	}
	#desktop { 
		display: inline; 
		color: black; 
		border: solid 0.1em black;
	}
}

/* The following CSS is applied to web content loaded on any screens up to 1024 wide (e.g. BlackBerry Playbook) */
@media (min-width:480px) and (max-width:1024px) 
{
	#desktop, #screen360x480, #screen480, #screen360x400  { display: none; }
	body {
		font-family: Calibri;
	}
	#playbook { 
		display: inline; 
		color: purple; 
		border: solid 0.1em purple;
	}
}

/* The following CSS is applied to web content loaded on any screens up to 480 wide (e.g. All current BlackBerry Smartphones) */
@media (max-width:480px) 
{
	#desktop, #playbook, #screen360x480, #screen360x400  { display: none; }
	body {
		font-family: Trebuchet MS;
	}
	#screen480 { 
		display: inline; 
		color: green; 
		border: solid 0.1em green;
	}
}

/* The following CSS is applied to web content loaded on any screens up to 360x480 (e.g. BlackBerry Torch 9800) */
@media (max-width:360px) and (max-height:480px) 
{
	#desktop, #playbook, #screen480, #screen360x400  { display: none; }
	body {
		font-family: Verdana;
	}
	#screen360x480 { 
		display: inline; 
		color: red; 
		border: solid 0.1em red;
	}
}

/* The following CSS is applied to web content loaded on any screens up to 360x400 (e.g. BlackBerry Style 9670) */
@media (max-width:360px) and (max-height:400px) 
{
	#desktop, #playbook, #screen360x480, #screen480  { display: none; }
	body {
		font-family: Arial;
	}
	h1 {
		font-size: 1.5em;
	}
	#screen360x400 { 
		display: inline; 
		color: blue; 
		border: solid 0.1em blue;
	}
}

 

 

Please use plain text.
Contributor
slondell
Posts: 33
Registered: ‎02-23-2011
My Device: PlayBook
My Carrier: Simulator

Re: Screen Orientation

[ Edited ]
Please use plain text.
Contributor
richie-agarwal
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --

Re: Screen Orientation

Thank You, i will try that out.

 

Please use plain text.