I was able to reduce the javascript down to this.
https://jsfiddle.net/5xketu1g/
Videos are still not showing though.
I was able to do this: https://jsfiddle.net/x7canhz3/
But I want to remove this whole function:
const manageCover = (function makeManageCover() {
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
//cover.addEventListener("click", handler);
handler();
}
return {
addCoverHandler
};
}());
How do I add animationend event to the exit handler
In the demo code the blue play button triggers initial-fade, instead, in my code I want it to be the exit button that triggers initial-fade.
All I am doing is, instead of having the play button trigger the initial-fade,
it will be the .exit button instead that will do that.
I’m trying to set it up similarly to how it was done in this demo code, but I am getting all confused on how to do it.
However it was done in there, I’m trying to replicate it.
The only difference being, in my code it’s being done entirely through the exit button.
The exit button is triggering the inital-fade.
The .exit button is located on the screen as an X with a circle around it.
How the initial-fade works is that it fades out the body.
Inside the demo code, the animation end function from there would be removed, and then added to this function in the code I am working on:
const manageUI = (function makeManageUI() {
Here is the demo code: https://jsfiddle.net/h5vkt3br/
In the demo code the initial-fade is triggered though the play button itself.
The initial-fade is what I am having trouble with figuring out how to add to my code. That is the only part.
Here is my code I am working on: https://jsfiddle.net/8zrqp59k/
The initial fade is being triggered through the exit button, not the play button.
In the html, this hide would be removed.
<div class="container2 hide">
The stuff in here would be removed I think:
function exitClickHandler() {
const thewrap = document.querySelector(".container2");
show(thewrap);
const cover = document.querySelector(".container1");
hide(cover);
Here is the css that would be used:
.initial-fade {
animation: initial-fade 500ms ease forwards;
}
@keyframes initial-fade {
to {
opacity: 0;
}
}
Some of this css may be needed in my code, also modified.
.inner-container {
display: none;
}
/* when container is active hide the cssPlay and show the inner container*/
.container.active .cover {
display: none;
}
.container.active .inner-container {
display: flex;
}
.container.active .inner-container.curtain {
display: block;
}
Here is the javascript part what would get added, along with other things I think from the demo code.
function animationEndHandler(evt) {
const animationName = evt.animationName;
if (animationName === "initial-fade") {
body.classList.remove("initial-fade");
showCover(currentPlayButton);
}
}
function coverClickHandler(evt) {
currentPlayButton = evt.currentTarget;
body.classList.add("initial-fade");
}
body.addEventListener("animationend", animationEndHandler);
It would be added to this function of my code:
const manageUI = (function makeManageUI() {
Which is there the exit handler is located.
How that part of the code is supposed to work is, after clicking the exit button, the initial-fade should be triggered.
That is this part:
.initial-fade {
animation: initial-fade 500ms ease forwards;
}
@keyframes initial-fade {
to {
opacity: 0;
}
}
Here is my code I am trying to add animationend event to the exit button.
function init() {
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
body.addEventListener("animationend", animationEndHandler);
}
In the demo code only resetBackground is being used.
This is the end result I am looking to have occur in my code, where only resetBackground is being used in there.
function resetPage() {
resetBackground("body");
}
In my code, there are two extra functions there.
I am trying to figure out how they would be removed from the code I am working on.
function resetPage() {
resetBackground("body");
resetContainer(".container1");
resetContainer(".container2");
}
How would I be able to remove them?
When both functions are isolated there are no errors. https://jsfiddle.net/40ungpq5/
Clicking on the exit button is supposed to reveal the next page that is behind it hidden.
It works the same way as the demo code.
function resetPage() {
resetBackground("body");
//resetContainer(".container1");
//resetContainer(".container2");
}
Here is the demo code, it is set up like this: https://jsfiddle.net/ogcxza8e/
Only resetBackground is being used on resetPage in here:
const manageCover = (function makeManageCover() {
const config = {};
const body = document.body;
let currentPlayButton = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(elements) {
elements.forEach(hide);
}
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelector(backgroundSelector);
allBackgrounds.classList.add("bg1");
}
function resetPage() {
resetBackground("body");
}
function markAsPlayed(played) {
played.classList.add("played");
}
function showCover(playButton) {
hideAll(config.containers);
resetPage();
markAsPlayed(playButton);
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
console.log(showCover);
}
function animationEndHandler(evt) {
const animationName = evt.animationName;
if (animationName === "initial-fade") {
body.classList.remove("initial-fade");
showCover(currentPlayButton);
}
}
function coverClickHandler(evt) {
currentPlayButton = evt.currentTarget;
body.classList.add("initial-fade");
}
function addClickToButtons(playButtons) {
playButtons.forEach(function playButtonHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function init(selectors) {
config.containers = document.querySelectorAll(selectors.container);
const playButtons = document.querySelectorAll(selectors.playButton);
addClickToButtons(playButtons);
body.addEventListener("animationend", animationEndHandler);
}
return {
addCoverHandler,
init
};
}());
My question is:
How would I be able to remove those 2 resetContainers, like how it was done in the demo code, where only resetBackground is being used?
function resetPage() {
resetBackground("body");
resetContainer(".container1");
resetContainer(".container2");
}
Because in the demo code, only resetBackground is being used.
function resetPage() {
resetBackground("body");
}
How would I be able to do that in my code I am working on?
code https://jsfiddle.net/gfn21x35/
In my code I am working on, I have it set up this way.
const manageUI = (function makeManageUI() {
const body = document.body;
function resetBackground(backgroundSelector) {
const background = document.querySelector(backgroundSelector);
background.classList.add("bg1");
}
function resetContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("activeContainer");
}
function resetContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("activeContainer");
}
function resetPage() {
resetBackground("body");
resetContainer(".container1");
resetContainer(".container2");
}
function animationEndHandler(evt) {
const animationName = evt.animationName;
if (animationName === "initial-fade") {
body.classList.remove("initial-fade");
resetPage();
}
}
function exitClickHandler() {
body.classList.add('initial-fade');
}
function addClickToExit(exitButtons) {
exitButtons.forEach(function addExitButtonHandler(exitButtons) {
exitButtons.addEventListener("click", exitClickHandler);
});
}
function addExitHandlers(callback) {
const resetVideo = document.querySelectorAll(".exit");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", callback);
});
}
function init() {
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
body.addEventListener("animationend", animationEndHandler);
}
return {
addExitHandlers,
init
};
}());
Trying to get to .container3
I am able to get from .container1. to .container2 from the 1st exit button, but I can’t seem to get from .container2 to .container3 from the other, 2nd exit button.
When viewing the code example I provided, scroll down to see the exit button.
The problem that I am having is that, clicking on the 2nd exit button should take me to .container3.
The 2nd exit button appears after clicking on the 1st exit button.
Small Reproducible Code: https://jsfiddle.net/3rsawgu2/
Full Code I am working on: https://jsfiddle.net/pzn98Lw6/
Here is a demo code: https://jsfiddle.net/h5vkt3br/
You can see how it works in there.
What is supposed to occur in the code I am working on is, after clicking on the 2nd exit button it’s supposed to take me to .container3 and it is not doing that.
Clicking on the exit button initiates the "initial-fade" after clicking the exit button the 1st time.
body.initial-fade {
animation: initial-fade 1s ease forwards;
}
When I click on the 2nd exit button, nothing is occurring.
Nothing is happening when I click on the 2nd exit button.
Why is nothing occurring, and how is that fixed so that, clicking on the 2nd exit button takes you to .container3?
How am I able to exit .container2,
The same way I was able to exit .container1?
In the demo code I provided: Two of these were used:
I am currently only using 1.
If I am needing another one of these, how would it be added to the code?
function animationEndHandler(evt) {
const animationName = evt.animationName;
if (animationName === "initial-fade") {
body.classList.remove("initial-fade");
showCover(currentPlayButton);
}
}
body.addEventListener("animationend", animationEndHandler);
function animationEndHandler(evt) {
const animationName = evt.animationName;
console.log(animationName);
if (animationName === "fadingOut") {
fadeReset();
}
}
body.addEventListener("animationend", animationEndHandler);
/*.fadingOut .isOpen*/
.fadingOut .outer {
animation: fadingOut 1s ease;
animation-delay: 11.3s;
}
Converting forEach to for loop
This code is working.
https://jsfiddle.net/n1t3kjdw/
function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".container");
const wrapper = container.querySelectorAll(".wrap");
wrapper.forEach(function(wrapper) {
if (wrapper.player) {
return removePlayer(wrapper);
}
});
}
What did I do wrong here? https://jsfiddle.net/rbwsL8hf/
function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".container");
const wrappers = container.querySelectorAll(".wrap"); {
for (let i = 0; i < wrappers[i].length; i++) {
if (wrappers[i].player) {
return removePlayer(wrappers[i]);
}
}
}
}
Clicking the exit button removes the player from the forEach code, but not for loop.
How would I get the for loop code to work the same as the forEach code?
You click the blue button, next you click the red exit button.
Why is the for loop code not working?
Are you 100% sure?..,
What if I did this instead? Will this work?
for (let i = 0; i < wrappers.length; i++) {
I just tried it that way. https://jsfiddle.net/g6137zne/1/
I forgot to do the html part.
Cannot read properties of undefined (reading ‘destroy’)"
function removePlayer(wrapper) {
wrapper.player.destroy();
delete wrapper.player;
console.log("removePlayer");
}
function removePlayerHandler(evt) {
const el = evt.target;
const wrapper = el.previousElementSibling.querySelector('.wrap');
removePlayer(wrapper);
}
https://jsfiddle.net/7q5c9zye/
Cannot read properties of undefined (reading ‘destroy’)"
Posting a small reproducible example doesn’t work, needs to be the full code.
exit button on page 2 should remove any of the players
Click on the first play button, then click the exit button. Next, Click any of the first 4 videos, then click the exit button that is at the bottom, the video does not get removed.
Clicking on the 1st play button removes player, clicking on any of the next 4 videos, then clicking the exit button which is at the bottom, does not remove video.
How would this be fixed in the code so that clicking any of those 4 videos, then clicking the exit will remove the video?
I want to be able to remove any of those videos on that page using 1 button.
code https://jsfiddle.net/4j6h51y2/
What seems to be the issue, and how would this be fixed?
How would it be fixed in the code so that any of those 4 videos can be removed with the one exit2 class button?
If I am doing this the right way.
<div class="curtain remove">
<button class="exit exit2" type="button" aria-label="Open"></button>
function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".remove");
const wrapper = container.querySelectorAll(".wrap");
wrapper.forEach(function(wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
(function showContainer3() {
function hide(el) {
el.classList.add("hide");
}
function show(el) {
el.classList.remove("hide");
}
function exitClickHandler() {
const thewrap = document.querySelector(".container3");
show(thewrap);
const cover = document.querySelector(".container2");
hide(cover);
}
const cover = document.querySelector(".exit2");
cover.addEventListener("click", exitClickHandler);
})();
function addExitHandlers(callback) {
const resetVideo = document.querySelectorAll(".exit");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", callback);
});
}
function init() {
findPlayers();
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
}
return {
addExitHandlers,
getWrapper,
init
};
}());
What makes you think the wrapper element has a .player property on it?
What is .destroy() supposed to be?
I would strongly suggest you start using console.log() way more.
Adding buttons that go to specific pages
I’m having a lot of trouble figuring out how to do this.
How would I do this in the javascript?
I’m way confused.
I added the CSS in.
The buttons are visible.
https://jsfiddle.net/3zs2bvha/
I don’t know how to do this and need help with it.
Page 1
Blue goes to .exitPage2 .container2
Purple goes to .exitPage3 .container3
<button class=exit exitpPage2 type=button aria-label=Open></button>
<button class=exit exitpPage3 type=button aria-label=Open></button>
Page 2
Red goes to .exit Page1 .container1
Purple goes .exitPage3 .container3
<button class=exit type=button aria-label=Open></button><button
<button class=exit exitpPage3 type=button aria-label=Open></button>
Page 3
Blue goes to .exitPage2 .container2
Red goes to .exit Page1 .container1
<button class=exit type=button aria-label=Open></button><button
<button class=exit exitpPage2 type=button aria-label=Open></button>
I’m stuck on how to add the javascript in to do that:
(function showContainer() {
function hide(el) {
el.classList.add("hide");
}
function show(el) {
el.classList.remove("hide");
}
function exitClickHandler() {
const thewrap = document.querySelector(".container3");
show(thewrap);
const cover = document.querySelector(".container1");
hide(cover);
}
const covers = document.querySelectorAll(".exit, .exitPage2");
covers.forEach(function addCoverListener(cover) {
cover.addEventListener("click", exitClickHandler);
});
})();
(function showContainer() {
function hide(el) {
el.classList.add("hide");
}
function show(el) {
el.classList.remove("hide");
}
function exitClickHandler() {
const thewrap = document.querySelector(".container2");
show(thewrap);
const cover = document.querySelector(".container1");
hide(cover);
}
const covers = document.querySelectorAll(".exit, .exitPage3");
covers.forEach(function addCoverListener(cover) {
cover.addEventListener("click", exitClickHandler);
});
})();
All I am doing is hiding and unhiding CSS container classes via clicking on a button.
I’m having a lot of trouble figuring out how to do this.
How would I do this in the javascript?
I added the CSS in.
The buttons are visible.
https://jsfiddle.net/3zs2bvha/
The Buttons go to specific CSS classes/containers/pages which I set up.
I’m having a lot of trouble figuring out how to connect the two.
The buttons with the corresponding CSS classes that they go to in the code.
You would click on a button and it should take you to a specific CSS class/page that it goes to.
There are two buttons on each page, each, when clicked on would unhide a CSS container.
I don’t know how to do this and need help with it.
.container2 and .container3 start off as hidden.
Each of the two buttons on Page 1 or .container1 when clicked on, should unhide .container2 or .container3
Each container would be unhidden when a button is clicked on, where the other containers would stay hidden.
Page 1 These buttons should be visible.
Blue Button .exitPage2 goes to class .container2
Purple Button .exitPage3 goes to class .container3
<button class=exit exitpPage2 type=button aria-label=Open></button>
<button class=exit exitpPage3 type=button aria-label=Open></button>
Page 2 These buttons should be visible.
Red Button .exit Page1 goes to class .container1
Purple Button .exitPage3 goes to class .container3
<button class=exit type=button aria-label=Open></button><button
<button class=exit exitpPage3 type=button aria-label=Open></button>
Page 3 These buttons should be visible.
Blue Button .exitPage2 goes to class .container2
Red Button .exit Page1 goes to class .container1
<button class=exit type=button aria-label=Open></button><button>
<button class=exit exitpPage2 type=button aria-label=Open></button>
I’m stuck on how to add the javascript in to do that.
I don’t know how to do this.
I wasn’t able to edit the one above it.
Is this difficult what I am trying to do?
When .container1 becomes unhidden, .container2 and .container3 should be hidden.
When .container2 becomes unhidden, .container1 and .container3 should be hidden.
When .container3 becomes unhidden, .container2 and .container1 should be hidden.
To do that how many of these would I need?
I keep getting stuck.
(function showContainer() {
function hide(el) {
el.classList.add("hide");
}
function show(el) {
el.classList.remove("hide");
}
function exitClickHandler() {
const thewrap = document.querySelector(".container3");
show(thewrap);
const cover = document.querySelector(".container1");
hide(cover);
}
const covers = document.querySelectorAll(".exit, .exitPage2");
covers.forEach(function addCoverListener(cover) {
cover.addEventListener("click", exitClickHandler);
});
})();
Not really sure I understand what you are trying to do.
You can make versions of the show/hide functions that take in a Nodelist (i.e. what querySelectorAll give you) and loops the element and calls add/remove for each of them.
function showAll(elements) {
elements.forEach((element) => {
element.classList.add("show");
});
}
// somewhere else in the code you get the elements and call the function
const sections = document.querySelectorAll("section");
showAll(sections);
You can also make a version that takes in a list of selectors.
function showAll(...selectors) {
selectors.forEach((selector) => {
const element = document.querySelector(selector);
element.classList.add("show");
});
}
showAll(".class1", ".class2");
Each of the two buttons on on Page 1 or .container1 when clicked on, should unhide .container2 or .container3
Each container would be unhidden when a button is clicked on, where the other containers would stay hidden.
When a Button that goes to: .container2 becomes unhidden, .container1 and .container3 should be hidden.
When a Button that goes to: .container3 becomes unhidden, .container2 and .container1 should be hidden.