I want the background of the div changed where the button is in. Now it changes all at same time and I know why, but I don't know how I can make them work on their own.
When I press the "yes" button in server1, I want the background color of server 1 to be red and when I press the button again, it has to be the original color again. I don't mind if the script is totally different, but I would like to keep the HTML.
// var white = false
// var bgcolor;
// $("button ,yes").click(function () {
// if (white = !white) {
// bgcolor = $(this).css('backgroundColor');
// $(this).css("background-color", "red");
// } else {
// $(this).css("background-color", bgcolor);
// }
// });
var green = false
function toggleStatus()
{
if (green = !green)
{
$("#maindiv .serverstatus ").each(function ()
{
$(this).css("background-color", "red");
});
}
else
{
$("#maindiv .serverstatus").each(function ()
{
$(this).css("background-color", "#639919");
});
}
};
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<h3>(servername1)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus()">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<h3>(servername2)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus()">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<h3>(servername3)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus()">yes</button>
</div>
</div>
</div>
</body>
</html>
I updated your code with below steps (only changed your code to become working with solution, didnt do the cleanup and refactoring):
toggleStatus function is now accepting server_name and color_name
two parameters
toggleStatus function definition updated to change
the background color for passed server_name
Steps done to change it back on clicking again (based on feedback in comment):
create three css classes with name of your colors to give background
color of same name
update toggleStatus function to toggle the css class of color_name
// var white = false
// var bgcolor;
// $("button ,yes").click(function () {
// if (white = !white) {
// bgcolor = $(this).css('backgroundColor');
// $(this).css("background-color", "red");
// } else {
// $(this).css("background-color", bgcolor);
// }
// });
var green = false
function toggleStatus(server_name,color_name)
{
//$('#'+server_name).css("background-color", color_name);
$('#'+server_name).toggleClass(color_name);
};
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Grafiek</title>
<style>
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
</style>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<h3>(servername1)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus('server1','red')">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<h3>(servername2)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus('server2','green')">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<h3>(servername3)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus('server3','blue')">yes</button>
</div>
</div>
</div>
</body>
</html>
I tried keeping things as close to original as possible. I've also removed any JQuery code so unless you need it elsewhere you can remove that reference to trim the page a bit.
I've replaced toggleStatus() with toggleStatus(this) so it passes the element (a button in this case) so it can be referenced in the function.
Since your HTML structure is laid out this way:
<div id="server1" class="serverstatus"> <!-- This would be the button's parentNode.parentNode -->
<h3>(servername1)</h3>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
Going up the parent/child tree twice will grab the server# div. That is what is compared in the if/else statement inside the following JavaScript:
function toggleStatus(e)
{
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if(bgColor == "green"){
parentDiv.style.backgroundColor = "red";
}
else{
parentDiv.style.backgroundColor = "green";
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<h3>(servername1)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<h3>(servername2)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<h3>(servername3)</h3>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
Well I am not sure if I should be doing your homework, but here is a (not optimal) solution. I would change you HTML too, but I leave that up to you.
This will set all to green and the clicked one to red. There are more elegant solutions
function toggleStatus(e) {
$("#maindiv .serverstatus").each(function ()
{
$(this).css("background-color", "#639919");
});
$(e).parent().parent().css("background-color", "#ff0000");
};
Related
I am making a note-taking app and I want 2 text areas to when you type in one the other changes to
what you are doing in one. I want so when I change the title of the page it will change in other places on the page. I'll provide my current code what my page looks like (I want the change to be with my Unititled and an area next to the dropdown arrow) and what I want it to do, I've tried change and input events and I can't seem to figure it out.[My Current Site][1]
What I Want - https://share.vidyard.com/watch/Wj6uTmEiB9LR8iiZy7sVf9
[1]: https://i.stack.imgur.com/3vzEB.png
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Study App</title>
<link rel="stylesheet" href="study.css" />
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-
8"></script>
</head>
<body>
<script src="study.js"></script>
<div class="dropdown">
<nav><label for="touch"><span>Settings</span></label>
<input type="checkbox" id="touch" />
<ul class="slide">
<li><a>
<div class="dark"><button onclick="myFunction()">
<input class="toggle" type="checkbox" /></button></div>
</a></li>
<li></li>
</ul>
</nav>
</div>
</div>
<div class="arrowdown">
<input type="checkbox" id="myCheckbox" onchange="rotateElem()" checked><i class="fas fa-angle-
right dropdown"></i></button>
<div class="pages">
Add Page
</div>
</div>
</div>
<script type="text/javascript">
var checkBox = document.getElementById("myCheckbox");
function rotateElem() {
if (checkBox.checked == false) {
document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(90deg)';
} else {
document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(0deg)';
}
}
</script>
<div class="tabs"></div>
<div class="sidebar">
<div class="sidebar-top">
<h1><span class="study">Study</span><span class="app">App</span></h1>
</div>
<div class="title">
<textarea id="shortInput" spellcheck="true" placeholder="Untitled" cols="30" rows="1">
</textarea>
</div>
<div class="textbox">
<textarea id="longInput" spellcheck="true" placeholder="Start typing..." cols="30" rows="10"></textarea>
</div>
<script type="text/javascript">
$('.pages').hide();
$(document).ready(function() {
$('input').click(function() {
$('.pages').slideToggle();
});
});
</script>
<script src="study.js"></script>
</body>
</html>
One possible approach would be to store the synchronised value in a variable, and add event listeners to each element for any changes. Then update the value of each element with the new value when the change occurs.
// Store the synchronised content
let value = ''
// Add change listeners to each element
const elements = document.querySelectorAll('.synced')
for (let i = 0; i < elements.length; i++) {
// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements[i].addEventListener('change', handleChange)
elements[i].addEventListener('input', handleChange)
elements[i].addEventListener('keyup', handleChange)
}
// When a change occurs, set the value of all the synchronised elements
function handleChange(e) {
value = e.target.value
for (let i = 0; i < elements.length; i++) {
elements[i].value = value
}
}
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
jQuery version:
// Store the synchronised content
let value = ''
// Get all the of the relevant elements
const elements = $('.synced')
// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements.on('change input keyup', function() {
value = $(this).val()
elements.val(value)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
I have two on-click functions, which are leveraged by the addFields and addSites functions to pull in two different variables and populate them to their respective dynamically generated html containers. addFields is supposed to populate "container1" and addSites is supposed to populate "container2". For some reason though, only one of the containers is ever populated, the bottom one (container2).
I have a hunch that this is because the onClick function only invokes one of the data retrieval functions where I would need it to do both in order to populate both containers(Both containers should be populated with their respective data simultaneously). Nevertheless I am unsure of how to fix it, and I don't understand why it would only populate container2...
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:16px;font-style:regular;" class="light">
<b>BigQuery Function</b></p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Select from the library of popular BigQuery functions to add a sheet or update one that you've already added.</p>
</div>
<div class="row">
</div>
<div class="container">
<hr>
<div class="row">
<input href="#" class="btn blue rounded" id="runQuery" type="button" value=" Get Customer Accounts " />
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Selects all accounts and adds them to a sheet called <b>'All Accounts'</b>.</p>
<div id="container1"></div>
</div>
<hr>
<div class="row">
<input href="#" class="btn blue rounded" id="runQuerySites" type="button" value=" Get Sites " />
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Selects all Sites and adds them to a sheet called <b>'All Sites'</b>.</p>
<div id="container2"></div>
</div>
</div>
</div>
<div id="container"></div>
<div class="row">
<hr>
</div>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: light-grey;
color: light-grey;
text-align: center;
}
</style>
<div class="footer">
<input href="#" class="btn grey small rounded" id="showSidebarIntro" type="button" value="Return to Intro" />
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript'>
var g_fieldNames;
var g_siteNames;
console.log('calling get variables....');
getFieldNames();
getSiteNames();
function addFields(fieldNames) {
console.log('addFields is running');
// Container <div> where dynamic content will be placed
var container = document.getElementById("container1");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
// Append a node with a random text
container.appendChild(document.createTextNode("Last update: " + fieldNames));
// Create an <input> element, set its type and name attributes
// Append a line break
container.appendChild(document.createElement("br"));
//add to global for other uses
g_fieldNames = fieldNames;
}
function addSites(siteNames) {
console.log('addFields is running');
// Container <div> where dynamic content will be placed
var container = document.getElementById("container2");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
// Append a node with a random text
container.appendChild(document.createTextNode("Last update: " + siteNames));
// Create an <input> element, set its type and name attributes
// Append a line break
container.appendChild(document.createElement("br"));
//add to global for other uses
g_siteNames = siteNames;
}
document.getElementById('runQuery').addEventListener('click', function () {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.runQuery();
});
document.getElementById('runQuerySites').addEventListener('click', function () {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.runQuerySites();
});
document.getElementById('showSidebarIntro').addEventListener('click', function () {
google.script.run
.showSidebarIntro();
});
function getFieldNames() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.BQaccountsUpdate();
console.log('getVariables1 ran!');
}
function getSiteNames() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.BQsitesUpdate();
console.log('getVariables2 ran!');
}
function onSuccess(fieldNames_fromDoc) {
console.log('onSuccess ran!');
addFields(fieldNames_fromDoc);
}
function onSuccess(siteNames_fromDoc) {
console.log('onSuccess ran!');
addSites(siteNames_fromDoc);
}
function onFailure(){
console.log('Failure is just an oppertunity for growth!');
}
</script>
</html>
You've got a duplicate function name, and second is overwriting the first:
function onSuccess(fieldNames_fromDoc) {
console.log('onSuccess ran!');
addFields(fieldNames_fromDoc);
}
function onSuccess(siteNames_fromDoc) {
console.log('onSuccess ran!');
addSites(siteNames_fromDoc);
}
The first definition is never saved. You could simply rename the second function, then make sure you invoke it where you want to, ie .withSuccessHandler(onSuccessNewName) or whatever.
The variable status is set to "uncheck" and needs to be updated to "done" using the change() function.
Ultimately what needs to happen When button with id randomIdTwo is pressed, The completeTodo() function is called which causes the list item to be removed from its current div "list", appended to the div "complete-list", and the change() function updates the value of the "status" variable from "uncheck" to "done".
Everything works except the change() function.
document.getElementById('button').addEventListener('click', function addTodo() {
var value = document.getElementById('input').value;
var status = "uncheck";
var randomId = Math.random();
var randomIdTwo = Math.random();
function change() {
status = "done";
};
const item = `<li>
<div class="item">
<div class="complete">
<button id="` + randomIdTwo + `" class="${status}"></button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId + `" class="todo"></button>
</div>
</div>
</li>`;
const position = "beforeend";
list.insertAdjacentHTML(position, item);
document.getElementById(randomId).addEventListener('click', function removeTodo() {
var item = this.closest('li');
item.remove();
});
document.getElementById(randomIdTwo).addEventListener('click', function completeTodo() {
var item = this.closest('li');
item.remove();
document.getElementById("completelist").appendChild(item);
change();
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<div id="datetime"></div>
<div id="ampm"></div>
<input type="text" id="input" placeholder="Add an item" />
<button id="button" type="button"><img src="./img/additem4.png"></button>
</header>
<div id="list">
</div>
<div id="divline"></div>
<div id="completelist">
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
Changing the status variable doesn't change the class of the element. You need to update the button's classList
document.getElementById('button').addEventListener('click', function addTodo() {
var value = document.getElementById('input').value;
var status = "uncheck";
var randomId = Math.random();
var randomIdTwo = Math.random();
function change(button) {
button.classList.add("done");
button.classList.remove("uncheck");
};
const item = `<li>
<div class="item">
<div class="complete">
<button id="` + randomIdTwo + `" class="${status}"></button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId + `" class="todo"></button>
</div>
</div>
</li>`;
const position = "beforeend";
list.insertAdjacentHTML(position, item);
document.getElementById(randomId).addEventListener('click', function removeTodo() {
var item = this.closest('li');
item.remove();
});
document.getElementById(randomIdTwo).addEventListener('click', function completeTodo() {
var item = this.closest('li');
item.remove();
document.getElementById("completelist").appendChild(item);
change(this);
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<div id="datetime"></div>
<div id="ampm"></div>
<input type="text" id="input" placeholder="Add an item" />
<button id="button" type="button"><img src="./img/additem4.png"></button>
</header>
<div id="list">
</div>
<div id="divline"></div>
<div id="completelist">
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
You're using string interpolation to set the class initially, but string interpolation does not create a data-binding between the resultant element and the variable. So change() is being called, and status is being updated, but the value of the element you created via a string isn't seeing that change, so it's not being updated.
You would need to access the element in the DOM and change it's classList manually.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MainDesign.master.cs" Inherits="Web_Assignment.MainDesign" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Master Design</title>
<link href="stylesheets/mainstyle.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="images/de_tour_ico.ico" />
<script>
var slide = function (div) {
if ($(div).css('display') === 'none') {
$(div).delay(300).slideToggle(500);
return false;
} else {
$(div).delay(300).slideToggle(500);
return false;
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logobox">
<img class="bottom" src="images/de_tour_hover.png" />
<img class="top" src="images/de_tour.png" />
</div>
<div class="searchdiv">
</div>
</div>
<div class="sidebar">
Login
<div id="div1" style="display: none">
this will show
</div><hr />
<ul>
<li onclick="location.href='#'">Home</li>
<li onclick="location.href='#'">About</li>
<li onclick="location.href='#'">Gallery</li>
<li onclick="location.href='#'">Contact</li>
</ul>
</div>
<div class="container"><asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server"></asp:ContentPlaceHolder></div>
</div>
</body>
</html>
I wonder why it wouldn't toggle the slides down whenever I clicked "Login"? Been searching and trying to sort this out for days.
I wanted to add a id: and password: inside the slided-div and possibly to hide it back whenever "Login" clicked again.
make sure include jQuery library first! and change the jquery code like below.
<script type='text/javascript'>
function slide(div) {
if ($(div).is(':hidden')) {
$(div).delay(300).slideToggle(500);
return false;
} else {
$(div).delay(300).slideToggle(500);
return false;
}
}
</script>
you can see the demo here ---> http://jsfiddle.net/Junkie/36ueV/
her for you:
http://jsfiddle.net/2EqCT/
Like you can see, the toggle work fine
Dont't forget to add the jquery lib ;)
$('a#foryu').click( function() { slide('#div1'); return false; } );
function slide(div) {
console.log("test");
if ($(div).css('display') === 'none') {
$(div).slideToggle(500);
return false;
} else {
$(div).slideToggle(500);
return false;
}
}
and please :) think about make the call of the function from your js code and not from the html tag
(JavaScript function in href vs. onclick)
I'm trying to make a simple page for the Gear 2 (running Tizen OS). In this page, the user can scroll up or down to see different meds, then can swipe left to see a screen asking to confirm the med as taken. I've taken some sample Tizen OS code and cobbled it together to try to achieve this, but it's not working as desired - it's just displaying all 4 text elements, one right after the other. I am very new to HTML and JavaScript so I'm sure I'm making some simple mistakes.
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>UITest</title>
<link rel="stylesheet" href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">2 med(s) to take</h2>
</header>
<div id="barsectionchanger" class="ui-content">
<section class = "barcontainer">
<div class = "hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 1 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 1 </h3>
</section>
</div>
</div>
</section>
<section class = "barcontainer">
<div class = "hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 2 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 2 </h3>
</section>
</div>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script type="text/javascript" src="lib/tau/js/widget/virtuallist.js"></script>
<script src="app.js"></script>
</html>
app.js
( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName == "back" ) {
var page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" ) {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
} );
} () );
(function() {
var page = document.getElementById( "main" ),
changer = document.getElementById( "barsectionchanger" ),
sectionChanger, idx=1;
page.addEventListener( "pageshow", function() {
sectionChanger = new tau.SectionChanger(changer, {
circular: false,
orientation: "vertical",
scrollbar: "bar"
});
});
page.addEventListener( "pagehide", function() {
sectionChanger.destroy();
});
})();
(function() {
var underlayarray = document.getElementsByClassName( "barcontainer" ),
changerarray = document.getElementsByClassName( "hsectionchanger" ),
sectionChanger, idx=1;
for (i = 0; i < underlayarray.length; i++){
underlayarray[i].addEventListener( "pageshow", function() {
sectionChanger = new tau.SectionChanger(changerarray[i], {
circular: false,
orientation: "horizontal"
});
});
}
})();
Any insight into potential problems is appreciated. Thanks
Construction of SectionChanger widget not allow to put one widget instance inside another.
You should create another layout off aplliaction. For example you can use horizontal section changer on main level and vertical scrolled content in each section.
I fixed your code and now all section changers built correctly, but still are problems with working of widget.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>UITest</title>
<link rel="stylesheet" href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">2 med(s) to take</h2>
</header>
<div id="barsectionchanger" class="ui-content">
<div>
<section class="hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 1 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 1 </h3>
</section>
</div>
</section>
<section class="hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 2 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 2 </h3>
</section>
</div>
</section>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script>( function () {
window.addEventListener('tizenhwkey', function (ev) {
if (ev.keyName == "back") {
var page = document.getElementsByClassName('ui-page-active')[0],
pageid = page ? page.id : "";
if (pageid === "main") {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
});
}() );
(function () {
var page = document.getElementById("main"),
changer = document.getElementById("barsectionchanger"),
sectionChanger, idx = 1;
page.addEventListener("pageshow", function () {
var changerarray = document.getElementsByClassName("hsectionchanger"),
i;
tau.widget.SectionChanger(changer, {
circular: false,
orientation: "vertical",
scrollbar: "bar",
items: changer.firstElementChild.children
});
for (i = 0; i < changerarray.length; i++) {
tau.widget.SectionChanger(changerarray[i], {
circular: false,
orientation: "horizontal"
});
}
});
page.addEventListener("pagehide", function () {
sectionChanger.destroy();
});
})();
</script>
</html>