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>
Related
I am making a simple ToDo app that when you write in the input form and submit it, it posts it neatly in a flex-box design below.
After it adds Your writing to the ToDo list at the bottom, JavaScript clears the input selection box.
My problem is that all the created ToDo list items are the SAME! They have the same class name and structure. I do not know how to handle all the buttons that are created so that when you click on the <button class='delete-btn'>x</button> it deletes only that button.
I have put all the writing templates created into a simple array called arrayOfText.
I was hoping I could delete the specific <div class='todo-div'>...</div> that the button was clicked from and then rewrite the whole .innerHTML of the ToDo list section.
This basically updates it and removes the div from the ToDo list that the button was clicked from, but I cannot seem to get it to work.
If you need more information, please message me.
"use strict";
const outputSection = document.querySelector("#output-section");
outputSection.innerHTML = "";
const writingArea = document.querySelector("#writing-area");
const publishBtn = document.querySelector(".default-btn");
const deleteBtns = document.getElementsByClassName("delete-btn");
const allToDoDivs = document.getElementsByClassName("todo-div");
const arrayOfText = [];
const cutAndPrintFunc = function (e) {
e.preventDefault();
//take writing in and print it to the current agenda
// clear the writing area
if (writingArea.value != "") {
const date = new Date();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDay()).padStart(2, "0");
const year = date.getFullYear();
const hour = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
const AMorPM = date.getHours() > 12 ? "PM" : "AM";
const minute = String(date.getMinutes()).padStart(2, "0");
const template = `
<div class="todo-div">
<h1 class="text-content">${writingArea.value}</h1>
<button class="delete-btn">x</button>
<p class="date-p">${month}/${day}/${year} --- requested # ${hour}:${minute} ${AMorPM} </p>
</div>`;
arrayOfText.push(template);
outputSection.insertAdjacentHTML("beforeend", template);
writingArea.value = "";
Array.from(allToDoDivs).forEach((el, ind) => {
if (ind % 2 === 0) {
el.style.backgroundColor = "#3ce815";
el.lastElementChild.style.color = "black";
}
//-----this does not work
// Array.from(allToDoDivs)[
// allToDoDivs.length - 1
// ].children[1].addEventListener("click", () => {
// console.log(this);
// // arrayOfText.pop(this);
// // outputSection.innerHTML = arrayOfText.join("");
// });
});
}
};
//publish text by hitting enter or pressing the plus sign in textbox
publishBtn.addEventListener("click", cutAndPrintFunc);
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/style.css" type="text/css" />
<title>Griffin's ToDo List</title>
</head>
<body>
<header>
<h1>
Welcome to <em style="text-decoration: underline">Griffin's</em> To-Do
List
</h1>
<div id="mini-flex-div">
<div class="ball" id="blue"> </div>
<div class="ball" id="orange"> </div>
<div class="ball" id="purple"> </div>
<p>What needs to be done today...</p>
<div class="ball" id="purple"> </div>
<div class="ball" id="orange"> </div>
<div class="ball" id="blue"> </div>
</div>
</header>
<main>
<div id="writer-div">
<form>
<input
id="writing-area"
type="text"
rows="1"
placeholder="Lets get this out of the way..."
maxlength="50"
spellcheck="true"
autofocus
></input>
<button class='default-btn'>+</button>
</form>
</div>
</main>
<div id="bottom-header">
<h1 id="output-h1">The current agenda...<hr id="splitter"></h1>
</div>
<section id="output-section">
<div class="todo-div">
<h1 class="text-content">Mow the lawn</h1>
<button class="delete-btn">x</button>
<p class="date-p">mm/dd/yyyy</p>
</div>
<div class="todo-div">
<h1 class="text-content">Mow the lawn</h1>
<button class="delete-btn">x</button>
<p class="date-p">mm/dd/yyyy</p>
</div>
</section>
<script src="/toDo.js"></script>
</body>
</html>
There are really only rare cases where you want to manipulate the DOM through HTML. So using insertAdjacentHTML and innerHTML is most of the time not what you want to do.
Use createElement, appendChild and removeChild instead.
For the delete button, you can use event delegation, and find the todo div that corresponds to the button using closest.
Alternating coloring per row can be done with a CSS rule.
Using all this you will have a code like that:
"use strict";
const outputSection = document.querySelector("#output-section");
outputSection.innerHTML = "";
const writingArea = document.querySelector("#writing-area");
const publishBtn = document.querySelector(".default-btn");
const cutAndPrintFunc = function(e) {
e.preventDefault();
//take writing in and print it to the current agenda
// clear the writing area
if (writingArea.value != "") {
const date = new Date();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDay()).padStart(2, "0");
const year = date.getFullYear();
const hour = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
const AMorPM = date.getHours() > 12 ? "PM" : "AM";
const minute = String(date.getMinutes()).padStart(2, "0");
// create an actual div element using createElement
const todoItem = document.createElement('div')
// add the todo-div class to it
todoItem.classList.add('todo-div')
// here you can use innerHTML, but you still might want to
// avoid its usage in general
todoItem.innerHTML = `
<h1 class="text-content">${writingArea.value}</h1>
<button class="delete-btn">x</button>
<p class="date-p">${month}/${day}/${year} --- requested # ${hour}:${minute} ${AMorPM} </p>
`;
// append the created div element to the outputSection
outputSection.appendChild(todoItem);
writingArea.value = "";
}
};
//publish text by hitting enter or pressing the plus sign in textbox
publishBtn.addEventListener("click", cutAndPrintFunc);
// we attach an event listener on outputSection for click
outputSection.addEventListener("click", (evt) => {
// only handle the click if it happend on the delete button
if (evt.target.matches('.delete-btn')) {
evt.preventDefault();
// At this point the evt.target is the delete button the
// click happened on so you need search for the
// ascendant that represents the todo-div using closest
// and remove that element from outputSection
outputSection.removeChild(evt.target.closest('.todo-div'))
}
})
/* use the odd rule to style all odd todo-div elements */
.todo-div:nth-child(odd) {
background-color: #3ce815;
}
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/style.css" type="text/css" />
<title>Griffin's ToDo List</title>
</head>
<body>
<header>
<h1>
Welcome to <em style="text-decoration: underline">Griffin's</em> To-Do List
</h1>
<div id="mini-flex-div">
<div class="ball" id="blue"> </div>
<div class="ball" id="orange"> </div>
<div class="ball" id="purple"> </div>
<p>What needs to be done today...</p>
<div class="ball" id="purple"> </div>
<div class="ball" id="orange"> </div>
<div class="ball" id="blue"> </div>
</div>
</header>
<main>
<div id="writer-div">
<form>
<input id="writing-area" type="text" rows="1" placeholder="Lets get this out of the way..." maxlength="50" spellcheck="true" autofocus>
<button class='default-btn'>+</button>
</form>
</div>
</main>
<div id="bottom-header">
<h1 id="output-h1">The current agenda...
<hr id="splitter">
</h1>
</div>
<section id="output-section">
<div class="todo-div">
<h1 class="text-content">Mow the lawn</h1>
<button class="delete-btn">x</button>
<p class="date-p">mm/dd/yyyy</p>
</div>
<div class="todo-div">
<h1 class="text-content">Mow the lawn</h1>
<button class="delete-btn">x</button>
<p class="date-p">mm/dd/yyyy</p>
</div>
</section>
<script src="/toDo.js"></script>
</body>
</html>
Unrelated to your problem:
input elements do not have a closing tag </input>
If you simply wish to remove the item from the list, start at the clicked button, use parentNode to find the "grand" parent (parent's parent) element, and remove, removeChild, the button's parent element:
// get all buttons and add a click event listener
document.querySelectorAll("button.delete-btn").forEach(btn => btn.addEventListener("click",
evt => {
// get the button's "grandparent", and remove the parent
evt.target.parentNode.parentNode.removeChild(evt.target.parentNode);
}
))
<!-- SAMPLE TO DO LIST -->
<section id="output-section">
<div class="todo-div" style="background-color: rgb(60, 232, 21);">
<h1 class="text-content">abc</h1>
<button class="delete-btn">x</button>
<p class="date-p" style="color: black;">06/00/2022 --- requested # 7:49 AM </p>
</div>
<div class="todo-div">
<h1 class="text-content">def</h1>
<button class="delete-btn">x</button>
<p class="date-p">06/00/2022 --- requested # 7:49 AM </p>
</div>
<div class="todo-div" style="background-color: rgb(60, 232, 21);">
<h1 class="text-content">ghi</h1>
<button class="delete-btn">x</button>
<p class="date-p" style="color: black;">06/00/2022 --- requested # 7:49 AM </p>
</div>
</section>
here is some improvements in your html and js file.
we provide each inserted div an id based on arrayOfText length so we can direct access id and used it with combine todo-div + id
and remove particular div from its own parent.
"use strict";
const outputSection = document.querySelector("#output-section");
outputSection.innerHTML = "";
const writingArea = document.querySelector("#writing-area");
const publishBtn = document.querySelector(".default-btn");
const deleteBtns = document.getElementsByClassName("delete-btn");
const allToDoDivs = document.getElementsByClassName("todo");
const arrayOfText = [];
const cutAndPrintFunc = function (e) {
e.preventDefault();
//take writing in and print it to the current agenda
// clear the writing area
if (writingArea.value != "") {
const date = new Date();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDay()).padStart(2, "0");
const year = date.getFullYear();
const hour = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
const AMorPM = date.getHours() > 12 ? "PM" : "AM";
const minute = String(date.getMinutes()).padStart(2, "0");
const indexAdd = (arrayOfText.length === 0) ? 0 : arrayOfText.length;
const template = `
<div class="todo todo-div${indexAdd}">
<h1 class="text-content">${writingArea.value}</h1>
<button class="delete-btn" onclick="removeTodoDiv(${indexAdd})">x</button>
<p class="date-p">${month}/${day}/${year} --- requested # ${hour}:${minute} ${AMorPM} </p>
</div>`;
arrayOfText.push(template);
outputSection.insertAdjacentHTML("beforeend", template);
writingArea.value = "";
Array.from(allToDoDivs).forEach((el, ind) => {
if (ind % 2 === 0) {
el.style.backgroundColor = "#3ce815";
el.lastElementChild.style.color = "black";
}
//-----this does not work
// Array.from(allToDoDivs)[
// allToDoDivs.length - 1
// ].children[1].addEventListener("click", () => {
// console.log(this);
// // arrayOfText.pop(this);
// // outputSection.innerHTML = arrayOfText.join("");
// });
});
}
};
//publish text by hitting enter or pressing the plus sign in textbox
publishBtn.addEventListener("click", cutAndPrintFunc);
function removeTodoDiv(index) {
const findDiv = document.getElementsByClassName('todo-div' + index)[0];
findDiv.parentNode.removeChild(findDiv);
}
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/style.css" type="text/css" />
<title>Griffin's ToDo List</title>
</head>
<body>
<header>
<h1>
Welcome to <em style="text-decoration: underline">Griffin's</em> To-Do
List
</h1>
<div id="mini-flex-div">
<div class="ball" id="blue"> </div>
<div class="ball" id="orange"> </div>
<div class="ball" id="purple"> </div>
<p>What needs to be done today...</p>
<div class="ball" id="purple"> </div>
<div class="ball" id="orange"> </div>
<div class="ball" id="blue"> </div>
</div>
</header>
<main>
<div id="writer-div">
<form>
<input id="writing-area" type="text" rows="1" placeholder="Lets get this out of the way..." maxlength="50"
spellcheck="true" autofocus></input>
<button class='default-btn'>+</button>
</form>
</div>
</main>
<div id="bottom-header">
<h1 id="output-h1">The current agenda...
<hr id="splitter">
</h1>
</div>
<section id="output-section">
<!-- <div class="todo-div">
<h1 class="text-content">Mow the lawn</h1>
<button class="delete-btn">x</button>
<p class="date-p">mm/dd/yyyy</p>
</div>
<div class="todo-div">
<h1 class="text-content">Mow the lawn</h1>
<button class="delete-btn">x</button>
<p class="date-p">mm/dd/yyyy</p>
</div> -->
</section>
<script src="./index.js"></script>
</body>
</html>
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");
};
I made a templating with handlebars, so now my problem is simple :
When user put a letter or words or something else in the input field, the function launch the ajax call and he return the result.
But, I think, I took the problem upside down.
So if you would like to help me, you can check the code :
import Handlebars from 'handlebars'
export default class Templating {
constructor() {
this._grabDom();
this._addListener();
this._getData();
this._putData();
}
/* PRIVATE METHODS */
_createBounds() {
['_getData', '_putData', '_prevent']
.forEach((fn) => this[fn] = this[fn].bind(this));
}
_putData() {
for (let i = 0; i < this._parsing.search.length; i++) {
let compiledTemplate = Handlebars.compile(this._dom.cardsTemplate);
let generated = compiledTemplate(this._parsing.search[i]);
this._dom.cardsContainer.innerHTML += generated
}
}
_getData() {
let req = new XMLHttpRequest();
req.open('GET', 'http://joibor.fr/api/search.json', false);
req.send(null);
if (req.status === 200) {
this._parsing = JSON.parse(req.responseText);
}
}
_prevent(pEvt) {
if (pEvt.keyCode === 13) {
pEvt.preventDefault();
this._value = pEvt.target.value;
}
}
/* END PRIVATE METHODS */
/* PUBLIC METHODS */
/* END PUBLIC METHODS */
/* EVENT HANDLER */
_addListener() {
this._dom.searchInput.addEventListener('keydown', this._prevent)
}
/* END EVENT HANDLER */
/* GRAB DOM */
_grabDom() {
this._dom = {};
this._dom.cardsTemplate = document.querySelector('#cards-template').innerHTML;
this._dom.cardsContainer = document.querySelector('.section-bottom__template');
this._dom.searchInput = document.querySelector('.js-search-input');
}
/* END GRAB DOM*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Search</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="section-top">
<form class="form">
<label class="form__label" for="">Lieux</label>
<input type="text" class="form__input js-search-input" placeholder="...">
</form>
</div>
<section class="section-bottom">
<h2 class="section-bottom__title">Les membres qui se trouvent à Reims</h2>
<div class="section-bottom__template"></div>
<script id="cards-template" type="text/x-handlebars-template">
<div class="cards">
<div class="cards__position">
<img class="cards__image" src="{{image}}" alt="profil 1">
<div class="cards-content">
<div class="about about--flex">
<p class="about__name">{{name}}</p>
<p class="about__city">{{city}}</p>
</div>
<div class="text">
<p class="text__content"><span class="text__content__cat">Disponible : </span> {{start}} <span class="text__content__cat">au</span> {{end}}</p>
</div>
<div class="place">
<p class="place__content"><span class="place__content__cat">Nombre max de voyageurs : </span> {{max}}</p>
</div>
</div>
</div>
</div>
</script>
</section>
<script src="js/script.js"></script>
</body>
</html>
Actually, the templating works but not the search I can't solved this problem.
Here is my code to re size the header on scroll on but it is not working.The didn't set the header to fixed size.But the header size isn't changing i used Javscript and css to do this but it isn't can some please help me to get rid of this error.I struct at this so please some can help me.
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<title>Request Us Your Requirment</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/classie.js">
</script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
}
else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
</head>
<body>
<div id="wrapper">
<header>
<div class="container clearfix">
<h1 id="logo">
My Site
</h1>
<nav>
Services
About Us
Contact Us
</nav>
</div>
</header>
<div id="main">
<div id="content">
<section>
<div class="container">
<h1>Request Us Your Requirement</h1>
<p>Building a website is a time consuming process.But not now Just get your professional website by contsct us</p>
<p>We will Provide the best web sites with less cost and within the time.</p>
<p>
Follow Us On FB<br>
Follows Us On Twitter
</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Why My Site!</h1>
<p>We will provide Best Quality Webstes</p>
<p>Low Cost</p>
<p> How to contact Us</p>
</div>
</section>
</div>
</div>
<footer>
<div id="info-bar">
<div class="container clearfix">
<span class="all-tutorials">
</div>
</div>
</footer>
</div>
</body>
</html>
check this fiddle : https://jsfiddle.net/b39gx6pa/2/
Replace JavaScript with this:
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,shrinkOn = 300,header = document.querySelector("header");
if (distanceY > header.clientHeight/3) {
classie.add(header,"smaller");
}else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
I have a Navigation App and I want to cause the second page which is going to be loaded to the default.html to execute a function in ready section.
I have written in the home.js the following code:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var articlesList;
articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("DNZ", publicMembers);
},
RSSFeedHandler: function getRssFeed() {
WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
article.link = items[n].querySelector("link").textContent;
article.description = items[n].querySelector("description").textContent;
article.pubDate = items[n].querySelector("pubDate").textContent;
articlesList.push(article);
}
});
}
});
})();
But this causes a problem when running it to the debugger; and the it stops.
My home.html page contains the following tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<div id="main">
<div id="DNZItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
<div class="listItemTemplate" style="width: 173px; height: 100px;">
<div class="listItemTitle" data-win-bind="innerText: title" style="width: 173px; height: 100px;"></div>
<div class="listItemImage" data-win-bind="innerText: pubDate" style="width: 173px; height: 100px;"></div>
<!--<div class="listItemTitle" data-win-bind="innerText: link">
</div>-->
</div>
</div>
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Καλως ήρθατε!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<section id="content">
<div id="articlelist" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DNZ.ItemList.dataSource, itemTemplate: DNZItemTemplate }"></div>
</section>
</section>
</div>
</div>
</body>
</html>
and I think the problem is when I try to put the item to the list view! Do you have any ideas for the way I have to write it to run the getRSSFeed function when the home.html is being loaded?
In order for the articlesList to be visible in the RSSFeedHndler method you need to make it a property of the page object as follows:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
articlesList:null,
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
// var articlesList;
this.articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("DNZ", publicMembers);
},
RSSFeedHandler: function getRssFeed() {
var _this=this;
WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
article.link = items[n].querySelector("link").textContent;
article.description = items[n].querySelector("description").textContent;
article.pubDate = items[n].querySelector("pubDate").textContent;
_this.articlesList.push(article);
}
});
}
});
})();