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
smartek
Posts: 281
Registered: ‎05-31-2012
My Device: Playbook
Accepted Solution

possible to make a app not scrollable?

hi, i really like the feature to use html5 to make quite native apps.

but problem which i have actually is the srolling in apps.

 

is it possible to disable the scrolling?

while it is possible to scroll in my apps, they look and feel is very very bad.

Plase "+Like" my post if it was helpful.
Developer
ignites
Posts: 466
Registered: ‎04-11-2012
My Device: Bold 9900

Re: possible to make a app not scrollable?

yup change it in the css : )

 

if u post code we can help

 

 


Developer for easyDial for BlackBerry Bold & inLink for BlackBerry PlayBook
Find me online via twitter, or on the techfruits.com webpage. Please hit the like button below if what I said helped!
Developer
smartek
Posts: 281
Registered: ‎05-31-2012
My Device: Playbook

Re: possible to make a app not scrollable?

here is my code, index.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html> 
	<head>
		<meta name="x-blackberry-defaultHoverEffect" content="false" />
		<link  rel="stylesheet" type="text/css" href="bbui-0.9.4.css"><link />
		<script type="text/javascript" src="bbui-0.9.4.js"></script>
		<script type="text/javascript" src="js/webworks-1.0.2.9.js"></script>
        <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
		<script type="text/javascript">
			document.addEventListener('webworksready', function(e) {			
				bb.init({actionBarDark: true,
						controlsDark: true,
						listsDark: false,
						bb10ForPlayBook: false});
				bb.pushScreen('home.htm', 'home');
			}, false);
		</script>
	</head>
	<body>
	</body>
</html>

 and the home.htm:

<div data-bb-type="screen" data-bb-effect="fade">  
    <div data-bb-type="button" onclick="bb.pushScreen('btns.htm', 'btns');" id="plain">Plain</div>
    <div data-bb-type="button" id="Div1">jQuery btn</div>
</div>

 

Plase "+Like" my post if it was helpful.
Developer
ignites
Posts: 466
Registered: ‎04-11-2012
My Device: Bold 9900

Re: possible to make a app not scrollable?

add to css file or somewhere

 

div 
{
width:150px; // or whatever height you want
height:150px; // or whatever width you want
overflow:hidden; //cuts off anything outside of the div
}

 

You maay want to name this a seperate class or just slip it into that div tag within the html (since it is already classed within the BBUI class. Let me know if you need further explanation 

 

Source/more info http://www.w3schools.com/cssref/pr_pos_overflow.asp


Developer for easyDial for BlackBerry Bold & inLink for BlackBerry PlayBook
Find me online via twitter, or on the techfruits.com webpage. Please hit the like button below if what I said helped!
BlackBerry Development Advisor
anzor_b
Posts: 165
Registered: ‎09-24-2012
My Device: Passport

Re: possible to make a app not scrollable?

Hello smartek,

 

There seems to be some confusion around the topic, so I'd like to clarify as this will help you and others.

 

A Web Application should not scale or scroll. Only lists, and other overflow data should scroll. This provides a good user experience.

 

First off, you need to include a meta tag, to specify scaling options for your viewport. Insert the following in your <head>:

 

<meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no, maximum-scale=1.0" />

The tag above disables zooming.

 

Next, you need to ensure that your top level container spans accross the whole visible screen. This is accomplished by the following:

 

index.html:

<body>
   <section id="App">

   </section>
</body>

 

CSS:

#App{
   position:fixed;
   top:0px;
   bottom:0px;
   width:100%;
}

 

You need to decide how to handle overflow content. The typical UI layout is header, content and footer. Each have a fixed position. The content section will usually have overflowing elements, such as a lists, grids, etc. We therefore need to handle overflow properly. The following will allow the user to scroll the contents, and adds smooth native interita overflow scrolling, with bounces when element reaches top and bottom:

 

section.content{
   position:fixed;
width:100%; top:100px; /* because the header is 100px high */ bottom:100px; /* let's say the footer is also 100px */ overflow: scroll /* standard overflow propery */ -webkit-overflow-scrolling: -blackberry-touch; /* this allows for inertia scrolling */ }

 

 

 

BlackBerry Development Advisor
anzor_b
Posts: 165
Registered: ‎09-24-2012
My Device: Passport

Re: possible to make a app not scrollable?

Also, forgot  to add that targetdensity meta viewport property has been depreciated in WebKit. This means that if you are using a meta viewport tag, all content will scale to standard dpi (which is 160, regardless whether the content is viewed on a low dpi device such as the PlayBook or hi dpi such the Dev Alpha).

 

This, however is not optimal, as images will scale up and look distorted. Therefore we can tell the viewport to maintain a 1:1 device pixel to css pixel ratio. You will then be working with 1280x768 pixels on a Dev Alpha, and need to have a separate stylesheet for hi-dpi and low-dpi. This is achieved by inserting the following in the place of the meta tag:

 

<head>
    <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>
</head>

  This ensures content does not zoom plus provides a target density of 1:1, so you design specifically for the screen density of the device you are targetting. I am in the process of writing a KB article on viewports and all this information will be included and available to the public.