I am looking for a sample code for Tizen that allows scrolling of a <div> element using the bezel

Question

I am looking for a sample code for Tizen that allows scrolling of a <div> element using the bezel

Seeking a functional web application in Tizen that can scroll a div using the rotating bezel mechanism.

I have dedicated several hours to getting it to work without success. I keep revisiting the same resources for the past three days:

View Link 1 View Link 2

Despite my efforts, the solution seems elusive. While I managed to adjust text on another template app by rotating the bezel on my Gear S3, scrolling remains a challenge. It appears that my struggle lies in selecting the correct DOM elements or configuring event listeners for the scroller feature.

Referencing the provided links, here is an example code snippet that showcases my attempt:

// JavaScript code goes here

// CSS styles go here

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Description here"/>

    <title>Title Here</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
</head>

<body>


<div class="ui-page ui-page-active" id="main">
   <header class="ui-header">
      <h2 class="ui-title">Header Title</h2>
   </header>
   <div class="ui-content">
       // Content goes here
   </div>
   <!--Popup-->
   <div id="popup" class="ui-popup">
      <div class="ui-popup-content">
         // Popup content here
      </div>
      <div class="ui-popup-footer ui-bottom-button">
         <a id="btnPopup-cancel" href="#" class="ui-btn" data-rel="back">Cancel</a>
      </div>
   </div>
</div>


</body>
</html>

javascript rotation tizen

Answer 1

Answer №1

Your code is not functioning properly due to the event listener for "pagebeforeshow" being added too late.

Instead of this:

window.onload = function () {
 ...
};

try:

window.addEventListener("DOMContentLoaded", function () {
 ...
});

Also, ensure that your main.js file is placed above the TAU library.

    <link href="tau/wearable/theme/default/tau.css" rel="stylesheet" />
    <link href="tau/wearable/theme/default/tau.circle.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="css/style.circle.css" rel="stylesheet" />
    <script src="js/main.js"></script>
    <script src="tau/wearable/js/tau.js"></script>
</head>

If you encounter any issues, please consider creating an issue in our project on Github (https://github.com/Samsung/TAU) for further improvement.

Answer 2

Your code is not functioning properly due to the event listener for "pagebeforeshow" being added too late.

Instead of this:

window.onload = function () {
 ...
};

try:

window.addEventListener("DOMContentLoaded", function () {
 ...
});

Also, ensure that your main.js file is placed above the TAU library.

    <link href="tau/wearable/theme/default/tau.css" rel="stylesheet" />
    <link href="tau/wearable/theme/default/tau.circle.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="css/style.circle.css" rel="stylesheet" />
    <script src="js/main.js"></script>
    <script src="tau/wearable/js/tau.js"></script>
</head>

If you encounter any issues, please consider creating an issue in our project on Github (https://github.com/Samsung/TAU) for further improvement.

Answer 3

Answer №2

Appreciate the help! Although I couldn't make it work in this way (maybe there were other issues), I did find a different solution that worked for me:

(function() {

var page = document.getElementById('main');  // <div id="main" class="container">

document.getElementById('main').setAttribute('tizen-circular-scrollbar', '');

function rotaryDetentHandler (e) {
    var direction = e.detail.direction;

if (direction === "CW") {
page.scrollTop += 50;
} 
else if (direction === "CCW") {
page.scrollTop -= 50;
}

}

document.addEventListener('rotarydetent', rotaryDetentHandler);
//add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
    if (e.keyName === "back") {
        try {
            tizen.application.getCurrentApplication().exit();
        } catch (ignore) {
        }
    }
});


}());

html,
body {
    width: 360px;
    height: 360px;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.container {
    background-color: #000;
    color: #fff;
    height: 100%;
    width: 100%;
    text-align: center;
    overflow-y: auto;
}

#news-view {
    background-color: #fff;
    color: #000;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Wearable basic template generated by Samsung Wearable Web IDE"/>

    <title>Tizen Wearable Web IDE - Tizen Wearable - Tizen Wearable basic Application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
</head>

<body>



<div id="main" class="container">

      
    <p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>        
            
</div>


</body>
<script src="js/main.js"></script>

</html>

Answer 4

Appreciate the help! Although I couldn't make it work in this way (maybe there were other issues), I did find a different solution that worked for me:

(function() {

var page = document.getElementById('main');  // <div id="main" class="container">

document.getElementById('main').setAttribute('tizen-circular-scrollbar', '');

function rotaryDetentHandler (e) {
    var direction = e.detail.direction;

if (direction === "CW") {
page.scrollTop += 50;
} 
else if (direction === "CCW") {
page.scrollTop -= 50;
}

}

document.addEventListener('rotarydetent', rotaryDetentHandler);
//add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
    if (e.keyName === "back") {
        try {
            tizen.application.getCurrentApplication().exit();
        } catch (ignore) {
        }
    }
});


}());

html,
body {
    width: 360px;
    height: 360px;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.container {
    background-color: #000;
    color: #fff;
    height: 100%;
    width: 100%;
    text-align: center;
    overflow-y: auto;
}

#news-view {
    background-color: #fff;
    color: #000;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Wearable basic template generated by Samsung Wearable Web IDE"/>

    <title>Tizen Wearable Web IDE - Tizen Wearable - Tizen Wearable basic Application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
</head>

<body>



<div id="main" class="container">

      
    <p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>        
            
</div>


</body>
<script src="js/main.js"></script>

</html>

Answer 5

Answer №3

Previously, you utilized events like "pagebeforeshow", "popup show", and "popup hide" in your first example. These events are tailored for the TAU framework and JQueryMobile, leading me to believe that you were implementing TAU in your application. This could explain why the initial solution did not yield the desired outcome.

In contrast, your most recent solution focuses on simply scrolling content within a web application without incorporating the TAU library.

Answer 6

Previously, you utilized events like "pagebeforeshow", "popup show", and "popup hide" in your first example. These events are tailored for the TAU framework and JQueryMobile, leading me to believe that you were implementing TAU in your application. This could explain why the initial solution did not yield the desired outcome.

In contrast, your most recent solution focuses on simply scrolling content within a web application without incorporating the TAU library.

I am looking for a sample code for Tizen that allows scrolling of a <div> element using the bezel

Answer №1

Answer №2

Answer №3

Similar questions

What steps can I take to modify the class of a button once it has been clicked using JQuery?

To access a restricted selection of images stored in Firebase

Initiate requests to external servers from a NodeJS backend

A Step-by-Step Guide to Setting Up and Utilizing V-Calendar in Vue.js

Utilizing JSX within this.state results in it being displayed as plain text when rendered

Show react-card-flip children conditionally based on a button, otherwise display one frontside and two backsides

ESLint refuses to be turned off for a particular file

Vue project encounters disappeared DOM element

Using Vue.js to Authenticate Users with JWT Tokens Sent in Registration Emails

Ways to expand the `Array.prototype` from an external library in a Node.js environment

A guide on using jQuery-Tabledit and Laravel to efficiently update table rows

What is the process for importing the required dependencies for the maps module in react-svg-map?

Create a time of 00:19:59 using JavaScript

Is it recommended to create model classes in React components?

Adjusting the color of a cell based on its value

How do I retrieve the download URL for the file created using Python in my Heroku App?

Creating a flexible route path with additional query parameters

Creating a private variable in Javascript is possible by using getter and setter functions to manage access to the

Verify if a certain value exists in an array while using ng-if inside ng-repeat

What are the consequences of submitting a form to a different website through POST method?