I have a task - to make a notification display for some web-application.
The notifications appear in the bottom right corner of the window and disappear after some time.
Or the notifications can be gone by clicking on a notification item.
If there are multiple notifications, they should be stacked.
Each new notification moves the notification stack up.
If the stack of notifications grows larger than the height of the window, then the top older notifications must move to the next stack, which must be displayed to the left of the newer notification stack.
Similarly, if the second stack reaches the height of the window, then the oldest notifications should move to the third stack.
Schematically, it should look like this:
I was able to obtain the correct order of displaying notifications, but I can't get the notification container to be positioned against the right edge of the window.
function notify(msg) {
let element = document.createElement('div');
element.classList.add('notification');
element.innerHTML = msg;
let timeout;
element.onclick = () => element.remove();
element.onmouseenter = () => clearTimeout(timeout);
element.onmouseleave = () => createTimeout();
createTimeout();
let recentElement = container.firstElementChild;
if(recentElement) recentElement.before(element);
else container.appendChild(element);
indicator.innerHTML='Last msg is '+msg;
function createTimeout() {
timeout = setTimeout(() => {
element.remove()
}, 10000);
}
}
let notifyIndex = 0;
x1.onclick = () => {
notify(++notifyIndex);
}
x10.onclick = () => {
for (let i = 0; i < 10; i++)
notify(++notifyIndex);
};
x30.onclick = () => {
for (let i = 0; i < 30; i++)
notify(++notifyIndex);
};
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
}
.action-list button {
width: 4rem;
margin .5rem
}
#container {
position: fixed;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
flex-wrap: wrap-reverse;
align-content: flex-end;
align-items: flex-end;
bottom: 0;
right: 30px;
max-height: 100vh;
}
.notification {
transition: all 500ms ease-in-out;
box-shadow: 0 0 1rem #0004;
margin: 0 1rem 1rem 0;
background: #f9f99f;
color: #000;
border: 1px solid #0008;
padding: .2rem 1rem;
cursor: default;
user-select: none;
}
<div id="container"></div>
<div>
<div id="indicator">Last msg is 0</div>
<div class="action-list">
<button id="x1">x1</button>
<button id="x10">x10</button>
<button id="x30">x30</button>
</div>
</div>
I set an indentation of 30 pixels, so that you can see that the notifications go over the edge of the window.
The idea is that stacks of recent notifications should not go over the edge of the window.
What am I doing wrong?
position: fixed;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
flex-wrap: wrap-reverse;
align-items: flex-end;
bottom: 0;
right: 30px;
max-height: 100vh;
Try this, let me know if it works!
Tldr: Your Align-content: flex-end was making it grow to the right
I have a simple note taking web application. Each time the user clicks on the '+' button a new note is added. Once he clicks on the '⟳' button all are excluded. I want to add five new item slots in the note that the user clicked. In order to do that I need to know which note he did so. This last bit is the one confusing me. How can I know which button the user clicked if all of the buttons are generated by the user?
HTML:
<html lang="en">
<head>
<title>To Do Lists</title>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<div class="top_bar">
<button id="plus">+</button>
<button id="restart">⟳</button>
</div>
<div id="notes" class="notes">
</div>
</body>
</html>
CSS
padding: 0px;
margin: 0px;
}
body{
display: flex;
flex-direction: column;
}
.top_bar{
width: 100%;
height: 10vh;
background-color: #95E29B;
display: flex;
align-items: center;
justify-content: space-between;
}
button{
font-size: 35px;
border: none;
width: 15%;
height: 10vh;
background-color: #3BCE4B;
cursor: pointer;
}
.notes{
width: 100%;
height: 90vh;
overflow: auto;
background-color: black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.note{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
height: 40vh;
width: 30%;
border-radius: 10px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-end;
}
.note_input{
margin-top: 20px;
margin-right: 5%;
font-size: 30px;
width: 90%;
border-style: solid;
border-top: none;
border-left: none;
border-right: none;
border-color: black;
}
form{
margin-top: 10px;
margin-right: 15%;
width: 80%;
height: 49%;
overflow-y: auto;
}
li{
border: none;
width: 70%;
display: flex;
}
.li_input{
border-style: solid;
border-color: black;
border-top: none;
border-left: none;
border-right: none;
margin-left: 10px;
font-size: 20px;
}
.more_items{
width: 35px;
height: 35px;
margin-right: 2%;
border-radius: 100%;
font-size: 20px;
}
JavaScript
const add_note = () => {
// Creates a new note and its props
const new_note = document.createElement("div");
const new_input = document.createElement("input");
const new_form = document.createElement("form");
const new_ol = document.createElement("ol");
const new_button = document.createElement("button");
//Populates the new note with inputs and checkboxes
for (let i = 0; i < 5; i++) {
let new_li = document.createElement("li");
let new_checkbox = document.createElement("input");
new_checkbox.setAttribute("type", "checkbox");
let new_li_input = document.createElement("input");
new_li_input.classList.add("li_input");
new_ol.appendChild(new_li);
new_li.appendChild(new_checkbox);
new_li.appendChild(new_li_input);
}
//New note's settings
new_note.classList.add("note");
new_note.appendChild(new_input);
new_input.classList.add("note_input");
new_input.setAttribute("placeholder", "Note's title");
new_note.appendChild(new_form);
new_ol.classList.add("ols");
new_form.appendChild(new_ol);
new_note.appendChild(new_button);
new_button.classList.add("more_items");
//Inserts the new note and button
const note_block = document.getElementById("notes");
note_block.appendChild(new_note);
new_button.addEventListener("click", add_more_items);
new_button.innerHTML = "+";
};
//Adds more items
const add_more_items = () => {
//console.log(new_button.parentElement.nodeName);
//let new_ol = document.getElementsByClassName("ols")[];
for (let i = 0; i < 5; i++) {
let new_li = document.createElement("li");
let new_checkbox = document.createElement("input");
new_checkbox.setAttribute("type", "checkbox");
let new_li_input = document.createElement("input");
new_li_input.classList.add("li_input");
new_ol.appendChild(new_li);
new_li.appendChild(new_checkbox);
new_li.appendChild(new_li_input);
}
};
//Removes all notes
const remove_note = () => {
let amount_of_notes = document.getElementsByClassName("note").length;
console.log(amount_of_notes);
while (amount_of_notes != 0) {
amount_of_notes--;
document.getElementsByClassName("note")[amount_of_notes].remove();
}
alert("All notes were removed.");
};
// Loads the buttons
const load_buttons = () => {
document.getElementById("plus").addEventListener("click", add_note);
document.getElementById("restart").addEventListener("click", remove_note);
};
// Main method
document.addEventListener("DOMContentLoaded", () => {
load_buttons();
});
Given your html is fairly simple, you can do this in a rudimentary style by making use of parentNode.
Your current code is erroring because you're trying to target new_ol to add the fresh <li> elements but it doesn't exist in scope of the add_more_items function. And even if it did, it would be ambiguous - which <ol> should it refer to?
Instead, you can work out the parent <ol> from the clicked button, like so:
const add_more_items = (e) => {
const new_ol = e.target.parentNode.querySelector('ol');
// rest of your code
}
Here's a full snippet putting all that together. I've put it in a codepen as the snippet editor here struggled with some parts of your layout: https://codepen.io/29b6/pen/qBxxXqG
Bear in mind that traversing the DOM like this isn't ideal. The main problem with this approach is that if your HTML structure changes, you can end up chaining multiple parentNodes together which gets ugly fast. But it should help you understand the concept of selecting an element's parent like you asked.
im new to javascript so if my code isn't the best i apologise in advance! Im trying to display the tags when a certain name is clicked with the click event (eventListener), but I have no idea how! I tried writing the code how I want it, but now im stuck. I want the tags to be displayed in the aside 1 if the name is clicked. Any help is appreciated!
window.addEventListener('load', init);
const cardsContainer = document.querySelector("#cards")
const birdNames = ["Koolmees", "Specht", "kerkuil"]
const birdImages = ["https://www.natuurpunt.be/sites/default/files/styles/content-wide/public/koolmees_fr_van_bauwel.jpg?itok=arfFjeTb&c=312068de040ea85bb4eb43164e28b3b2", "https://www.buitenleven.nl/wp-content/uploads/2019/10/grote-bonte-specht.jpg", "https://www.vogelhuisjes.nl/media/wysiwyg/vogels-in-de-tuin/vogels-in-nederland/xkerkuil.jpg.pagespeed.ic.8a2v4rM0Z3.jpg"]
const birds = [
{ name: "Koolmees", image: "https://www.natuurpunt.be/sites/default/files/styles/content-wide/public/koolmees_fr_van_bauwel.jpg?itok=arfFjeTb&c=312068de040ea85bb4eb43164e28b3b2", tag:"rotterdam, koolmees, kleine vogel" },
{ name: "specht", image: "https://www.buitenleven.nl/wp-content/uploads/2019/10/grote-bonte-specht.jpg" },
{ name: "kerkuil", image: "https://www.vogelhuisjes.nl/media/wysiwyg/vogels-in-de-tuin/vogels-in-nederland/xkerkuil.jpg.pagespeed.ic.8a2v4rM0Z3.jpg" }
]
const Birdtags = ["rotterdam, koolmees, kleine vogel", "specht, nijmegen, kleine vogel", "uil, eindhoven, grote vogel, roofvogel"]
let Field;
let target;
function init()
{
//Click handler for every card
Field = document.getElementById('field');
Field.addEventListener('click', playingFieldClickHandler);
//starting
addCard();
//Listen to input of chosen name by user
let playForm = document.getElementById('form');
playForm.addEventListener('submit', formSubmitHandler);
}
function addCard(birdImage, birdName){
const cardDiv = document.createElement("flex-item")
cardDiv.classList.add("card")
cardsContainer.appendChild(cardDiv)
const img = document.createElement("img")
img.src = birdImage
cardDiv.appendChild(img)
const nameDiv = document.createElement("div")
nameDiv.innerText = birdName
cardDiv.appendChild(nameDiv)
}
function playingFieldClickHandler(e)
{
/** what do I put here???*/
}
function formSubmitHandler(e)
{
//Prevent default form submit
e.preventDefault();
//If the value is the right one, you won!
if (birdNames === "koolmees") {
/** display tags */
} else if (birdNames === "specht") {
/** display tags */
}
else if (birdNames === "kerkuil") {
/** display tags */
}
}
function addCards(){
for(let i = 0; i<birdNames.length; i++){
addCard(birdImages[i], birdNames[i])
}
}
addCards()
flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
flex-item {
background: #ABEBC6;
padding: 5px;
width: 250px;
height: 200px;
margin-top: 10px;
line-height: 50px;
color: black;
font-weight: bold;
font-size: 3em;
text-align: center;
}
nav {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
list-style: none;
margin: 0;
background: #A2D9CE;
}
nav a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}
nav a:hover {
background: #1565C0;
}
wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
wrapper > * {
padding: 10px;
flex: 1 100%;
}
header {
background: #DAF7A6;
}
footer {
background: #28B463;
}
main {
text-align: left;
background: #A2D9CE;
}
aside {
background: #28B463;
}
#media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
#media all and (min-width: 800px) {
main { flex: 3 0px; }
aside { order: 1; }
main { order: 2; }
footer { order: 3; }
}
body {
width: 100%;
}
#media all and (max-width: 800px) {
nav {
justify-content: space-around;
}
}
#media all and (max-width: 600px) {
nav {
flex-flow: column wrap;
padding: 0;
}
nav a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255, 255, 255,0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
nav li:last-of-type a {
border-bottom: none;
}
}
p1 {
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
p2 {
font-family: Arial, Helvetica, sans-serif;
}
p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
img {
width: 250px;
height: 150px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style2.css">
<title>Test week 2</title>
</head>
<body>
<wrapper>
<header><p1>Vogel magazine voor vogelspotters!</p1></header>
<main>
<flex-container id="cards">
</flex-container>
</main>
<aside>Aside 1</aside>
<footer>Footer</footer>
</wrapper>
<script src="js/DOM4.js"></script>
</body>
</html>
Admittedly I modified the HTML structure a little as there were errors with the markup, possibly screwed up your CSS and changed the multiple source arrays for a single Object literal but you should be able to adapt the following to suit your needs. I made this do what I thought you were trying to do.
window.addEventListener('load', init);
const cardsContainer = document.querySelector('#cards');
const aside = document.querySelector('#wrapper aside');
/*
If you re-structure your data into a single Object literal
you will, I think, find less issues with maintaining several
arrays and ensuring they all have the same number of items etc
This sort of data structure can easily be created in the form of
JSON data from a database query!
Each sub-object ( aka - Bird ) can be extended easily to have additional
properties quite easily, especially if database driven.
If you remove, from the img src, the `scheme` you can generally get the image to download
using the same scheme as the parent page. One day ALL websites will be hosted on SSL
so this will be redundant but in the meantime this might help prevent warnings
*/
const birds={
'Koolmees':{
src:'//www.natuurpunt.be/sites/default/files/styles/content-wide/public/koolmees_fr_van_bauwel.jpg',
tags:'rotterdam, koolmees, kleine vogel'
},
'Specht':{
src:'//www.buitenleven.nl/wp-content/uploads/2019/10/grote-bonte-specht.jpg',
tags:'specht, nijmegen, kleine vogel'
},
'kerkuil':{
src:'//www.vogelhuisjes.nl/media/wysiwyg/vogels-in-de-tuin/vogels-in-nederland/xkerkuil.jpg.pagespeed.ic.8a2v4rM0Z3.jpg',
tags:'uil, eindhoven, grote vogel, roofvogel'
}
};
/*
It is unclear from the code what you hope to do with the `submithandler`
especially given that there is no form ( or was no form ) so I guessed
that you were hoping to do something similar to what this method does..
if there is no `figcaption` below the image it will add the caption and
assign the `tags` text which is assigned to the image as a dataset attribute
*/
const clickhandler=function(e){
let fig=e.target.parentNode.querySelector('figcaption');
if( fig==null ){
fig=document.createElement('figcaption');
fig.textContent=this.dataset.tags
e.target.parentNode.appendChild( fig );
}else{
e.target.parentNode.removeChild(fig)
}
aside.textContent=fig==null ? '' : this.dataset.tags;
}
function init(){
/* the first does nothing, the 2nd has errors and the 3rd is incomplete...
//Click handler for every card
document.getElementById('field').addEventListener('click', playingFieldClickHandler);
//starting
//addCard(src,name,desc);
//Listen to input of chosen name by user
document.getElementById('form').addEventListener('submit', formSubmitHandler);
*/
document.getElementById('cards').querySelectorAll('.card').forEach( card => {
card.addEventListener('click',clickhandler );
});
}
function addCard(birdImage, birdName, birdTags){// now takes 3 arguments
let item = document.createElement('flex-item');
item.classList.add('card');
item.dataset.tags=birdTags; //assign the tags as a dataset atttribute
cardsContainer.appendChild(item)
let img = document.createElement('img')
img.src = birdImage;
img.title=birdTags; // tags also assigned for the img title
item.appendChild(img)
let name = document.createElement('div')
name.innerText = birdName
item.appendChild(name)
}
/**********************************************************
Unclear how these two functions are really to be used
- unchanged
*/
function playingFieldClickHandler(e)
{
/** what do I put here???*/
}
function formSubmitHandler(e)
{
//Prevent default form submit
e.preventDefault();
//If the value is the right one, you won!
if (birdNames === "koolmees") {
/** display tags */
} else if (birdNames === "specht") {
/** display tags */
}
else if (birdNames === "kerkuil") {
/** display tags */
}
}
/*
With the new data structure a new approach to iterating through the
data is required. Using the `object.keys` method allows us to quickly
iterate through each sub-object. The `key` is the bird name.
*/
function addCards(){
Object.keys( birds ).forEach( key => {
let bird=birds[ key ];
addCard( bird.src, key, bird.tags )
})
}
addCards()
body{
width:100%;
height:100vh;
margin:0;
padding:0;
box-sizing:border-box;
}
flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
* and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
flex:10;
margin:auto;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
padding: 0;
list-style: none;
}
flex-container figcaption{
font-size:1rem;
line-height:1rem;
color:white;
}
flex-item {
background: #ABEBC6;
padding: 5px;
width: 250px;
min-height: 200px;
max-height:250px;
margin-top: 10px;
line-height: 50px;
color: black;
font-weight: bold;
font-size: 3em;
text-align: center;
cursor:pointer;
}
nav {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
list-style: none;
margin: 0;
background: #A2D9CE;
}
nav a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}
nav a:hover {
background: #1565C0;
}
#wrapper {
display: flex;
flex:10;
flex-direction:column;
font-weight: bold;
text-align: center;
min-height:100vh;
margin:auto;
padding:0;
}
#wrapper > * {
padding: 10px;
flex: 1 100%;
}
header {
background: #DAF7A6;
flex:2!important;
order:1;
display:flex;
align-items:center;
justify-content:center;
}
footer {
background: #28B463;
flex:1!important;
order:3;
display:flex;
align-items:center;
justify-content:center;
}
main {
text-align: left;
background: #A2D9CE;
flex:50!important;
order:2;
}
aside {
display:flex;
align-items:center;
justify-content:center;
background: #28B463;
flex:1;
margin:auto;
max-height:2rem;
width:100%;
padding:0!important;
}
#media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
#media all and (min-width: 800px) {
main { flex: 3 0px; }
aside { order: 1; }
main { order: 2; }
footer { order: 3; }
}
#media all and (max-width: 800px) {
nav {
justify-content: space-around;
}
}
#media all and (max-width: 600px) {
nav {
flex-flow: column wrap;
padding: 0;
}
nav a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255, 255, 255,0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
nav li:last-of-type a {
border-bottom: none;
}
}
p1 {
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
p2 {
font-family: Arial, Helvetica, sans-serif;
}
p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
img {
width: 250px;
height: 150px;
}
<div id='wrapper'><!-- There is no HTML element `wrapper` -->
<header><p1>Vogel magazine voor vogelspotters!</p1></header>
<main>
<flex-container id="cards"></flex-container><!-- unusual to assign custom elements without accompanying javascript/css -->
</main>
<aside>Aside 1</aside>
<footer>Footer</footer>
</div>
I am having difficulty to carousal gif in body background using javascript. I have set background in css body and set a variable in root in style.css to access this variable in javascript. This way is not working. my javascript code is perfect but I unable to change url in style.css. Can anyone help me please? Thanks
var index=0;
var images = ['https://media.giphy.com/media/BHNfhgU63qrks/source.gif','https://media.giphy.com/media/l3q2LucQ5TmyO7dFS/source.gif','https://media.giphy.com/media/l0O9xcDNUrPMfYQAE/source.gif','https://media.giphy.com/media/xUOxeWFk7gEwF13wDS/source.gif','https://media.giphy.com/media/BTWsSlrSHGNTa/source.gif','https://media.giphy.com/media/3gWENmQ8qo896QNhPV/source.gif']; //get all the images and saved them into an array
var totalImages = images.length;
function slideImages(){
document.documentElement.style.setProperty('--bg-change-gif',url(images[index]));// get images by specific index
if(index<totalImages-1){
index++;
}
else
{
index=0;
}
setTimeout(slideImages,250)
}
window.onload = slideImages;
:root {
--bg-change-gif:url(https://media.giphy.com/media/EfcqFUzY6asdq/source.gif);
}
body {
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
max-height: 100vh;
margin: 0;
color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
background: var(--bg-change-gif);
background-size: cover;
height: 100%;
overflow: hidden;
}
Your code has a bit of error here:
document.documentElement.style.setProperty('--bg-change-gif',url(images[index]));// get images by specific index
It will throw an error saying url is not defined. You should change it to this:
document.documentElement.style.setProperty('--bg-change-gif','url('+images[index]+')');// get images by specific index
Here is your updated snippet!
var index=0;
var images = ['https://media.giphy.com/media/BHNfhgU63qrks/source.gif','https://media.giphy.com/media/l3q2LucQ5TmyO7dFS/source.gif','https://media.giphy.com/media/l0O9xcDNUrPMfYQAE/source.gif','https://media.giphy.com/media/xUOxeWFk7gEwF13wDS/source.gif','https://media.giphy.com/media/BTWsSlrSHGNTa/source.gif','https://media.giphy.com/media/3gWENmQ8qo896QNhPV/source.gif']; //get all the images and saved them into an array
var totalImages = images.length;
function slideImages(){
document.documentElement.style.setProperty('--bg-change-gif','url('+images[index]+')');// get images by specific index
if(index<totalImages-1){
index++;
}
else
{
index=0;
}
setTimeout(slideImages,250)
}
window.onload = slideImages;
:root {
--bg-change-gif:url(https://media.giphy.com/media/EfcqFUzY6asdq/source.gif);
}
body {
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
max-height: 100vh;
margin: 0;
color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
background: var(--bg-change-gif);
background-size: cover;
height: 100%;
overflow: hidden;
}
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section id="boxBig">
<div class="box" id="perspective">
<div class="object" id="seekSlider"></div>
</div>
</section>
<section id="layout">
<div class="stats">
<input id="stats1" type="text" value="perspective-origin">
<input id="stats2" type="text" value="perspective">
<input id="stats3" type="text" value="perspective">
<input id="stats4" type="text" value="preserve-3d">
<input id="stats5" type="text" value="rotatez">
</div>
</section>
</body>
</html>
css
.object {
align-self: center;
margin: auto;
width: 100px;
height: 100px;
background: green;
}
#boxBig {
margin: 0 auto;
width: 200px;
height: 200px;
background: red;
display: flex;
flex-direction: row;
align-item: center;
justify-content: center;
}
.box {
width: 150px;
height: 150px;
background: blue;
align-self: center;
display: flex;
flex-direction: row;
justify-content: center;
}
#perspective {
perspective: 0px;
-webkit-perspective: 0px;
}
#seekSlider {
width: 100%;
}
#layout {
flex-direction: row;
flex-wrap: nowrap;
display: flex;
justify-content: center;
align-content: center;
background: orange;
}
.buttons {
flex: 2;
order: 0;
background: yellow
}
.stats {
flex: 1;
order: 0;
background: lightgreen
}
javascript
"use strict";
function Gid(id) {
return document.getElementById(id);
}
var px = 0;
var seekSlider = Gid('seekSlider');
var i = 0;
var stats1 = Gid('stats1');
var stats2 = Gid('stats2');
var stats3 = Gid('stats3');
var stats4 = Gid('stats4');
var stats5 = Gid('stats5');
var stats6 = Gid('stats6');
var stats7 = Gid('stats7');
var stats8 = Gid('stats8');
var stats9 = Gid('stats9');
var stats10 = Gid('stats10');
is the any good way to write this with an array? i tried this is one of the function there are ten there mostly the same so i didnt post
function perspectiveOrigin() {
var seekSlider = Gid('seekSlider');
var boxBig = Gid('boxBig');
var box = document.getElementsByClassName('box');
var perspective = Gid('perspective');
px += 10;
seekSlider.style.perspectiveOrigin = px + "%" + "" + px + "%";
var result = 'perspecspective-origin:' + px + '%';
stats1.value = result;
console.log(seekSlider.style.perspectiveOrigin);
}
so on..and i tried to make finial status for the element ,like status including its rotates and perspective
You could create an array like so:
var stats = [];
Then you can use one of the following depending on your own preference:
stats.push(Gid('stats1'));
stats.push(Gid('stats2'));
stats[0] = Gid('stats1');
stats[1] = Gid('stats2');
Next you want to iterate through the array:
with push method do:
for (var stat in stats) {
perspectiveOrigin(stats[stat]);
}
With other method you can also use:
for (var i=0; i < stats.length; i++) {
perspectiveOrigin(stats[i]);
}
You'll also need to change your function a little bit:
perspectiveOrigin() to perspectiveOrigin(stat)
and then in this function change:
stats1.value = result; to stat.value = result;
I haven't tested any of this, but let me know if you have any problems =]