There's a <div> thats created upon a click function and it animates into to the other side of the screen. Afterwards, on "animationend", it is being deleted. However, I want to append the created element either on "animationend" or "animationstart" onto my div/class of recentTaps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Raleway"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/style.css" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tap Music</title>
</head>
<div class="recent">
<h2>Recent Taps</h2>
<hr />
<span id="recentTaps" class="recentTaps">stuf</span>
</div>
<div class="visual"></div>
<div class="pads">
<div class="pad1">
<audio src="./assets/sounds/bubbles.mp3" class="sound"></audio>
</div>
<div class="pad2">
<audio class="sound">
<source src="./assets/sounds/ufo.mp3" />
</audio>
</div>
<div class="pad3">
<audio class="sound">
<source src="./assets/sounds/clay.mp3" />
</audio>
</div>
<div class="pad4">
<audio class="sound">
<source src="./assets/sounds/confetti.mp3" />
</audio>
</div>
<div class="pad5">
<audio class="sound">
<source src="./assets/sounds/glimmer.mp3" />
</audio>
</div>
<div class="pad6">
<audio class="sound">
<source src="./assets/sounds/moon.mp3" />
</audio>
</div>
</section>
Above, you can see my HTML code.
Below is my Javascript:
window.addEventListener("load", () => {
const sounds = document.querySelectorAll(".sound");
const pads = document.querySelectorAll(".pads div");
const visual = document.querySelector(".visual");
//const recent = document.getElementById("recentTaps");
const colors = [
"#60d394",
"#d36060",
"#c060d3",
"#d3d160",
"#6860d3",
"#60b2d3"
];
//lets get going with the sound here
pads.forEach((pad, index) => {
pad.addEventListener("click", function() {
sounds[index].currentTime = 0;
sounds[index].play();
createBubbles(index);
});
});
//Create a function that makes bubbles
const createBubbles = index => {
const bubble = document.createElement("div");
visual.appendChild(bubble);
bubble.style.backgroundColor = colors[index];
bubble.style.animation = "jump 3s ease";
bubble.addEventListener("animationend", function() {
visual.removeChild(bubble);
});
};
});
CSS is below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
}
hr {
border: 1px solid black;
width: 75%;
}
.recent {
height: 10vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.recent span {
width: 100%;
display: flex;
}
.app {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header h1 {
margin: 50px 0px 30px 0px;
text-align: center;
font-size: 40px;
}
header p {
font-size: 20px;
}
.pads {
background: lightblue;
width: 100%;
display: flex;
}
.pads > div {
height: 100px;
width: 100px;
flex: 1;
}
.pad1 {
background: #60d394;
}
.pad2 {
background: #d36060;
}
.pad3 {
background: #c060d3;
}
.pad4 {
background: #d3d160;
}
.pad5 {
background: #6860d3;
}
.pad6 {
background: #60b2d3;
}
.visual > div {
position: absolute;
bottom: 0%;
height: 50px;
width: 50px;
border-radius: 50%;
transform: scale(1);
z-index: -1;
}
#keyframes jump {
0% {
bottom: 0%;
left: 20%;
}
33% {
bottom: 60%;
left: 20%;
}
66% {
bottom: 60%;
left: 80%;
}
100% {
bottom: 0%;
left: 80%;
}
}
I've tried appendChild() on "animationend" and vice-versa. The console gives me an error. I've also tried, append(). I'm going for an append on my other div before it's deleted and while still deleting the element that created on the original div.
Related
I want to make a simple slider that will work by shifting position:right
I need to shift each picture by 250px, doing it through a cycle - the first picture shifts as needed, and all the others increase on each other, and go much further. Is it possible to somehow set the same indentation values in 250px to all elements in the loop?
codepen - https://codepen.io/dxxxxxxfly/pen/KKePaXW
<body>
<div class="slider_block">
<div class="btn_left"><button>Back</button></div>
<div class="slider_main">
<div class="slider_image">
<div class="imaga">
<img src="https://avatars.mds.yandex.net/i?id=6adf61533a32e0002e109f820f2895fa-5889001-images-thumbs&n=13&exp=1" alt="" class="image_slider">
<img src="https://dasart.ru/userdata/image/08/ab/08ab193e2f04fb47d02efef43ff53ce9.jpg" alt="" class="image_slider">
<img src="https://images.satu.kz/3628818_w640_h640_obves-hamann-tycoon.jpg" alt="" class="image_slider">
<img src="https://shop.ilovevalencia.ru/251-thickbox_default/arenda-kabrioleta-porsche-991-cabrio-v-valensii-ispaniya.jpg" alt="" class="image_slider">
</div>
</div>
</div>
<div class="btn_right"><button>Next</button></div>
</div>
<script src="script/script.js"></script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
.slider_block {
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.slider_image {
display: flex;
height: 123px;
width: 349px;
overflow: hidden;
}
.image_slider {
position: relative;
display: flex;
object-fit: cover;
width: 100%;
aspect-ratio: 480/169;
}
.btn_left > button,.btn_right > button {
border: none;
padding: 10px 15px;
margin: 25px;
cursor: pointer;
border-radius: 4px;
}
.imaga {
display: flex;
}
let right = 0;
const next = document.querySelector('.btn_right');
const image = document.querySelectorAll('.image_slider')
next.addEventListener('click', () => {
for(const items of image ) {
right += 250
items.style.right = right + 'px'
continue
}
})
So i don't have a clue how to work this out.
I want to have it work like so: If you click on one paw the modal opens and if you click on the second paw the modal of paw 1 closes. What do i have to add to the script to make it work? Right now the modal opens in th ebackground of the curretn active modal.
<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>Document</title>
<style type="text/css">
.infobox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
z-index: 200;
background-color: #D0D0CE;
width: 500px;
max-width: 80%;
}
.infobox.active {
transform: translate(-50%, -50%) scale(1);
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .7);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
.title {
padding: 0 10px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.infoheadline {
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
padding-left: 5px;
}
.infotext {
padding: 10px 15px;
font-family: 'Roboto', sans-serif;
}
.linesmall {
width: 20%;
height: 5px;
margin-left: 10px;
background-color: #FABB00;
}
.paw {
width: 42px;
height: 42px;
padding: 16px;
z-index: 1;
filter: drop-shadow(0px 0px 5px #ffffff);
}
</style>
</head>
<body>
<!--Pfote 1 Start-->
<div class="item one">
<div id="overlay"></div>
<input type="image" data-modal-target="#info1" src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png" alt="Pfote" class="paw">
<div id="info1" class="infobox eins">
<div class="title">
<h3 class="infoheadline">3.500 mal tierischer</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel, Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...</p>
</div>
</div>
<!--Pfote 1 Ende-->
<!--Pfote 2 Start-->
<div class="item two">
<div id="overlay"></div>
<input type="image" data-modal-target="#info2" src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png" alt="Pfote" class="paw">
<div id="info2" class="infobox zwei">
<div class="title">
<h3 class="infoheadline">588 Mrd. mal klimafreundlicher</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen CO<sub>2</sub> – und entziehen sie damit der Atmosphäre. (Zum Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).</p>
</div>
</div>
<!--Pfote 2 Ende-->
<script type="text/javascript">
//Start Modal One
const openModalButtonOne = document.querySelectorAll('[data-modal-target]')
const closeModalButtonOne = document.querySelectorAll('[data-close-button]')
const overlayOne = document.getElementById('overlay')
openModalButtonOne.forEach(button => {
button.addEventListener('click', () => {
const info1 = document.querySelector(button.dataset.modalTarget)
openModal(info1)
})
})
overlayOne.addEventListener('click', () => {
const info1 = document.querySelectorAll('.infobox.active')
info1.forEach(info1 => {
closeModal(info1)
})
})
closeModalButtonOne.forEach(button => {
button.addEventListener('click', () => {
const info1 = button.closest('.infobox')
closeModal(info1)
})
})
function openModal(info1) {
if (info1 == null) return
info1.classList.add('active')
overlayOne.classList.add('active')
}
function closeModal(info1) {
if (info1 == null) return
info1.classList.remove('active')
overlayOne.classList.remove('active')
}
//Start Modal Two
const openModalButtonTwo = document.querySelectorAll('[data-modal-target]')
const closeModalButtonTwo = document.querySelectorAll('[data-close-button]')
const overlayTwo = document.getElementById('overlay')
openModalButtonTwo.forEach(button => {
button.addEventListener('click', () => {
const info2 = document.querySelector(button.dataset.modalTarget)
openModal(info2)
})
})
overlayTwo.addEventListener('click', () => {
const info2 = document.querySelectorAll('.infobox.active')
info2.forEach(info2 => {
closeModal(info2)
})
})
closeModalButtonTwo.forEach(button => {
button.addEventListener('click', () => {
const info2 = button.closest('.infobox')
closeModal(info2)
})
})
function openModal(info2) {
if (info2 == null) return
info2.classList.add('active')
overlayTwo.classList.add('active')
}
function closeModal(info2) {
if (info2 == null) return
info2.classList.remove('active')
overlayTwo.classList.remove('active')
}
</script>
</body>
</html>```
I think you tried to overcomplicate the stuff. Here's a modified version of your code that behaves as expected:
<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>Document</title>
<style type="text/css">
.infobox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
z-index: 200;
background-color: #d0d0ce;
width: 500px;
max-width: 80%;
}
.infobox.active {
transform: translate(-50%, -50%) scale(1);
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
.title {
padding: 0 10px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.infoheadline {
text-transform: uppercase;
font-family: "Roboto Condensed", sans-serif;
padding-left: 5px;
}
.infotext {
padding: 10px 15px;
font-family: "Roboto", sans-serif;
}
.linesmall {
width: 20%;
height: 5px;
margin-left: 10px;
background-color: #fabb00;
}
.paw {
width: 42px;
height: 42px;
padding: 16px;
z-index: 1;
filter: drop-shadow(0px 0px 5px #ffffff);
}
</style>
</head>
<body>
<div id="overlay"></div>
<!--Pfote 1 Start-->
<div class="item one">
<input
type="image"
data-modal-target="#info1"
src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png"
alt="Pfote"
class="paw"
/>
<div id="info1" class="infobox eins">
<div class="title">
<h3 class="infoheadline">3.500 mal tierischer</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">
Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel,
Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...
</p>
</div>
</div>
<!--Pfote 1 Ende-->
<!--Pfote 2 Start-->
<div class="item two">
<input
type="image"
data-modal-target="#info2"
src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png"
alt="Pfote"
class="paw"
/>
<div id="info2" class="infobox zwei">
<div class="title">
<h3 class="infoheadline">588 Mrd. mal klimafreundlicher</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">
Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen
CO<sub>2</sub> – und entziehen sie damit der Atmosphäre. (Zum
Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).
</p>
</div>
</div>
<!--Pfote 2 Ende-->
<script type="text/javascript">
//Start Modal One
const openModalButtons = document.querySelectorAll("[data-modal-target]");
const closeModalButtons = document.querySelectorAll(
"[data-close-button]"
);
const overlay = document.querySelector("#overlay");
const closeActiveModals = () => {
const info = document.querySelectorAll(".infobox.active");
info.forEach((info) => {
closeModal(info);
});
};
openModalButtons.forEach((button) => {
button.addEventListener("click", () => {
closeActiveModals();
const info = document.querySelector(button.dataset.modalTarget);
openModal(info);
});
});
overlay.addEventListener("click", closeActiveModals);
closeModalButtons.forEach((button) => {
button.addEventListener("click", () => {
const info = button.closest(".infobox");
closeModal(info);
});
});
function openModal(info) {
if (info == null) return;
info.classList.add("active");
overlay.classList.add("active");
}
function closeModal(info) {
if (info == null) return;
info.classList.remove("active");
overlay.classList.remove("active");
}
</script>
</body>
</html>
Note that you don't need to add event listeners twice as you're querying the DOM with querySelectorAll and then iterating through them to add event listeners. Also, for the same exact reason, you don't need to add all of the functions such as openModal twice neither.
Just don't try to make it complicated. It's very simple.
easy solution handle the click event on overlay, and stop click event propagation from the modal itself
I am trying to make a to-do list by myself and it's going pretty well, but I can't remove the correct div. It always removes the first one in the pile. I am not creating new divs, I am basically cloning a template that I've made and setting the display as none.
let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())
function addTarefa() {
let divtarefa = document.getElementById('TarefaEscondida')
clone = divtarefa.cloneNode(true)
clone.id = 'tarefa'
clone.class = "tarefa"
container.appendChild(clone)
clone.setAttribute('display', 'flex')
clone.setAttribute('class', 'tarefa')
clone.setAttribute('id', 'tarefa')
}
function suma() {
let father = document.getElementById('container')
let son = document.getElementById('tarefa')
let apaga = father.removeChild(son)
}
* {
margin: 0;
box-sizing: border-box;
}
body {
background-color: aqua;
}
header {
text-align: center;
background-color: rgb(255, 208, 0);
}
#container {
display: flex;
background-color: beige;
margin-top: 15px;
margin-left: 15%;
margin-right: 15%;
height: 90vh;
align-items: stretch;
padding-top: 8px;
flex-direction: column;
flex-wrap: nowrap;
gap: 8px;
}
.tarefa {
padding: 5px;
background-color: brown;
margin-left: 8px;
margin-right: 8px;
display: flex;
}
.texto {
border: none;
margin-left: 8px;
background-color: brown;
color: white;
width: 90%;
padding: 8px;
}
::placeholder {
color: white;
opacity: 1;
}
.remove {
float: right;
height: 40px;
width: 40px;
color: #333;
cursor: pointer;
}
#botao {
position: fixed;
background-color: brown;
height: 80px;
width: 80px;
border-radius: 50%;
bottom: .8%;
left: 1.5%;
text-align: center;
color: white;
font-weight: 900;
font-size: 4.5rem;
}
#TarefaEscondida {
padding: 5px;
background-color: brown;
/* margin-top: 8px; */
margin-left: 8px;
margin-right: 8px;
display: none;
}
#TextoEscondido {
border: none;
margin-left: 8px;
background-color: brown;
color: white;
width: 90%;
padding: 8px;
}
<!DOCTYPE html>
<html lang="pt-br">
<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="stylesheet" href="style.css">
<title>My To Do list</title>
</head>
<body>
<header id="header">
<h1>My To do list</h1>
</header>
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma()">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma()">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
<div id="botao" onclick="addTarefa()">
<P>+ </P>
</div>
<script src="main.js"></script>
</body>
</html>
You don't need to bother with element IDs. DOM navigation will allow you to find the parent of the clicked element, and remove it:
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
(Notice how I've changed the onclick so it passes this element)
And then your remove function can simply locate the parent of the clicked element and remove it.
function suma(element) {
element.parentNode.remove();
}
Also, please note: In your function that adds a new element, you should be aware of duplicating element IDs. That will create invalid HTML because IDs must be unique.
Here is a Fiddle example.
let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())
function addTarefa() {
let divtarefa = document.getElementById('TarefaEscondida')
clone = divtarefa.cloneNode(true)
clone.id = 'tarefa'
clone.class = "tarefa"
container.appendChild(clone)
clone.setAttribute('display', 'flex')
clone.setAttribute('class', 'tarefa')
clone.setAttribute('id', 'tarefa')
}
function suma(element) {
element.parentNode.remove();
}
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
<div id="botao" onclick="addTarefa()">
<P>+ </P>
</div>
In .addEventListener you put function but don't call it.
d.addEventListener('click',addTarefa)
#rock {
display: none;
position: relative;
left: 49.4%
}
#paper {
display: none;
position: relative;
left: 49%;
bottom: 81px;
}
#scissors {
display: none;
position: relative;
left: 48.14%;
bottom: 162px;
}
#shoot {
display: none;
position: relative;
left: 48.7%;
bottom: 243px;
}
I'm trying to get these h2 elements to fade in then out one after the other after the click of one of three buttons, but my JQuery isn't working for the fade in portion (I'm trying to take this in pieces since I'm new to JavaScript and JQuery). Here's my script:
$(document).ready(function(){
$("button").click(function(){
$("#rock").fadeIn();
$("#paper").fadeIn();
$("#scissors").fadeIn("slow");
$("#shoot").fadeIn(3000);
});
});
<div class="selections">
<button class="selection" data-selection="rock">🗻</button>
<button class="selection" data-selection="paper">📜</button>
<button class="selection" data-selection="scissors">✂</button>
</div>
<h2 class="chant" id="rock">Rock</h2>
<h2 class="chant" id="paper">Paper</h2>
<h2 class="chant" id=scissors>Scissors</h2>
<h2 class="chant" id="shoot">Shoot!</h2>
`
To accomplish your initial goal, everything is fine except: You need to hide your h2's initially, which you can do with the hidden attribute.
I'll probably get in trouble for this, but I thought I would show one way to complete this game. The code is commented below.
If you want to only reveal the associate button h2, access the data() of that element
$(document).ready(function() {
let choices = ['rock', 'paper', 'scissors']; // our choices
$("button").click(function() {
$('.chant').hide(); // hide all h2s for the round
$("#" + $(this).data("selection")).fadeIn(); // my selection - $(this).data("selection") grabs the data-selection attribute of the button ( $(this) ) which was clicked
let computer = choices[Math.floor(Math.random() * 3)]; // a random computer choice
$("#computer").html(computer.toUpperCase()).fadeIn("slow"); // new element #computer takes random value as html and fades in
// our chooser logic - we compare the index positions of the 2 choices
let msg, diff = choices.indexOf($(this).data("selection")) - choices.indexOf(computer);
if (diff === 0) msg = "Its a Tie";
else if (diff > 0 || diff === -2) msg = "You Won!";
else msg = "Shoot!";
$("#shoot").html(msg).fadeIn(3000);
// $("#paper").fadeIn();
// $("#scissors").fadeIn("slow");
// $("#shoot").fadeIn(3000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selections">
<button class="selection" data-selection="rock">🗻</button>
<button class="selection" data-selection="paper">📜</button>
<button class="selection" data-selection="scissors">✂</button>
</div>
<h2 class="chant" hidden id="rock">Rock</h2>
<h2 class="chant" hidden id="paper">Paper</h2>
<h2 class="chant" hidden id="scissors">Scissors</h2>
<h2 class="chant" hidden id="computer"></h2>
<h2 class="chant" hidden id="shoot">Shoot!</h2>
You don't need to start them display:none. Instead you could just start them without text and then .hide() them and set the .text() right before they .fadeIn().
I kind of went with the other answer and assumed you're trying to make a game. Didn't realize you can make hours of fun in so few lines of code.
$('.selections button').click(function() {
let player = this.getAttribute('data-selection'),
ai = ['rock', 'paper', 'scissors'][Math.round(Math.random() * 2)],
outcome = player === ai ? 'TIE' :
((player === 'rock' && ai === 'scissors') ||
(player === 'paper' && ai === 'rock') ||
(player === 'scissors' && ai === 'paper')) ? 'WIN' :
'LOST';
$('.chant').hide();
$('.chant.player').text(player).fadeIn();
$('.chant.ai').text(ai).fadeIn('slow');
$('.chant.outcome').text(outcome).fadeIn(3000);
});
<div class="selections">
<button data-selection="rock">🗻</button>
<button data-selection="paper">📜</button>
<button data-selection="scissors">✂</button>
</div>
<h2 class="chant player"></h2>
<h2 class="chant ai"></h2>
<h2 class="chant outcome"></h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Or if you want to make absolutely sure that they fade in in sequence, .fadeIn() allows for an on complete callback, so you could nest them:
$('.chant.player').text(player).fadeIn(function() {
$('.chant.ai').text(ai).fadeIn('slow', function() {
$('.chant.outcome').text(outcome).fadeIn(3000);
});
});
I went with the document.ready function and used the .fadeIn .fadeOut effects. I hid each h2 element individually in my html and came to this solution. The only issue I'm having now is the screen expands and moves some elements when the script is ran.
//Displays the chant 'Rock Paper Scissors Shoot!' after one of the buttons is clicked
$(document).ready(function(){
$('button').click(function(){
$('#rock').fadeIn(500).delay(1000).fadeOut(500);
$('#paper').delay(2000).fadeIn(500).delay(1000).fadeOut(500);
$('#scissors').delay(4000).fadeIn(500).delay(1000).fadeOut(500);
$('#shoot').delay(6000).fadeIn(500);
});
});
#import
url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght#100&display=swap');
*{
font-family: "Big Shoulders Stencil Display", sans-serif;
}
body {
background-size: contain;
background-color: #A80289;
}
.game {
margin: 40px 0 0 0;
font-size: 55px;
text-align: center;
letter-spacing: 3px;
}
.selections {
display: flex;
justify-content: center;
margin: 20px 0 0 0;
}
button {
padding: 0 20px 0 20px;
}
.selection {
background: none;
border: none;
font-size: 50px;
cursor: pointer;
transition: 100ms;
}
.selection:hover {
transform: scale(1.2);
}
.chant {
border: none;
font-size: 40px;
font-weight: bold;
letter-spacing: 3px;
}
#rock {
position: relative;
left: 49.4%
}
#paper {
position: relative;
left: 49%;
}
#scissors {
position: relative;
left: 48.14%;
}
#shoot {
position: relative;
left: 48.7%;
}
.winner {
margin: 1rem;
display: grid;
justify-content: center;
grid-template-columns: repeat(2, .2fr);
justify-items: center;
align-items: center;
position: relative;
top: 100px;
font-size: 25px;
letter-spacing: 2px;
font-weight: bold;
}
.winner-score {
margin: 0 0 0 8px;
font-size: 75%;
}
.result-selection {
opacity: .5;
font-size: 20px;
}
.result-selection.winner {
opacity: 1;
font-size: 30px;
position: relative;
top: 0;
}
/*Media Queries*/
/*Tablets and smaller*/
#media(max-width: 768px) {
.game {
margin: 40px 0 0 0;
font-size: 45px;
text-align: center;
letter-spacing: 3px;
}
.selection {
font-size: 40px;
}
.chant {
font-size: 40px;
letter-spacing: 3px;
}
#rock {
position: relative;
left: 48%
}
#paper {
position: relative;
left: 47.62%;
}
#scissors {
position: relative;
left: 45.7%;
}
#shoot {
position: relative;
left: 46.5%;
}
.winner {
font-size: 24px;
}
}
/*Mobile*/
#media(max-width: 500px) {
.game {
margin: 40px 0 0 0;
font-size: 40px;
text-align: center;
letter-spacing: 3px;
}
.selection {
font-size: 35px;
}
.chant {
font-size: 40px;
letter-spacing: 3px;
}
#rock {
position: relative;
left: 47.26%
}
#paper {
position: relative;
left: 46.27%;
}
#scissors {
position: relative;
left: 43.19%;
}
#shoot {
position: relative;
left: 45%;
}
.winner {
font-size: 22px;
}
}
<!DOCTYPE html>
<html lang="en" {IF CLASSES}class="classes"{/IF}>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>Rock Paper Scissors</title>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="game">
<h1>Rock Paper Scissors</h1>
</div>
<div class="selections">
<button class="selection" data-selection="rock">🗻</button>
<button class="selection" data-selection="paper">📜</button>
<button class="selection" data-selection="scissors">✂</button>
</div>
<h2 class="chant" hidden id="rock">Rock</h2>
<h2 class="chant" hidden id="paper">Paper</h2>
<h2 class="chant" hidden id=scissors>Scissors</h2>
<h2 class="chant" hidden id="shoot">Shoot!</h2>
<div class="winner">
<div>
Player
<span class="winner-score" data-your-score>0</span>
</div>
<div data-final-column>
Computer
<span class="winner-score" data-computer-score>0</span>
</div>
<!--
<div class="result-selection winner">✂</div>
<div class="result-selection">📜</div>
-->
</div>
</body>
</html>
var sliderThumbs = new Swiper('.slider .slider-thumbs', {
slidesPerView: 'auto',
});
var slidercontent = new Swiper('.slider .slider-content', {
disableOnInteraction: false,
thumbs: {
swiper: sliderThumbs,
},
});
slide change to thumbs hover
not working the following code
$('.swiper-slide.thumb-slide').hover(function() {
$( this ).trigger( "click" );
});
i do sorry for my bad english
$( this ).trigger( "click" ) won't work because the thumbnail slides don't actually have click events bound to them. Instead, you can call the slideTo() method and use the thumbnail's index, like so:
$('.swiper-slide').on('mouseover', function() {
slidercontent.slideTo($(this).index());
})
See the following:
Swiper API methods: https://swiperjs.com/api/#methods
jQuery's .index() method: https://api.jquery.com/index/
You can use below script btw, its made by only CSS.
Also, pagination is triggered when you hover over the relevant area on the slider.
https://codepen.io/sawacrow/details/YzjXwzy
CSS
.swiper-pagination-hover-wrap {
.swiper-wrapper {
padding-bottom: 50px;
}
.swiper-pagination {
//background-color: rgba(204, 16, 184, 0.45);
z-index: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
bottom: 0;
&-bullet {
width: 100%;
border-radius: 0px;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background-color: transparent;
&::before {
position: absolute;
bottom: 0;
color: black;
background-color: #000000;
content: "";
width: 100%;
height: 10px;
}
&::after {
//background-color: rgba(255, 0, 0, 0.49);
content: "";
//border-left: 1px solid red;
width: fit-content;
height: 100%;
position: absolute;
left: 0;
width: 100%;
}
}
}
}
JS
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
document.querySelectorAll('.swiper-pagination-hover-wrap .swiper-pagination-bullet').forEach(el => el.addEventListener('mouseover', (event) => {
el.click();
}));
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper swiper-pagination-hover-wrap">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h1>slider1</h1>
</div>
<div class="swiper-slide">
<h1>slider2</h1>
</div>
<div class="swiper-slide">
<h1>slider3</h1>
</div>
<div class="swiper-slide">
<h1>slider4</h1>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</body>
</html>