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
Trusted Contributor
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900
My Carrier: AT&T
Accepted Solution

Index help

Below is the index im using for my app. The only problem I am getting with it is that the actionBar acts up when I launch it.

 

You open the app the actionBar is disformated, but if you pull up the keyboard it looks fine.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html> 
	<head>
		<meta name="x-blackberry-defaultHoverEffect" content="false" />
		
			<link href="style.css" rel="stylesheet">
			<link href="css/bbui-0.9.5.css" rel="stylesheet">
		
		<script type="text/javascript" src="js/bbui-0.9.5.js"></script>
		<script type="text/javascript" src="js/webworks-1.0.2.9.js"></script>
		<script type="text/javascript" src="js/bbm.js"></script>
		<script type="text/javascript" src="js/openbrowser.js"></script>
		



<script type="text/javascript">

window.addEventListener('load' , function (e){
	
		document.addEventListener('webworksready' , function (e){
		bb.init({onscreenready : function(element, id, params) {
                         if (id == 'agreement') {                            
                        } 
                     },
					 
					 
         ondomready: function(element, id, params) {
                         if (id == 'agreement') {
				_bbm.register();
                        } 
						
                     }});
	
		bb.pushScreen('agreement.html', 'agreement');

		}, false);
	}, false);
	</script>
</body>
</html>

Here is a picture of what it looks like when I launch 

IMG_00000072.png

 

and 

 

IMG_00000073.png

 

Now here is a shot of what it looks like when I pull up the keyboard

 

IMG_00000074.png

 

Now this shot is what it SHOULD look like at all times... but it looks like this after I pull down the keyboard.

 

IMG_00000075.png

 

What is causing this?

Is my index not calling the webworks file? 

Help?

 

Thank you in advance!

 

Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Index help

Hi Sergio,

Just to confirm, I'm not seeing the closing </head> element or the opening <body> element. It seems that the majority of the content is between <head></body> tags, is that how the application actually is in your code?

Also, not sure this would make a difference, but the HTML5 DOCTYPE standard has now become:
<!DOCTYPE html>

Though that is more of an indicator to the browser and I don't think it would affect the visuals like you're seeing.

Without using the <meta> viewport tag, you should get a proper 1:1 rendering, but everything does appear to be zoomed in regardless. Could you try the &lt;script&gt; approach to the viewport tag as outlined here?
http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...

Finally, I noticed that the application appears to be in landscape mode, do you see the same issues in portrait mode?

Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Trusted Contributor
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900
My Carrier: AT&T

Re: Index help

Erik,

 

I changed the <!DOCTYPE html> and all the </body></head> tags. I also added <meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no, maximum-scale=1.0" /> but its super zoomed in now.

 

My app is supposed to be inlandscape mode

 

 

 

refreshed index

 

<!DOCTYPE html>
<html> 
	<head>
		<meta name="x-blackberry-defaultHoverEffect" content="false" />

			<link href="style.css" rel="stylesheet">
			<link href="css/bbui-0.9.5.css" rel="stylesheet">
		
		<script type="text/javascript" src="js/bbui-0.9.5.js"></script>
		<script type="text/javascript" src="js/webworks-1.0.2.9.js"></script>
		<script type="text/javascript" src="js/bbm.js"></script>
		<script type="text/javascript" src="js/openbrowser.js"></script>



<script type="text/javascript">

window.addEventListener('load' , function (e){
	
		document.addEventListener('webworksready' , function (e){
		bb.init({onscreenready : function(element, id, params) {
                         if (id == 'agreement') {
                             
                        } 
                     },
					 
					 
         ondomready: function(element, id, params) {
                         if (id == 'agreement') {
						_bbm.register();
                        } 
						
                     }});
	
		bb.pushScreen('agreement.html', 'agreement');

		}, false);
	}, false);
	</script>
<body>
</body>
</head>
</html>

 

 

Trusted Contributor
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900
My Carrier: AT&T

Re: Index help

Using the script worked! Thanks Erik!!

 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...

 

  <script>
	var meta = document.createElement("meta");
	meta.setAttribute('name','viewport');
	meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
	document.getElementsByTagName('head')[0].appendChild(meta);
   </script>