In addition to post #29
How come buttonA video is only showing?
How do I get the other ones to work?
<button data-destination="#ba" class="playButton ba">ButtonA</button>
<button data-destination="#bb" class="playButton bb">ButtonB</button>
<button data-destination="#bc" class="playButton bc">ButtonC</button>
For me to have the javascript work with each button individually, what needs to be readjusted?
Only buttonA is working: https://jsfiddle.net/djxqetgk/1/
(function manageButtonA() {
const modalButtons = document.querySelector(".ba");
const closeModalInfo = document.querySelector(".modal");
const closeModals = document.querySelector(".close");
modalButtons.addEventListener("click", function() {
var target = this.dataset.destination;
openModal(target);
loadPlayer.add(".buttonA", {
videoId: "CHahce95B1g"
});
});
function openModal(target) {
document.querySelector(target).classList.add("active");
}
closeModals.addEventListener("click", function() {
this.closest(".modal").classList.remove("active");
modalClickHandler(); // Moved the modalClickHandler() call to here
});
// Handle ESC key (key code 27)
document.addEventListener("keyup", function(e) {
if (e.keyCode === 27)
closeModalInfo.classList.remove("active");
});
function modalClickHandler() {
// Destroy the first player if it exists
videoPlayer.players.forEach(function(player) {
player.destroy();
});
console.log("playerRemoved");
}
}());
(function manageButtonB() {
const modalButtons = document.querySelector(".bb");
const closeModalInfo = document.querySelector(".modal");
const closeModals = document.querySelector(".close");
modalButtons.addEventListener("click", function() {
var target = this.dataset.destination;
openModal(target);
loadPlayer.add(".buttonB", {
videoId: "CHahce95B1g"
});
});
function openModal(target) {
document.querySelector(target).classList.add("active");
}
closeModals.addEventListener("click", function() {
this.closest(".modal").classList.remove("active");
modalClickHandler(); // Moved the modalClickHandler() call to here
});
// Handle ESC key (key code 27)
document.addEventListener("keyup", function(e) {
if (e.keyCode === 27)
closeModalInfo.classList.remove("active");
});
function modalClickHandler() {
// Destroy the first player if it exists
videoPlayer.players.forEach(function(player) {
player.destroy();
});
console.log("playerRemoved");
}
}());
(function manageButtonC() {
const modalButtons = document.querySelector(".bc");
const closeModalInfo = document.querySelector(".modal");
const closeModals = document.querySelector(".close");
modalButtons.addEventListener("click", function() {
var target = this.dataset.destination;
openModal(target);
loadPlayer.add(".buttonB", {
videoId: "CHahce95B1g"
});
});
function openModal(target) {
document.querySelector(target).classList.add("active");
}
closeModals.addEventListener("click", function() {
this.closest(".modal").classList.remove("active");
modalClickHandler(); // Moved the modalClickHandler() call to here
});
// Handle ESC key (key code 27)
document.addEventListener("keyup", function(e) {
if (e.keyCode === 27)
closeModalInfo.classList.remove("active");
});
function modalClickHandler() {
// Destroy the first player if it exists
videoPlayer.players.forEach(function(player) {
player.destroy();
});
console.log("playerRemoved");
}
}());
Last Updated code: https://jsfiddle.net/14qpmdrc/1/
Target removed
Trying to do this: https://jsfiddle.net/1cj07rsm/3/
I removed closest: targeting each class individually: .modalC
Will doing this work in the code?
const modalButtons = document.querySelector(".bc");
const closeModalInfo = document.querySelector(".modalC");
const closeModal = document.querySelector(".closeC");
modalButtons.addEventListener("click", function() {
openModal();
loadPlayer.add(".buttonC", {
videoId: "CHahce95B1g"
});
});
function openModal() {
closeModalInfo.classList.add("active");
}
closeModal.addEventListener("click", function() {
closeModalInfo.classList.remove("active");
modalClickHandler(); // Moved the modalClickHandler() call to here
});
Last Updated: https://jsfiddle.net/Lkymo8ej/4/
Panels and video loaded.
At the code here: https://jsfiddle.net/Lkymo8ej/9/
I am trying to have the close button fadein after after curtain is done.
Why is it not, I don’t understand.
The fadein of the close button would occur only when the curtain is visible on the screen.
Button is not fading in.
Why?
I was supposed to add foreach to close also, right?
const panels = document.querySelectorAll(".panel");
panels.forEach(function(panel) {
panel.classList.add("slide");
const closeButtons = panel.querySelectorAll(".close");
closeButtons.forEach(function (closeButton) {
const makeVisible = function () {
closeButton.classList.add("visible");
panel.removeEventListener("transitionend", makeVisible);
};
panel.addEventListener("transitionend", makeVisible);
});
});
}
css:
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 1s;
pointer-events: none;
}
.close.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
Still haven’t been able to figure out how to remove black rectangle square from video.
