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
Pumano-
Posts: 215
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: Strange scrolling issue

Just 15 div elements with 100% screen width and title in each item like list items and onmouseover event for focus based navigation from blackberry api example (OS 6 and 7 problem, I don't test on 5 OS) problem using trackpad. Usually in native app scrolling have fast response and smooth, but in browser its very slow. If you can fix that, I think many devs roll out their apps too.
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,546
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Strange scrolling issue

Hi there,

 

Based on the information, I created this sample application.

 

config.xml

 

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0.0">

	<name>Focus Navigation</name>
	<content src="index.html"/>

	<rim:navigation mode="focus" />

	<feature id="blackberry.ui.dialog" />
</widget>

index.html

 

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			div {
				width: 100%;
			}

			.focus {
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="title" x-blackberry-focusable="true">Div One</div>
		<div class="title" x-blackberry-focusable="true">Div Two</div>
		<div class="title" x-blackberry-focusable="true">Div Three</div>
		<div class="title" x-blackberry-focusable="true">Div Four</div>
		<div class="title" x-blackberry-focusable="true">Div Five</div>
		<div class="title" x-blackberry-focusable="true">Div Six</div>
		<div class="title" x-blackberry-focusable="true">Div Seven</div>
		<div class="title" x-blackberry-focusable="true">Div Eight</div>
		<div class="title" x-blackberry-focusable="true">Div Nine</div>
		<div class="title" x-blackberry-focusable="true">Div Ten</div>
		<div class="title" x-blackberry-focusable="true">Div Eleven</div>
		<div class="title" x-blackberry-focusable="true">Div Twelve</div>
		<div class="title" x-blackberry-focusable="true">Div Thirteen</div>
		<div class="title" x-blackberry-focusable="true">Div Fourteen</div>
		<div class="title" x-blackberry-focusable="true">Div Fifteen</div>
		
		<script type="text/javascript">
			/*global window, document, console */

			/**
			 * The following section is from:
			 * http://www.avoid.org/?p=78
			 *
			 * Re-formatted to appease JSLint.
			 */
			function hasClass(el, name) {
				"use strict";
				return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
			}
			function addClass(el, name) {
				"use strict";
				if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') + name; }
			}
			function removeClass(el, name) {
				"use strict";
				if (hasClass(el, name)) {
					el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
				}
			}
			/** ********** */

			function ready() {
				"use strict";
				var divs, index;
				try {
					window.removeEventListener("DOMContentLoaded", ready, false);

					divs = document.querySelectorAll(".title");
					console.log("Items: " + divs.length);

					for (index = 0; index < divs.length; ++index) {
						divs[index].onmouseover = function () {
							addClass(this, "focus");
						};
						divs[index].onmouseout = function () {
							removeClass(this, "focus");
						};
					}
				} catch (err) {
					console.log("ready: " + err);
				}
			}
			window.addEventListener("DOMContentLoaded", ready, false);
		</script>
	</body>
</html>

 

I loaded this onto my test device; there was a slight delay ~3 seconds at the start while everything was loading, but once the app got going I did not see performance issues myself. Is there anything specific that I am missing in this sample?


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.
Please use plain text.
Developer
Pumano-
Posts: 215
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: Strange scrolling issue

I try that tomorrow and tell result.
Please use plain text.
Developer
Pumano-
Posts: 215
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: Strange scrolling issue

Erik I test your solution, working like smooth, but if you add font-size: 20px; add height: 65px to divs and add background gradients + hover gradients in focus class you receive a bad perfomance navigation
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,546
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Strange scrolling issue

Hello Pumano,

 

Can you please give an example of the background and hover gradients you're setting for the focus class with CSS?


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.
Please use plain text.