How to make useable delete button to delete comments - javascript

I will like to know how to make my delete button work it has the id's of the comments and i just need to know how to get the button to delete the comments.I would also like to make it so the user can only delete there comment not other users i would also like to know how to put a date on a comments.
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function up(){
window.scrollTo({top:0,behavior:'smooth'});
}
function dark(){
var element = document.body;
element.classList.toggle("dark-mode");
}
const Comments = [{user:'Nice guy',title:'Love this movie',id:'id1'},{user:'cool guy', title:'Best DBS movie ever',id:'id2'},{user:'Random guy' ,title: 'Borly was sooooooooo cooooool',id:'3'}];
render();
function addComments() {
const textbox = document.getElementById('comment-title');
const title = textbox.value;
const userName = document.getElementById('user-name');
const user = userName.value;
const id = new Date().getTime();
Comments.push({
title:title,
user:user,
id:id
});
render();
}
function deleteComment(event){
const deleteButton = event.target;
const idToDelete = deleteButton.id;
Comments= Comments.filter(function(Comment){
if (comment.id === idToDelete){
return false
}else{
return true;
}
});
}
function render() {
// reset our list
document.getElementById('comment-List').innerHTML = '';
Comments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment.user +': '+comment.title;
element.style.textAlign = 'center'
element.style.marginLeft='30%'
element.style.marginRight='30%'
element.style.padding='20px'
element.style.fontFamily = 'Albert Sans, sans-serif';
element.style.marginBottom = '20px'
element.style.border='1px solid'
element.style.borderRadius='20px'
element.style.borderColor='blue'
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Delete';
deleteButton.onclick = deleteComment;
deleteButton.id = comment.id;
element.appendChild(deleteButton);
const commmentsList = document.getElementById('comment-List');
commmentsList.appendChild(element);
});
}
body{
margin: 0px;
background-color: #f0833a;
}
h1,h2,h3,h4,h5{
text-align: center;
font-family: 'Poppins', sans-serif;
}
p{
font-family: 'Albert Sans', sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.logo{
width: 150px;
}
/* Dropdown Button */
.dropbtn {
padding: 16px;
background-color: #f0833a;
color: white;
font-size: 16px;
font-family: 'Albert Sans', sans-serif;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f0833a;}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #1dc40a;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#footer{
margin-top: 20px;
background-color: black;
padding-bottom: 100px;
color: #f0833a;
}
.copyright{
float: right;
}
.made{
float: left;
}
.button{
background-color: #f0833a;
margin-left: auto;
margin-right: auto;
color: white;
border-width: 0px;
height: 36px;
width: 74px;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.15s;
color: 0.15s;
}
html {
scroll-behavior: smooth;
}
#nav{
min-height: 150px;
position: relative;
}
.dark-mode {
background-color: black;
color: white;
}
#add-comment{
background-color: black;
color: white;
border-width: 0px;
cursor: pointer;
vertical-align: top;
border-radius: 20px;
padding: 10px;
display: inline-block;
}
#add-comment:active{
opacity: 0.7;
}
#comment-title{
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
#user-name{
margin-left: 20%;
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
<!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>Rahim reviews</title>
<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=Albert+Sans&family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="DBS.css">
</head>
<body>
<div id="nav" style="background-color: black">
<img class="logo" src="pngwing.com.png" alt="">
<div class="dropdown">
<button id="dropbtn" class="dropbtn">Home</button>
<div class="dropdown-content">
Overview
Review
Footer
</div>
</div>
<button id="darkButton" style="position: absolute;
bottom: 0; margin-left: 10%;" class="button" onclick="dark()">Dark mode</button>
</div>
<br>
<!-- Slideshow container -->
<h1 > Dragon Ball Super: Broly Review</h1>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%;height: 500px;">
<div class="text">Poster</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%;height: 500px;">
<div class="text">Broly rage</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%;height: 500px;">
<div class="text">Gogeta kamehameha</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div>
<h2 id="overview">Overview</h2>
<p> <b>Ball Super: Broly</b> is essentially broken up into <b>two halves,</b> the first of which covers Broly&apos; s traumatic childhood and the end of the Saiyan race. What&apos; s exciting here is that this is familiar territory
that would make most Dragon Ball fans groan on any other occasion, yet Dragon Ball Super: Broly finds an<b> entertaining and efficient </b>way to condense all of that clutter. Broly takes this opportunity to rewrite
all of <b> Dragon Ball&apos; s</b> lingering plotlines and attempts to resolve several storylines that the series has hinted at in the past, like Frieza&apos; s relationship with the Saiyan race, Bardock&apos; s history, and the whole
Broly debacle.</p>
</div>
<div>
<iframe class="center" width="1000px" height="500px" src="https://www.youtube.com/embed/FHgm89hKpXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="review">The review</h2>
<p>Dragon Ball Super: Broly knows how much its fans want Gogeta and that there are nearly as many expectations behind Gogeta as there are with Broly. The film makes a meal out of the fusion sequence and doesn&apos; t shy away from the technique&apos; s tricky learning curve and that the process can sometimes be full of imperfections. It basically takes everything that Fusion Reborn did with the character, but does it better. The super-powered character makes for the perfect climax to an already exciting film. During the whole trial and error section of the fusion process, Frieza successfully holds down the fort and gets to engage in an aggressive fight against Broly. It&apos; s an effective way to add some variety to the movie&apos; s battle scenes as well as a way to not lose any action during the more comedic fusion training sequence.
<br><br>
All of these fights are so entertaining because of the outstanding animation that&apos; s featured in the film. Sequences like baby Goku&apos; s arrival on Earth, Vegeta and Goku&apos; s first sparring match, and all of the Broly fights just look gorgeous. Dragon Ball Super has started to feature more engaging, impressive fight choreography throughout the end of its run, but the material here is on a whole other level. The camera weaves through and around battles without restriction, making it feel like the action never stops moving. It&apos; s really quite something.
<br><br>
<img class="center" src="fight.webp" alt="">
<br><br>
The animation, action, and character development are the film&apos; s priorities, but there&apos; s still a lively sense of humor in the movie. Bulma and Frieza&apos; s similar Dragon Ball wishes are not only the best potential wishes from the entire series but the strongest gags from the film, too. All of this is further punctuated by Norihito Sumitomo&apos; s incredible score. Sumitomo&apos; s work on Dragon Ball movies has only gotten better, but Broly&apos; s score is definitely the strongest of the lot. The theme for Gogeta, “Gogeta Vs. Broly,” is not only a memorable track but it also repeatedly shouts Gogeta&apos; s name out in celebration. The film&apos; s major theme song by Daichi Miura, “Blizzard,” is grand stuff, too.
<br><br>
Dragon Ball Super: Broly is an absolute triumph on every front. It sets a new standard for what&apos; s possible in Dragon Ball movies and not only does it present an effective new story, it fills in gaps in old ones, too. It&apos; s packed with fan service for dedicated viewers, but still features plenty of surprises. It&apos; s a pleasure to watch and it&apos; s extremely gratifying to see that there&apos; s still lots of life left in this franchise, even if it just becomes a film series.
</p>
</div>
<div class="center" >
<input type="text" id="user-name" placeholder="Enter Username">
<input id="comment-title" type="text" placeholder="Enter comment" />
<button id="add-comment" onclick="addComments()">Add Comment</button>
</div>
<div style="margin-top: 30px;" id="comment-List"></div>
<div id="footer">
<div>
<p class="made">Made by Guy</p>
</div>
<div>
<p class="copyright">© Guy reviews· All rights reserved</p>
</div>
<div>
<button id="button" style="display: block;" class="button" class="center" onclick="up()">Top</button>
</div>
</div>
<script src="DBS.js"></script>
</body>
</html>

This works, changed render(), deleteComment() and const -> let Comments
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function up(){
window.scrollTo({top:0,behavior:'smooth'});
}
function dark(){
var element = document.body;
element.classList.toggle("dark-mode");
}
let Comments = [{user:'Nice guy',title:'Love this movie',id:'id1'},{user:'cool guy', title:'Best DBS movie ever',id:'id2'},{user:'Random guy' ,title: 'Borly was sooooooooo cooooool',id:'3'}];
render();
function addComments() {
const textbox = document.getElementById('comment-title');
const title = textbox.value;
const userName = document.getElementById('user-name');
const user = userName.value;
const id = new Date().getTime().toString();
Comments.push({
title:title,
user:user,
id:id
});
render();
}
function deleteComment(event){
const deleteButton = event.target;
const idToDelete = deleteButton.id;
Comments= Comments.filter(function(comment){
if (comment.id === idToDelete){
document.getElementById(comment.id).style.display = "none"
return false
}else{
return true;
}
});
}
function render() {
// reset our list
document.getElementById('comment-List').innerHTML = '';
Comments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment.user +': '+comment.title;
element.style.textAlign = 'center'
element.style.marginLeft='30%'
element.style.marginRight='30%'
element.style.padding='20px'
element.style.fontFamily = 'Albert Sans, sans-serif';
element.style.marginBottom = '20px'
element.style.border='1px solid'
element.style.borderRadius='20px'
element.style.borderColor='blue'
element.setAttribute("id", comment.id);
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Delete';
deleteButton.onclick = deleteComment;
deleteButton.id = comment.id;
element.appendChild(deleteButton);
const commmentsList = document.getElementById('comment-List');
commmentsList.appendChild(element);
});
}
body{
margin: 0px;
background-color: #f0833a;
}
h1,h2,h3,h4,h5{
text-align: center;
font-family: 'Poppins', sans-serif;
}
p{
font-family: 'Albert Sans', sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.logo{
width: 150px;
}
/* Dropdown Button */
.dropbtn {
padding: 16px;
background-color: #f0833a;
color: white;
font-size: 16px;
font-family: 'Albert Sans', sans-serif;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f0833a;}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #1dc40a;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#footer{
margin-top: 20px;
background-color: black;
padding-bottom: 100px;
color: #f0833a;
}
.copyright{
float: right;
}
.made{
float: left;
}
.button{
background-color: #f0833a;
margin-left: auto;
margin-right: auto;
color: white;
border-width: 0px;
height: 36px;
width: 74px;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.15s;
color: 0.15s;
}
html {
scroll-behavior: smooth;
}
#nav{
min-height: 150px;
position: relative;
}
.dark-mode {
background-color: black;
color: white;
}
#add-comment{
background-color: black;
color: white;
border-width: 0px;
cursor: pointer;
vertical-align: top;
border-radius: 20px;
padding: 10px;
display: inline-block;
}
#add-comment:active{
opacity: 0.7;
}
#comment-title{
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
#user-name{
margin-left: 20%;
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
<!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>Rahim reviews</title>
<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=Albert+Sans&family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="DBS.css">
</head>
<body>
<div id="nav" style="background-color: black">
<img class="logo" src="pngwing.com.png" alt="">
<div class="dropdown">
<button id="dropbtn" class="dropbtn">Home</button>
<div class="dropdown-content">
Overview
Review
Footer
</div>
</div>
<button id="darkButton" style="position: absolute;
bottom: 0; margin-left: 10%;" class="button" onclick="dark()">Dark mode</button>
</div>
<br>
<!-- Slideshow container -->
<h1 > Dragon Ball Super: Broly Review</h1>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%;height: 500px;">
<div class="text">Poster</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%;height: 500px;">
<div class="text">Broly rage</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%;height: 500px;">
<div class="text">Gogeta kamehameha</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div>
<h2 id="overview">Overview</h2>
<p> <b>Ball Super: Broly</b> is essentially broken up into <b>two halves,</b> the first of which covers Broly&apos; s traumatic childhood and the end of the Saiyan race. What&apos; s exciting here is that this is familiar territory
that would make most Dragon Ball fans groan on any other occasion, yet Dragon Ball Super: Broly finds an<b> entertaining and efficient </b>way to condense all of that clutter. Broly takes this opportunity to rewrite
all of <b> Dragon Ball&apos; s</b> lingering plotlines and attempts to resolve several storylines that the series has hinted at in the past, like Frieza&apos; s relationship with the Saiyan race, Bardock&apos; s history, and the whole
Broly debacle.</p>
</div>
<div>
<iframe class="center" width="1000px" height="500px" src="https://www.youtube.com/embed/FHgm89hKpXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="review">The review</h2>
<p>Dragon Ball Super: Broly knows how much its fans want Gogeta and that there are nearly as many expectations behind Gogeta as there are with Broly. The film makes a meal out of the fusion sequence and doesn&apos; t shy away from the technique&apos; s tricky learning curve and that the process can sometimes be full of imperfections. It basically takes everything that Fusion Reborn did with the character, but does it better. The super-powered character makes for the perfect climax to an already exciting film. During the whole trial and error section of the fusion process, Frieza successfully holds down the fort and gets to engage in an aggressive fight against Broly. It&apos; s an effective way to add some variety to the movie&apos; s battle scenes as well as a way to not lose any action during the more comedic fusion training sequence.
<br><br>
All of these fights are so entertaining because of the outstanding animation that&apos; s featured in the film. Sequences like baby Goku&apos; s arrival on Earth, Vegeta and Goku&apos; s first sparring match, and all of the Broly fights just look gorgeous. Dragon Ball Super has started to feature more engaging, impressive fight choreography throughout the end of its run, but the material here is on a whole other level. The camera weaves through and around battles without restriction, making it feel like the action never stops moving. It&apos; s really quite something.
<br><br>
<img class="center" src="fight.webp" alt="">
<br><br>
The animation, action, and character development are the film&apos; s priorities, but there&apos; s still a lively sense of humor in the movie. Bulma and Frieza&apos; s similar Dragon Ball wishes are not only the best potential wishes from the entire series but the strongest gags from the film, too. All of this is further punctuated by Norihito Sumitomo&apos; s incredible score. Sumitomo&apos; s work on Dragon Ball movies has only gotten better, but Broly&apos; s score is definitely the strongest of the lot. The theme for Gogeta, “Gogeta Vs. Broly,” is not only a memorable track but it also repeatedly shouts Gogeta&apos; s name out in celebration. The film&apos; s major theme song by Daichi Miura, “Blizzard,” is grand stuff, too.
<br><br>
Dragon Ball Super: Broly is an absolute triumph on every front. It sets a new standard for what&apos; s possible in Dragon Ball movies and not only does it present an effective new story, it fills in gaps in old ones, too. It&apos; s packed with fan service for dedicated viewers, but still features plenty of surprises. It&apos; s a pleasure to watch and it&apos; s extremely gratifying to see that there&apos; s still lots of life left in this franchise, even if it just becomes a film series.
</p>
</div>
<div class="center" >
<input type="text" id="user-name" placeholder="Enter Username">
<input id="comment-title" type="text" placeholder="Enter comment" />
<button id="add-comment" onclick="addComments()">Add Comment</button>
</div>
<div style="margin-top: 30px;" id="comment-List"></div>
<div id="footer">
<div>
<p class="made">Made by Guy</p>
</div>
<div>
<p class="copyright">© Guy reviews· All rights reserved</p>
</div>
<div>
<button id="button" style="display: block;" class="button" class="center" onclick="up()">Top</button>
</div>
</div>
<script src="DBS.js"></script>
</body>
</html>

Related

Insert/Append single child element to multiple parent elements with vanilla javascript

I have 5 div's with the class .faq, how to append a new child element at the end of each divs
This is what i have so far:
const faqBoxes = document.querySelectorAll('.faq')
const toggler = document.createElement('i')
toggler.className = `toggler fas fa-chevron-down`
faqBoxes.forEach(box => {
// box.insertAdjacentHTML('beforeend', toggler)
-- returned [object HTMLElement]
// box.appendChild(toggler)
-- but this appends the new element only on the last div
})
i am adding only a single div, instead of 5 for the sake of simplicity
HTML(before inserting element):
<div class="faq">
<h3 class="faq-title">How many team members can i invite?</h3>
<p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
HTML(After inserting element):
<div class="faq">
<h3 class="faq-title">How many team members can i invite?</h3>
<p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
<i class="toggler fas fa-chevron-down></i> <!-- new element-->
</div>
const faqContainer = document.querySelector('.faq-box')
const faqBoxes = document.querySelectorAll('.faq')
const displayIcons = () => {
const toggler = document.createElement('i')
toggler.className = `toggler fas fa-chevron-down`
faqBoxes.forEach(box => {
// box.insertAdjacentHTML('beforeend', toggler)
box.appendChild(toggler)
})
}
window.addEventListener('DOMContentLoaded', displayIcons)
const showFaqContent = event => {
if (event.target.classList.contains('toggler') || event.target.classList.contains('faq-title')) {
const parentElem = event.target.parentElement
parentElem.classList.add('active')
}
}
faqContainer.addEventListener('click', showFaqContent)
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'poppins';
background: #ECE9E6;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFFFFF, #ECE9E6);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.main-container {
height: 100%;
width: 90%;
}
.main-container h1 {
position: relative;
color: rgb(54, 94, 128);
}
.main-container h1 i {
font-size: 1.5rem;
}
.main-container h1::before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
background-color: rgba(70, 131, 180, 0.507);
}
.main-container h1::after {
content: '';
position: absolute;
width: 25%;
height: 3px;
bottom: 0px;
left: 0;
background-color: rgb(70, 131, 180);
}
.faq-box {
background-color: #fff;
border-radius: 8px;
box-shadow: 4px 4px 8px hsl(0, 0%, 80%);
}
.faq {
position: relative;
padding: .8rem 1rem;
margin: .5rem;
border-bottom: .5px solid rgba(221, 221, 221, 0.829);
}
.faq-title {
color: steelblue;
font-weight: 400;
cursor: pointer;
}
.faq.active h3 {
font-weight: bold;
}
.faq-content {
display: none;
font-family: 'nunito', 'sans-serif';
background-color: rgb(235, 235, 235);
border-radius: 5px;
border-left: 5px solid rgb(54, 94, 128);
margin-top: 10px;
padding: 1rem;
font-size: .9rem;
color: hsl(208, 41%, 20%);
transition: display .4s ease-in;
}
.faq.active .faq-content {
display: block;
}
.faq .toggler {
position: absolute;
top: 1.25rem;
right: 1rem;
cursor: pointer;
}
<!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>Day-12 Faq Boxes</title>
<!-- google api/fonts -->
<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=Nunito:wght#300;400;600;700&display=swap" rel="stylesheet">
<!-- custom css -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="main-container">
<h1><i class="fas fa-info-circle"></i> FAQ</h1>
<div class="faq-box hide">
<div class="faq active">
<h3 class="faq-title">How many team members can i invite?</h3>
<p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
</div>
<div class="faq">
<h3 class="faq-title">What is the maximux file upload size?</h3>
<p class="faq-content">No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="faq">
<h3 class="faq-title">How do i reset my password?</h3>
<p class="faq-content">Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
</div>
<div class="faq">
<h3 class="faq-title">Can i cancel my subscription?</h3>
<p class="faq-content">Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="faq">
<h3 class="faq-title">Do you provide any additional support?</h3>
<p class="faq-content">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
<!-- fontawesome script -->
<script src="https://kit.fontawesome.com/39350fd9df.js"></script>
<!-- Custom Javascript -->
<script src="main.js" type="text/javascript"></script>
</body>
Add your createElement code to your loop so you create one new element on each iteration.
const faqBoxes = document.querySelectorAll('.faq');
faqBoxes.forEach(box => {
const toggler = document.createElement('i');
toggler.textContent = 'Hallo';
toggler.className = 'red';
box.appendChild(toggler);
});
.red { color: red; }
<div class="faq" />
<div class="faq" />
<div class="faq" />

How to make my div(a relative one) in center of a page and another div go below it, not under it(without make it fixed)

Here I have a Div(div1 in figure) that I want it to center in the page(now I used margin-left to forced it at a center place of my own pc, but when other person with different resolution screen open it, it is not at the center.) I have tried make each relative/fixed/absolute/padding/margin, and search online for two days, but either each part in div1 falls apart or it doesn't work.
And At the same time, I added a text div(div2) and want it to below this current div(div1), and it doesn't goes below it, it goes hide under div 1. I searched online and know that it will do this if there is a relative/fixed position div before it, it will be ignored. So i can only use fixed position for div 2 as well. which I don't want it to.And I also want it go to the center of the page.
The main problem here is my page is not fix every screen and at the center.
view example page at http://circleofallnations.ca/
the big circle is the div1, 5 parts in it and form that circle, thats why div1 has to be a relative div
the text under the big circle is div 2.(you can see it is a picture on texting page, and I changed it to a text div in below code.)
Here is the example figure
html code:
<!DOCTYPE html>
<html>
<title>circle of all nations home page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a href ="http://www.circleofallnations.ca/canhome">
<img onmouseover="circle2()" onmouseout="circle1()" src="pictures/circle.png" alt="centre circle" class="circle" id="circle"></a>
<a href ="http://develop.gcrc.carleton.ca:8053/index.html">
<img onmouseover="above2()" onmouseout="above1()" src="pictures/above.png" alt="above" class="above" id="above"></a>
<a href ="https://www.asinabka.com/">
<img onmouseover="left2()" onmouseout="left1()" src="pictures/left.png" alt="left" class="left" id="left"></a>
<div class="rightCon" onmouseenter="right2()" onmouseleave="right1()">
<img src="pictures/right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text1"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text1"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
<div class="bottomCon" onmouseenter="bottom2()" onmouseleave="bottom1()">
<img src="pictures/bottom.png" alt="bottom" class="bottom" id = "bottom">
<div id="bottomtext"><center>
<div id= "bottom1" class = "text2">Circle of All Nations</div>
<div id= "bottom2" class = "text2">William Commanda</div>
<div id= "bottom3" class = "text2">William Commanda Legacy - Asinabka</div>
<div id= "bottom4" class = "text2">Romola Vasantha Thumbadoo</div>
<div id= "bottom5" class = "text2">Romola's Nature CAN Photo-Art</div></center>
</div>
</div>
<div class="footer" style="color:#FFFFFF; font-family:Arial black;font-size:13pt; "><center>
<div><center>WILLIAM COMMANDA LEGACY</div>
<div><center>A CIRCLE OF ALL Nations</div>
<div><center>GLOBAL ECO PEACE COMMUNITY</div>
<div><center>All the original material on this website is © 2020</div>
<div><center>Asinabka and Circle of All nations</div>
<div><center>Romola#circleofallnations.ca</div>
<div><center>All rights reserved</div>
</div>
<div class="lastLine">
CIRCLE OF ALL NATIONS (CAN) 2020 HOME PAGE |>
<a id="sites">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>CAN ARCHIVAL SITES |</option>
<option value="http://www.angelfire.com/ns/circleofallnations/page3.html">2000 Archival Site | </option>
<option value="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html">2012 Archival Site |</option>
</select></a>>
ASINABKA |>
DIGITAL ATLAS |
<a id="facebooks">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>FACEBOOK PAGES</option>
<option value="https://www.facebook.com/circleofallnations/">Circle of All Nations |</option>
<option value="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda |</option>
<option value="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy-Asinabka |</option>
<option value="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo |</option>
<option value="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art |</option>
</select></a>
</div>
<div class="under" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<div class="under2" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<script src="landingpage.js"></script>
</body>
</html>
and here is css sheet
body{
background-color: black;
}
img{
padding: 0px;
transition: transform .2s;
}
a{
color:black;
text-decoration: none;
}
pre{
font-family: "Arial black", sans-serif;
font-size: 25px;
}
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
color: #FFFF00;
background-color: transparent;
border-color: transparent;
cursor: pointer;
font-size: 13pt;
}
select option {
margin: 40px;
background: black;
color: #FFFF00;
border-color: black;
font-size: 13pt;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
.text1{
font-family: "Arial black", sans-serif;
}
.text2{
font-family: "Arial black", sans-serif;
font-size: 15px;
}
a:hover {
color: blue;
}
.container{
position:relative;
margin-left:15%;
background-color: black;
}
.circle{
position:absolute;
left:480px;
top: 107px;
}
.above{
position: absolute;
top:10px;
left:437px;
}
.left{
position: absolute;
left:337px;
top:109px;
}
.right{
position: absolute;
left:813px;
top:109px;
}
.bottom{
position: absolute;
top:485px;
left:437px;
}
#first{
font-size: 45px;
}
#second{
font-size: 25px;
}
#last{
font-size: 12px;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:163px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.bottomCon {
position: relative;
}
#bottomtext{
z-index: 10;
position: absolute;
left:520px;
top:545px;
opacity: 0;
}
.lastLine{
position: absolute;
top:930px;
left:450px;
}
.under{
position: absolute;
top:900px;
left:450px;
}
.under2{
position: absolute;
top:900px;
left:1170px;
}
js code(not too important)
if(performance.navigation.type == 2){
location.reload(true);
}
function circle2(){
document.getElementById("circle").src = "pictures/circle1.png";
}
function circle1(){
document.getElementById("circle").src = "pictures/circle.png";
}
function right2(){
document.getElementById("right").src = "pictures/right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "pictures/right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
function bottom2(){
document.getElementById("bottom").src = "pictures/bottom2.png";
document.getElementById("bottomtext").style.opacity=1;
}
function bottom1(){
document.getElementById("bottom").src = "pictures/bottom.png";
document.getElementById("bottomtext").style.opacity=0;
}
function above2(){
document.getElementById("above").src = "pictures/above2.png";
}
function above1(){
document.getElementById("above").src = "pictures/above.png";
}
function left2(){
document.getElementById("left").src = "pictures/left2.png";
}
function left1(){
document.getElementById("left").src = "pictures/left.png";
}
Please help, thank you in advance.
Hello There! I think you should try margin: auto property. First of all, remove the position:relative and margin left properties from your container. And then add a width or height to your container(according to your need), and add margin:auto to it. Here's an example code:
.container {
display: block;
width: 500px;
height: auto;
margin: auto;
background-color: black;
}
This will definitely center align it.
And if you want to make your div go to next line, just add display: block; property to it. And if it gets hide under div1, add z-index: +1 property to it. Try all these edits, and let me know if it fixed your problem.

Make dynamic fontsize using javascript to fit into a button

I have a button of fixed size and various chunks of text. The length of the texts is different. How can I make the size of the text font change dynamically according to its length in order to fit the button boundaries properly? Thank you.
Well, depends. Is the height fix as well? If both height and width are fixed, you will have to calculate the fontsize via javascript.
In most of the cases two or three if conditions should be absolutely sufficient for the specific usecase.
function font_size_adjust () {
// Grab the string
var string = $('#button_text').text()
// Get the length in characters of the string
var string_size = string.length
// Build variable to change attribute
var font_size = 0
// Define logic for resizing, adapt this to your personal needs
if (string_size < 60) {
fontsize = '2vw';
} else if (string_size > 60) {
fontsize = '4vw';
} else {}
// Change fontsize
$('#button_text').css('font-size', fontsize)
}
// Call the function where- and whenever needed:
font_size_adjust();
// Example stuff
$('#toggle_small').click(function () {
$('#button_text').text('Now I am small again!')
font_size_adjust();
})
$('#toggle_big').click(function () {
$('#button_text').text('Now I am large again! Lets get this rollin! rollin! rollin! rollin!')
font_size_adjust();
})
#ctn {
display: flex;
float: left;
}
#button {
width: 45vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
font-family: Varela Round;
color: #FFF;
background: linear-gradient(126deg, rgba(143,61,217,1) 12%, rgba(109,35,177,1) 43%, rgba(101,34,162,1) 72%);
}
#ctn_toggle {
display: flex;
float: left;
}
.toggle {
background-color: lightblue;
font-size: 3vw;
padding: 10px;
border-radius: 25px;
width: 11vw;
text-align: center;
margin-right: 2vw;
font-family: Varela Round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<html>
<body>
<div id="ctn">
<div id="button">
<p id="button_text">Make me small and big all day long this is so exciting! Let's go broooh!</p>
</div>
</div>
<div id="ctn_toggle">
<div id="toggle_small" class="toggle">
<p id="button_small">Click me to shrink!</p>
</div>
<div id="toggle_big" class="toggle">
<p id="button_big">Click me to expand!</p>
</div>
</div>
</body>
</html>
Otherwise, these are the options... :
#ctn {
display: flex;
float: left;
}
#button {
width: 20vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text {
font-size: 4vw;
}
#button2 {
width: 20vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text2 {
}
#button3 {
width: 20vw;
height: 10vh;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text3 {
font-size: 4vw;
}
#button4 {
width: 20vw;
height: 10vh;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
}
#button_text4 {
}
<html>
<body>
<div id="ctn">
<div id="button">
<p id="button_text">Fix button width and fix font-size</p>
</div>
<div id="button2">
<p id="button_text2">Fix button width and no specific font-size</p>
</div>
<div id="button3">
<p id="button_text3">Fix button width, fix button height and fix font-size</p>
</div>
<div id="button4">
<p id="button_text4">Fix button width, fix button height and no font-size</p>
</div>
</div>
</body>
</html>

Vanilla JS left to right toggle animation

I am a newbie to code and I am learning vanilla JS. I created this drawer navigation with a circle that moves from left tor right, but there is an issue. I uploaded the current state here: http://setup.industries/masquarade/
The issue that gets me stuck:
The first click on the hamburger nav icon doesn't open the drawer and the animation is switched. I suspect the problem to be in the if(open) as the open var doesn't truly capture the toggle state with open = header.style.width == '0%' After the initial bug, it works fine. A real head scratcher for me.
If you have other tips for better code, or point out my bad practices, I'd be happy to learn.
--
Edit 1: I have added the full code to this question. I am not sure how I can make the ellipse visible, i linked directly to hosted url.
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.style.width == '0%'
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0px)' },
{ transform: 'translateX('+ width + 'px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: 'translateX('+ width + 'px)' },
{ transform: 'translateX(0px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
header.style.width = "100%";
moveEllipseRight();
} else {
header.style.width = '0%';
moveEllipseLeft();
}
}
// if (open) {
// ellipse.classList.remove("ellipse_left");
// ellipse.classList.add("ellipse_right");
// } else {
// ellipse.classList.remove("ellipse_right");
// ellipse.classList.add("ellipse_left");
// }
// let ellipse = document.getElementById("ellipse");
// let pos = 0;
// let id = setInterval(frame, 5);
// function myMove() {
// console.log('Hello')
// var ellipse = document.getElementById("ellipse");
// var pos = -200;
// var id = setInterval(frame, 1);
// let width = document.body.clientWidth; // - $('#mydiv').width();
//
// function frame() {
// if (pos == width - 200) {
// clearInterval(id);
// } else {
// pos++;
// ellipse.style.left = pos + "px";
// }
// }
// }
// information tabs //
function openTab(evt, tab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
#media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')">Tickets and pricing </li>
<li class="tablinks" onmouseover="openTab(event, 'Location')">Location</li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')">Transportation</li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')">House rules</li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')">Terms and conditions</li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')">Contact</li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')">Partners</li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
Buy Tickets
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
Buy Tickets
More Information
</div>
</div>
</body>
</html>
The value for element.style is set by using either javascript or inline style attribute, css will not set the value for you. Therefore, if you are using a css to style the header's width, the value for header.style.width would be an empty string initially, making the expression header.style.width == '0%' to be falsy.
You can add a console.log(document.getElementById('header').style.width) to check the value yourself.
As a result, the first time you click the hamburger, the else block in the conditional will always be ran.
After the first time you click the hamburger, document.getElementById('header').style.width is now being set through javascript, so the subsequent clicks will behave as expected.
To solve the problem, you can either use an inline style attribute to style your header's width, or you can get the style using javascript with
const headerWidth = getComputedStyle(document.getElementById('header')).width;
const open = headerWidth === '0px' || headerWidth === '0%';
You had your open logic reversed. Simply changing the order of 100% / 0% fixes this.
Improvement tips:
checking the elements state by using a class instead of the actual CSS. (Adding an open class to the element when it is open, and removing it when it is not open)
By doing the above, you can move the manipulation of width to the CSS class open: header.open {width: 100%}
By using "`" and encapsulating your variables in ${} you can get rid of many "+" like so: { transform: `translateX(${width}px)` }
Can be seen in the snippet:
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.className.includes('open')
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0)' },
{ transform: `translateX(${width}px)` }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: `translateX(${width}px)` },
{ transform: 'translateX(0)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
moveEllipseLeft();
header.classList.remove("open");
} else {
moveEllipseRight();
header.classList.add("open");
}
}
// information tabs //
function openTab(evt, tab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
#media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Header animation css */
header.open {
width: 100%;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')">Tickets and pricing </li>
<li class="tablinks" onmouseover="openTab(event, 'Location')">Location</li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')">Transportation</li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')">House rules</li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')">Terms and conditions</li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')">Contact</li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')">Partners</li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
Buy Tickets
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
Buy Tickets
More Information
</div>
</div>
</body>
</html>

Why are my images hiding the footer?

there.
I'm building a web site, and I added a "cycler" that makes the main image in the body fade into other images in a cycle. But, after adding the "cycler," the images hide the footer at the bottom. I don't know how to fix it. (I do use jQuery in this site.) How can I make the images fade into one another without causing the "cycler" to hide the footer at the bottom?
I've attached an image here:
And here's my code:
function cycleImages(){
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 5000);
})
/*Resize the main image.*/
.content img {
width: 100%;
height: 600px;
}
#cycler {
position: relative;
}
#cycler img {
position: absolute;
z-index: 1;
}
#cycler img.active {
z-index: 3;
}
/*Establish the padding for the introduction.*/
#introduction {
padding: 30px 150px 30px 150px;
}
/*Embolden and italicize the h3 in the intro.*/
#introduction h3 {
font-weight: bold;
font-style: italic;
}
/*Increase the font size for p in the intro.*/
#introduction p {
font-size: 20px;
}
/*Style the links in the intro.*/
#introduction a {
color: #F70736;
font-weight: bold;
}
/*Customize the hover action of links in the intro.*/
#introduction a:hover {
color: mediumpurple;
text-decoration: none;
}
/*Style the copyright in the footer.*/
.copyright {
width: 100%;
margin-top: 20px;
margin-bottom: 0;
text-align: center;
color: #F70736;
background-color: #F5F4EF;
}
/*Style the copyright.*/
.copyright p {
margin-top: 30px;
margin-bottom: 0;
padding-top: 30px;
padding-bottom: 30px;
font-size: 16px;
}
/*Embolden the name in copyright.*/
#myName {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="content">
<div id="cycler">
<img class="active" src="Images/1stPic.jpg" alt="Venus Fly Trap" />
<img src="Images/2ndPic.jpg" alt="Croatia" />
<img src="Images/3rdPic.jpg" alt="Ras" />
<img src="Images/4thPic.jpg" alt="Portugal" />
</div>
<div id="introduction">
<h3>Headline.</h3>
<p>Lorem Ipsum bla bla bla
</p>
<p>Learn more about my work and write to me at #gmail.com.</p>
</div>
</div>
<!--BEGIN FOOTER-->
<footer>
<div class="copyright">
<p>© <span id="myName"> Name Here</span> 2017</p>
</div>
</footer>
<!--END FOOTER-->
footer{
display:flex;
position:relative;
z-index:999;
height:20vh;
}

Categories