How can I activate page indicator and additional features in a TIZEN web app for wearables?

Switching 'data-enable-page-scroll' to true or false triggers different features and disrupts the section positions. Setting it to 'false' enables 'pageindicator' and the page displays perfectly, but 'moreoptions' fails to work. When set to 'true', 'moreoptions' works but not the page indicator, and the entire page shifts downwards significantly on the watch.

When I say 'pageindicator' doesn't work, I mean it doesn't appear at the top of the page. Regarding 'moreoptions' not working, the three dots show up on the right side with proper indentation, but the 'moreoptionsPopupCircle' is not displayed on the screen. Also, there's no animation when tapping the button as if it were just a static element on the screen.

Device: Gear S3 Frontier

Index.html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <title>Wearable UI</title>
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" 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">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="css/style-main.css"/>
</head>
<body>
<div id="application">
    <div id="pageIndicatorPage" class="ui-page" data-enable-page-scroll="true">
        <button type="button" class="ui-more">More Options</button>
        <div id="pageIndicator" class="ui-page-indicator"></div>
        <div id="hsectionchanger" class="ui-content">
            <div>
                <section class="ui-section-active section" style="text-align:center">
                    <header id="main">Main</header>
                    <div id="a" class="positive-left circle-button"></div>
                </section>
                <section class="section" style="text-align:center">
                    <header id="main2">b</header>
                    <div id="b" class="positive-left circle-button"></div>circle-button"></div>
                </section>
            </div>
        </div>

        <!-- Circle Profile -->
        <div id="moreoptionsPopupCircle" class="ui-popup">
            <div id="selector" class="ui-selector">
                <div class="ui-item show-icon" data-title="Show"></div>
                <div class="ui-item human-icon" data-title="Human"></div>
                <div class="ui-item delete-icon" data-title="Delete"></div>
                <div class="ui-item x-icon" data-title="X Icon"></div>
                <div class="ui-item fail-icon" data-title="Fail"></div>
            </div>
        </div>
        <script type="text/javascript" src="moreoptions.js"></script>
    </div>
</div>
<script type="text/javascript" src="/lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script src="js/pageindicator.js"></script>
</body>

moreoptions.js: http://pastebin.com/Ykx1E49v

pageindicator.js: http://pastebin.com/C28V9Jfa

style.css: http://pastebin.com/7pwGqnMz

style-main.css: http://pastebin.com/J1MW8Zyx

htmlcsstizentizen-wearable-sdktizen-web-app

Answer №1

To ensure its functionality, JavaScript code is required.

<body>
    <div id="hsectionchangerPage" class="ui-page" data-enable-page-scroll="false">
        <div id="pageIndicator" class="ui-page-indicator"></div>
        <link rel="stylesheet"  href="css/sectionchanger.css">
        <div class="ui-content content-padding">
                <button type="button" class="ui-more">More Options</button>
        </div>
        <div id="hsectionchanger" class="ui-content">
            <!-- section changer has only one child. -->
            <div>
                <section style="text-align:center" >
                    <h3> LEFT2 PAGE </h3>
                </section>
                <section style="text-align:center">
                    <h3> LEFT1 PAGE </h3>
                </section>
                <section class="ui-section-active" style="text-align:center">
                    <h3> MAIN PAGE </h3>
                </section>
                <section style="text-align:center">
                    <h3> RIGHT1 PAGE </h3>
                </section>
                <section style="text-align:center">
                    <h3> RIGHT2 PAGE </h3>
                </section>
            </div>
        </div>

        <!-- Square Profile -->
    <div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
        <div class="ui-popup-header">Options</div>
        <div class="ui-popup-content">
            <ul class="ui-listview">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </div>
    </div>

    <!-- Circle Profile -->
    <div id="moreoptionsPopupCircle" class="ui-popup">
        <div id="selector" class="ui-selector">
            <div class="ui-item show-icon" data-title="Show"></div>
            <div class="ui-item human-icon" data-title="Human"></div>
            <div class="ui-item delete-icon" data-title="Delete"></div>
            <div class="ui-item show-icon" data-title="Show"></div>
            <div class="ui-item human-icon" data-title="Human"></div>
            <div class="ui-item delete-icon" data-title="Delete"></div>
            <div class="ui-item x-icon" data-title="X Icon"></div>
            <div class="ui-item fail-icon" data-title="Fail"></div>
            <div class="ui-item show-icon" data-title="Show"></div>
            <div class="ui-item human-icon" data-title="Human"></div>
            <div class="ui-item delete-icon" data-title="Delete"></div>
            <div class="ui-item show-icon" data-title="Show"></div>
            <div class="ui-item human-icon" data-title="Human"></div>
            <div class="ui-item delete-icon" data-title="Delete"></div>
            <div class="ui-item x-icon" data-title="X Icon"></div>
            <div class="ui-item fail-icon" data-title="Fail"></div>
            <div class="ui-item show-icon" data-title="Show"></div>
            <div class="ui-item human-icon" data-title="Human"></div>
            <div class="ui-item delete-icon" data-title="Delete"></div>
            <div class="ui-item show-icon" data-title="Show"></div>
            <div class="ui-item human-icon" data-title="Human"></div>
            <div class="ui-item delete-icon" data-title="Delete"></div>
            <div class="ui-item x-icon" data-title="X Icon"></div>
            <div class="ui-item fail-icon" data-title="Fail"></div>
            <div class="ui-item show-icon" data-title="Show"></div>
            <div class="ui-item human-icon" data-title="Human"></div>
            <div class="ui-item delete-icon" data-title="Delete"></div>
            <div class="ui-item show-icon" data-title="Show"></div>
            <div class="ui-item human-icon" data-title="Human"></div>
            <div class="ui-item delete-icon" data-title="Delete"></div>
            <div class="ui-item x-icon" data-title="X Icon"></div>
            <div class="ui-item fail-icon" data-title="Fail"></div>
        </div>
    </div>
    <script src="hsection.js"></script>
    <script type="text/javascript" src="moreoptions.js"></script>
    </div>
<script type="text/javascript" src="../../../lib/tau/wearable/js/tau.min.js"></script>

</body>

hsection.js

(function() {

    var page = document.getElementById( "hsectionchangerPage" ),
        changer = document.getElementById( "hsectionchanger" ),
        sectionLength = document.querySelectorAll("section").length,
        elPageIndicator = document.getElementById("pageIndicator"),
        sectionChanger,
        pageIndicator,
        pageIndicatorHandler;

    /**
     * pagebeforeshow event handler
     * Do preparatory works and adds event listeners
     */
    page.addEventListener( "pagebeforeshow", function() {
        // make PageIndicator
        pageIndicator =  tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sectionLength });
        pageIndicator.setActive(2);
        // make SectionChanger object
        sectionChanger = tau.widget.SectionChanger(changer, {
            circular: false,
            orientation: "horizontal",
            useBouncingEffect: true
        });
    });

    /**
     * pagehide event handler
     * Destroys and removes event listeners
     */
    page.addEventListener( "pagehide", function() {
        // release object
        sectionChanger.destroy();
    });

    /**
     * sectionchange event handler
     */
    pageIndicatorHandler = function (e) {
        pageIndicator.setActive(e.detail.active);
    };

    changer.addEventListener("sectionchange", pageIndicatorHandler, false);

}());

moreoptions.js

/*global tau */
/*jslint unparam: true */
(function(){
    /**
     * page - More option page element
     * popup - More option popup element for rectangular devices
     * handler - Element for opening more option popup
     * popupCircle - More option popup element for circular devices
     * elSelector - Selector element in the circular popup
     * selector - TAU selector instance
     */
    var page = document.querySelector("#hsectionchangerPage"),
        popup = page.querySelector("#moreoptionsPopup"),
        handler = page.querySelector(".ui-more"),
        popupCircle = page.querySelector("#moreoptionsPopupCircle"),
        elSelector = page.querySelector("#selector"),
        selector,
        clickHandlerBound;

    /**
     * Click event handler for opening more option popup
     */
    function clickHandler() {
        if (tau.support.shape.circle) {
            tau.openPopup(popupCircle);
        } else {
            tau.openPopup(popup);
        }
    }

    /**
     * pagebeforeshow event handler
     * Do preparatory works and adds event listeners
     */
    page.addEventListener( "pagebeforeshow", function() {
        var radius = window.innerHeight / 2 * 0.8;

        clickHandlerBound = clickHandler.bind(null);
        handler.addEventListener("click", clickHandlerBound);
        if (tau.support.shape.circle) {
            selector = tau.widget.Selector(elSelector, {itemRadius: radius});
        }
    });

    /**
     * pagebeforehide event handler
     * Destroys and removes event listeners
     */
    page.addEventListener( "pagebeforehide", function() {
        handler.removeEventListener("click", clickHandlerBound);
        if (tau.support.shape.circle) {
            selector.destroy();
        }
    });

    /**
     * When user click the indicator of Selector, drawer will close.
     */
    elSelector.addEventListener("click", function(event) {
        var target = event.target;

        if (tau.support.shape.circle) {
            // 'ui-selector-indicator' is default indicator class name of Selector component
            if (target.classList.contains("ui-selector-indicator")) {
                tau.closePopup(popupCircle);
            }
        }
    });
}());

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Toggling a div overlay through various user interactions such as clicking, pressing a button, or hitting the escape

I've created a simple div overlay that appears when a user clicks inside an input box: HTML <html> <body> <input id="search" type="text" placeholder="Search..."> </body> </html> CSS #overlay { position: fixed; ...

jqueryhtmlcssshow-hide

Replacing a predefined label in Volusion (for language translations)

I am currently working on a project using the Volusion platform, which unfortunately does not provide full interface editing capabilities. As a result, I am attempting to edit certain hardcoded labels in the HTML to display them in Spanish. After trying v ...

htmlcssvolusion

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

javascripthtmlcssarrayslinux

I specialize in optimizing blog content by omitting the final line within a React framework

https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...

javascriptcssreactjsreact-hooks

Unlocking the Power of Combining JMVC and Server-side MVC Models

It's been a few days since I posted this question here and still no response. I also tried posting it on forum.javascriptMVC.com and finally got an answer, but I'm looking for more insights. Here's my question: After reading the documentat ...

javascriptphpajaxhtmljavascriptmvc

What is the best way to make an ajax commenting system function from a separate directory?

I am facing an issue with implementing an ajax commenting system on my website. When I place all the code from the /comment directory directly in the root, everything works fine and the commenting system functions as expected on new pages. However, when I ...

phpjavascriptmysqlhtmlajax

jQuery - accessing a different class within the object

Let me explain the scenario: I have a website that will delve into 4 different subjects. Initially, I have 4 divs each representing the title of those subjects. For instance, <div><p> Physics </p></div> <div><p> Chem ...

javascriptjqueryhtmlcss

You can only import Next.js Global CSS from your Custom <App> and not from any other files

Initially, my React App functioned perfectly with global CSS included. However, after running npm i next-images, adding an image, modifying the next.config.js file, and executing npm run dev, I encountered the following notification: "Global CSS cannot ...

cssreactjsimportsassnext.js

Converting Selenium Webdriver Xpath value to CSS: A Step-by-Step

We are looking to transform the lengthy HTML Xpath values in the existing code into a shorter CSS value: driver.findElement(By.cssSelector(".form button")).click(); ...

javacssseleniumxpathwebdriver

Create a layout using jquery-tokeninput

Currently, my project incorporates jQuery-tokenInput and everything is functioning properly. However, I now have the desire to customize the design of the results that are displayed. For example, I want to adjust the width or make any other design changes. ...

jquerycssjquery-tokeninput

employing document.write() specifically for a designated division

This is the coding: $(document).ready(function(){ var Jstr = { "JSON" : [ { "Eid" : 102,"Ename":"", "Ecode" : "<input type ='text'/>", "Eprops": {"name": "", "value":"", "maxlength":""}} ] } ; $(".search").click(funct ...

javascriptjqueryhtml

The date-picker element cannot be selected by html2canvas

I'm encountering an issue with Html2canvas while trying to capture a screenshot of my page. Specifically, the date shown in the date-picker on the page is not appearing in the screenshot. Do you have any insights into why this might be happening and h ...

javascripthtmljquerycss

Incorporating a new row in JQuery Datatable using an mdata array

I am currently using a datatable that retrieves its data through mData. var processURL="path" $.ajax( { type : "GET", url : processURL, cache : false, dataType : "json", success ...

javascriptjqueryhtmldatatable

Are browser zoom and screen size variations equivalent in terms of impact on display?

I am curious about ensuring my website is responsive on all screen sizes. Is resizing the browser window equivalent to viewing my website on various devices with different screen sizes? I have observed that my webpage appears well on larger screens, but w ...

htmlcssnode.jsangular

URL to section of website without the navigation bar portion

I am trying to solve a problem with creating a link that will take me to a specific part of the page while taking into account the height of the navbar. The issue is that since the navbar is fixed to the top with a solid color, it ends up covering part of ...

htmlcsstwitter-bootstrap

Customizing ExtJS 4's CSS reset specifically for tailored HTML inside components

I am currently in the process of upgrading an existing application from Ext 3.x to 4. I have successfully enabled Ext's scoped reset CSS option to prevent Ext from applying its CSS reset to my entire application. However, I am now facing a new issue. ...

cssextjsextjs4overridingcss-reset

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

csstwitter-bootstrap-3

Passing a parameter from AJAX to PHP

const studentNumber = $('#studno').val(); $(document).ready(function () { $('.go').click(function () { $('.inup').load('prochat.php', { studno: studentNumber }); }); }); I've ...

phpjqueryhtmlajax

What is the best way to wrap the countdown numbers with <span> tags?

I have implemented the following countdown script: var clock = document.getElementById("timeleft"), tdy = new Date(1494979200000); countdown.setLabels( '| <span class="time-label">second</span>| <span class="time-label">minute< ...

javascriptjqueryhtmlcountdownjs.js

Guide on incorporating markdown in an ejs template

As I am planning to create a small blog using Express, EJS, and Markdown, I encountered an issue when trying to load Markdown on the page. Here is what I saw: https://i.sstatic.net/M2FEK.png Here's my code snippet: <!DOCTYPE html> <html la ...

javascripthtmlexpressejsblogs