We Keep Coding

Video pop-up on button click for multiple videos on page using jQuery/Javascript

I'm looking to integrate multiple embedded youtube videos (using Iframe's) that pop up on the screen after a user clicks a custom button.
There are a lot of similar questions that work for one video, but not multiple videos on the same page.
The button is nested within a set of div's uniform across all the videos. After the video pop's up, clicking outside of the video should make it disappear.
The below code finds the parent element after the button is clicked and should open that specific video modal, but instead, nothing happens.
Any help is much appreciated!
var btns = document.getElementsByClassName("watchbutton");
var openVideo = function() {
var card = $(this).closest('.card');
var modal = $(this).closest('.trailerdivbox');
var trailerbox = $(this).closest("close");
modal.css('display', 'block');
trailerbox.onclick = function() {
modal.css('display', 'none');
// When the user clicks anywhere outside of the modal, close it
}
window.onclick = function(event) {
if (event.target == modal) {
modal.css('display', 'none');
}
}
};
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', openVideo, false);
}
/* Watch Trailer Button CSS */
.watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
padding: 10px 12px;
}
.watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
.trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='videos'>
<div class='card'>
<button class="watchbutton">Watch Trailer &#9658</button>
<div class="close">
<div class="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<div class='card'>
<button class="watchbutton">Watch Trailer &#9658</button>
<div class="close">
<div class="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>

First off, your modal and trailerbox are not defined correctly. They are offspring of a sibling of the button so .closest() will not find them.
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
It tests itself, then the parent, so it will not encounter those elements. You need to use .find() from the parent.
var modal = $(this).closest('.card').find('.trailerdivbox');
Consider the following example.
$(function() {
function openVideo(event) {
var card = $(this).closest(".card");
var modal = $(".trailerdivbox", card);
modal.addClass("isOpen").show();
}
function closeVideo(event) {
var modal = $(".trailerdivbox.isOpen");
modal.removeClass("isOpen").hide();
}
$(".videos").on("click", ".watchbutton", openVideo);
$(".videos").on("click", ".close", closeVideo);
});
/* Watch Trailer Button CSS */
.watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
padding: 10px 12px;
}
.watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
.trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='videos'>
<div class='card'>
<button class="watchbutton">Watch Trailer &#9658</button>
<div class="close">
<div class="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<div class='card'>
<button class="watchbutton">Watch Trailer &#9658</button>
<div class="close">
<div class="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</div>

Menu toogle to control display, height, and width

currently learning javascript and encounter a problem.
I made a button for mobile screen that if clicked it can expand the background and display the menu. I encounter problem where only the menu content can be clicked back and forth to display and undisplayed, and the background don't.
My goal is
When I clicked the menu button, both the background will expand and the menu will be displayed.
and the background can be toggle on and off by clicking the menu button.
Can anyone help me with this problem ?
document.getElementById("menu_button").addEventListener("click",function()
{
var open1=document.getElementById("opened_menu");
var open2=document.getElementById("menu_background");
open2.style.width = '100%';
open2.style.height = '100vh';
if(open1.style.display=="none")
{
open1.style.display="block";
}
else {
open1.style.display="none";
}
})
.mobile_background {
display: block;
width: 2rem;
height: 3rem;
background-color: red;
}
.mobile_menu {
display: none;
position: relative;
padding-top: 2rem;
padding-left: 2rem;
}
#menu_button {
position: fixed;
top: 0;
left: 0;
}
<div class="mobile_background" id="menu_background">
<div class="mobile_menu" id="opened_menu">
<p>menu 1</p>
<p>menu 2</p>
</div>
<button type="button" name="button" id="menu_button">
<div class="inner_menu">
<p>MENU</p>
</div>
</button>
</div>
Thanks in advance.

I bet this is what you want.
document.getElementById("menu_button").addEventListener("click", function() {
var open1 = document.getElementById("opened_menu");
var open2 = document.getElementById("menu_background");
if (open1.style.display == "none") {
open1.style.display = "block";
open2.style.width = '100%';
open2.style.height = '100vh';
} else {
open1.style.display = "none";
open2.style.width = '0%';
open2.style.height = '0vh';
}
})
.mobile_background {
display: block;
width: 0%;
height: 0vh;
background-color: red;
}
.mobile_menu {
display: none;
position: relative;
padding-top: 2rem;
padding-left: 2rem;
}
#menu_button {
position: fixed;
top: 0;
left: 0;
}
<div class="mobile_background" id="menu_background">
<div class="mobile_menu" id="opened_menu" style="display: none">
<p>menu 1</p>
<p>menu 2</p>
</div>
<button type="button" name="button" id="menu_button">
<div class="inner_menu">
<p>MENU</p>
</div>
</button>
</div>

Click Icon to Expand Image in Modal

I am working on a project that requires the user to be able to click on a few photos to expand them in a modal view. While we are using Bootstrap 4 for the page formatting, I have been told not to use the Bootstrap Modal framework because of issues with device compatibility. I also can't use plugins because of licensing concerns. So, I found and emulated this: https://www.w3schools.com/howto/howto_css_modal_images.asp
This is my code (with dummy images):
<!-- Code for Modal -->
<div class="popupHolder" id="popup1">
<div class="popupFlex">
<div class="popup">
<div class="popupClose">×</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="popupCnt">
<img class="imgpopup" id="img01">
<br clear="all" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Container that holds gallery -->
<div class="container">
<div class="row">
<div class="col-4">
<div class="imgGridBox">
<img class="img-fluid myImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/330px-Image_created_with_a_mobile_phone.png" alt="img1">
<img class="imgOpen" src="https://upload.wikimedia.org/wikipedia/commons/6/6d/Windows_Settings_app_icon.png">
</div>
</div>
<div class="col-4">
<div class="imgGridBox">
<img class="img-fluid myImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Micah_1.jpg/375px-Micah_1.jpg" alt="Img2">
<img class="imgOpen" src="https://upload.wikimedia.org/wikipedia/commons/6/6d/Windows_Settings_app_icon.png">
</div>
</div>
</div>
</div>
CSS:
.imgGridBox {
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.imgGridBox img {
display: block;
width: 100%;
}
.imgOpen {
position: absolute;
background-color: #fff;
bottom: 0;
right: 0;
max-width: 20px;
max-height: 20px;
}
.popupHolder {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
max-width: 100vw;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.75);
z-index: 888888;
}
.popupFlex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
}
.popup {
position: relative;
background: #FFF;
border-radius: 0.3rem;
max-width: 95%;
}
.popupClose {
position: absolute;
right: 0.5rem;
top: 0.5rem;
color: #34B233;
font-size: 2rem;
cursor: pointer;
z-index: 999999;
}
.popupCnt {
padding: 2rem;
text-align: center;
}
.popupCnt #img01 {
width: 50vw;
}
Script:
var modal = document.getElementById("popup1");
var images = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img01");
var open = document.getElementById("imgOpen");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function (evt) {
console.log(evt);
modal.style.visibility = "visible";
modalImg.src = this.src;
};
}
var span = document.getElementsByClassName("popupClose")[0];
span.onclick = function () {
modal.style.visibility = "hidden";
};
$(".popupHolder").click(function () {
modal.style.visibility = "hidden";
});
$(".popupCnt").click(function (event) {
event.stopPropagation();
modal.style.visibility = "hidden";
});
Codepen: https://codepen.io/kaelahc/pen/yLeXwXm
It works great when clicking on the image itself but I'm not sure how to alter the JS to make the icon clickable (preferably instead of the image). Can anyone recommend a fix?

You are looping through images and binding click on images in your code here :
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function (evt) {
console.log(evt);
modal.style.visibility = "visible";
modalImg.src = this.src;
};
}
What you need is to loop through gear icon, and then retrieve the image with whatever technique (I used parentNode and querySelector here)
It will look like that :
const opens = document.querySelectorAll(".imgOpen");
opens.forEach(open => {
open.addEventListener('click', e => {
e.preventDefault();
modal.style.visibility = 'visible';
modalImg.src = open.parentNode.querySelector('.myImg').src;
return false;
});
});

If you want a jQuery solution, try adding this event listener to all of the gear icons:
$(".imgOpen").click(function (event) {
modal.style.visibility = "visible";
modalImg.src = $(event.target).siblings('.myImg').attr('src');
});

How to properly Capture JavaScript Click event to Hide and Show a Div?

I have 1 input area and one popup area when I click to input, the popup will show, and when I click anywhere else in the body (except popup and input), I want the popup to go hidden.
function show(){
document.getElementById('content').style.display = 'flex'
}
*{margin: 0;padding: 0;}
.main{width: 100%;height: 100%;background: rgb(160, 160, 160);}
input {width: 400px;height: 60px;}
.input, #content {display: flex;justify-content: center;padding-top: 20px;}
#content {display:none}
button {width: 150px;height: 50px;margin-top: 20px;}
h2 {background: #000;color: aliceblue;margin-top: 20px;text-align: center;}
.content-inner {width:400px;height: 200px;background: rgb(109, 68, 68);;}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text" onfocus="show()">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>

You can listen to document click events and then check if the click happened in the input area or somewhere else, then show or hide the modal.
Since your whole visible div in the first place is a div with class="input" and you got an input inside it, so whenever the click event does not contain input class it should hide the modal and vise versa.
const content = document.getElementById('content');
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input")) {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
Also if in any case, you want to close the modal if the click event happened anywhere outside the modal itself or input area you can check for another condition to see whether click event happened inside div with id="content" or not.
So the final code should be something like this:
const content = document.getElementById('content');
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input") && event.target.id !== "content") {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
So if you want to add another listener to the content inside the modal you can just define another event listener for it just like this:
const content = document.getElementById("content");
const button = document.querySelector("button");
const contentInner = document.querySelector(".content-inner");
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input") && event.target.id !== "content") {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
button.addEventListener("click", function() {
const span = document.createElement("span");
const text = document.createTextNode("newer span");
span.append(text);
contentInner.append(span)
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>

Use jQuery mouseup event (.mouseup()) with target property (event.target) to detect click the event and hide div when clicking outside of the specific element.
<script>
$(document).mouseup(function(e){
var container = $("#elementID");
// If the target of the click isn't the container
if(!container.is(e.target) && container.has(e.target).length === 0){
container.hide();
}
});
</script>

Toggle visibility of 2 divs with 2 buttons

I am having issues with my code
I am trying to show 1 div (show_1) by default and then hide it and show a second div (show_2) when button 2 is clicked. And then when button 1 is clicked hide show_2 and show show_1 again
https://jsfiddle.net/mgzurjgL/4/
It is not working though, nothing happens when I click either buttons.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if (a.style.display == 'block') {
a.style.display = 'block';
a2.style.display = 'none';
} else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_1', 'show_2');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>

You had your settings wrong in JSFiddle, you need to run the script in the head not onload. Also you passed in the same parameters twice. Also why dont you try something simpler like this.
https://jsfiddle.net/mgzurjgL/5/
function switch_div(show) {
document.getElementById("show_"+show).style.display = "block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div(1);">
1
</div>
<div class="button" onclick="switch_div(2);">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>

Two items: script placement and a typo. Working version at JSFiddle, tested in Google Chrome.
The script has to run before the divs. In the JSFiddle Javascript settings, I changed "Load Type" to "No wrap - in <head>." This way the switch_div function exists when the divs are loaded.
There was a typo:
if (a.style.display == 'block')
should be
if (a.style.display == 'none')
Otherwise you are setting block display on an element that's already block :) .
Edit: This code still doesn't do what you appear to want, because the function you have written toggles the div visibility regardless of which button is pressed. What you really want is in this fiddle:
<div class="button" onclick="switch_div('show_1', 'show_2', true);">
and
<div class="button" onclick="switch_div('show_1', 'show_2', false);">
together with
function switch_div(show_1, show_2, should_show_1) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if(should_show_1) {
a.style.display = 'block';
a2.style.display = 'none';
}
else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
That way you get only the div you want.

You need to switch the statements in if-else or change the condition in the if to "if (a.style.display !== 'block') "
When a.style.display is 'block' then you have to set it to 'none' to hide it.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if (a.style.display !== 'block') {
a.style.display = 'block';
a2.style.display = 'none';
} else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_1', 'show_2');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>

I changed the js function and the "call" for buttons.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_2);
var a2 = document.getElementById(show_1);
a.style.display = 'none';
a2.style.display = 'block';
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_2', 'show_1');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>

This also works with:
<div class="button" onclick="switch_div(1,2);">
1
</div>
<div class="button" onclick="switch_div(2,1);">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>
<script>
function switch_div(n1,n2) {
document.getElementById("show_"+n1).style.display = 'block';
document.getElementById("show_"+n2).style.display = 'none';
}
</script>