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,