Scrolling the listview with rotary bezel

Scrolling the listview with rotary bezel

BY 27 Nov 2015 Web Application Development

I am having problems with what seems to be an easy task. I want to scroll an UL list with the rotary bezel. Here is my code:

 


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
	<title>Circular UI</title>
	<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
	<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
</head>
<body>
	<div class="ui-page ui-page-active" id="main">
		<header class="ui-header">
			<h2 class="ui-title">TAU List</h2>
		</header>
		<div class="ui-content">
			<ul id="lv" class="ui-listview">
				<li><a href="#">List1</a></li>
				<li><a href="#">List2</a></li>
				<li><a href="#">List3</a></li>
				<li><a href="#">List4</a></li>
				<li><a href="#">List5</a></li>
				<li><a href="#">List6</a></li>
				<li><a href="#">List7</a></li>
				<li><a href="#">List8</a></li>
				<li><a href="#">List9</a></li>
				<li><a href="#">List10</a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
	<script src="app.js"></script>
</body>
</html>

app.js

( function () {
		
	document.addEventListener("rotarydetent", function(event) {
		
		if (event.detail.direction === "CW") {
			
			console.log("CW");
			document.getElementById('lv').scrollTop += 25;
			
		} else if (event.detail.direction === "CCW") {
			
			console.log("CCW");
			document.getElementById('lv').scrollTop -= 25;

		}
	}, false);
} () );

 

This does not work. Events get triggered, but the list doesn’t move. Changing the scrollTop property has no effect.

Could anybody help me? You can try reproducing this issue quickly by pasting the code in a sample project.

 

Thank you,

Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More