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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


Reply
Highlighted
New Contributor
Posts: 2
Registered: ‎07-31-2012
My Device: Torch 9800
My Carrier: Axis Indonesia
Accepted Solution

BB10 position:fixed and top:0 for floating div problem

[ Edited ]

Hi guys,

 

I've been using css property "position:fixed;top:0" for my floating Main Menu div on my webworks app.

This css property works well for BlackBerry OS.7 and a bit laggy in OS.6. 

But when i try using the same css property on BB10 Dev Alpha or in Ripple Emulator for BB10, my Main Menu div is not floating and gets scrolled along with all contents on the screen. Anyone get the same problem?

Is there any other technique should I use to get my Main Menu div stays on top of the screen?

Thanks in advance.

 

Regard,

RIzal

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

Re: BB10 position:fixed and top:0 for floating div problem

Hello Rizal,

 

I created the following sample and it seems to be working fine in Ripple (BlackBerry 10 Platform.)

 

Could you please give this a shot to see if the <div> stays fixed? Please note that you will need to place webworks-1.0.1.6.js into the same folder as index.html. (Should be available with your BlackBerry 10 SDK.) I did not use a config.xml in my test as I strictly went through Ripple.

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<title>FixedDiv</title>
		
		<style type="text/css">
			#fixedDiv {
				position: fixed;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="fixedDiv">This should stay fixed. </div>
		<div>Line 1</div>
		<div>Line 2</div>
		<div>Line 3</div>
		<div>Line 4</div>
		<div>Line 5</div>
		<div>Line 6</div>
		<div>Line 7</div>
		<div>Line 8</div>
		<div>Line 9</div>
		<div>Line 10</div>
		<div>Line 11</div>
		<div>Line 12</div>
		<div>Line 13</div>
		<div>Line 14</div>
		<div>Line 15</div>
		<div>Line 16</div>
		<div>Line 17</div>
		<div>Line 18</div>
		<div>Line 19</div>
		<div>Line 20</div>
		<div>Line 21</div>
		<div>Line 22</div>
		<div>Line 23</div>
		<div>Line 24</div>
		<div>Line 25</div>
		<div>Line 26</div>
		<div>Line 27</div>
		<div>Line 28</div>
		<div>Line 29</div>
		<div>Line 30</div>
		<div>Line 31</div>
		<div>Line 32</div>
		<div>Line 33</div>
		<div>Line 34</div>
		<div>Line 35</div>
		<div>Line 36</div>
		<div>Line 37</div>
		<div>Line 38</div>
		<div>Line 39</div>
		<div>Line 40</div>
		<div>Line 41</div>
		<div>Line 42</div>
		<div>Line 43</div>
		<div>Line 44</div>
		<div>Line 45</div>
		<div>Line 46</div>
		<div>Line 47</div>
		<div>Line 48</div>
		<div>Line 49</div>
		<script src="webworks-1.0.1.6.js"></script>
		<script>
			/*global window, document, console */

			'use strict';

			function wwready() {
				window.removeEventListener('webworksready', wwready, false);
			}

			function ready() {
				try {
					window.removeEventListener('DOMContentLoaded', ready, false);
					window.addEventListener('webworksready', wwready, false);
				} catch (err) {
					console.log('ready: ' + err);
				}
			}

			window.addEventListener('DOMContentLoaded', ready, false);
		</script>
	</body>
</html>

 


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.
New Contributor
Posts: 2
Registered: ‎07-31-2012
My Device: Torch 9800
My Carrier: Axis Indonesia

Re: BB10 position:fixed and top:0 for floating div problem

Hi Erik,

 

Thanks for your quick reply.

I finally can make my floating menu stays on top now.

Maybe this is my fault for not including 

<script>
			/*global window, document, console */

			'use strict';

			function wwready() {
				window.removeEventListener('webworksready', wwready, false);
			}

			function ready() {
				try {
					window.removeEventListener('DOMContentLoaded', ready, false);
					window.addEventListener('webworksready', wwready, false);
				} catch (err) {
					console.log('ready: ' + err);
				}
			}

			window.addEventListener('DOMContentLoaded', ready, false);
		</script>

 

because I didn't think that part was important.

 

Btw, by implementing your script above, it solved not only the floating div but also solved unresponsive touch on my BB10 app Smiley Happy

 

Thank you again Erik,