See this fiddle. This is my watch trailer button, the first button is working perfectly fine. But the second watch trailer button is not working.
What is the problem with it?
Here is my code:
HTML:
<button id="watchbutton">Watch Trailer ►</button>
<br>
<button id="watchbutton">Watch Trailer ►</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-
src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
top:0%;
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;
}
Javascript
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
function playVideo() {
var video = document.getElementById('video');
var src = video.dataset.src;
video.src = src + '?autoplay=1';
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
playVideo();
}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
</script>
you can not have same ids. change id to something else.
<button id="watchbutton">Watch Trailer ►</button>
<br>
<button id="watchbutton2">Watch Trailer ►</button>
Try with classname instead of id .Because id is unique for whole html .For selector use with querySelectorAll()
Updated
declare src of the video in the data-src of button .Then pass the argument with playvideo(this.dataset.src) function .
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.querySelectorAll('.watchbutton')
function playVideo(src) {
var video = document.getElementById('video');
video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.forEach(function(a){
a.onclick = function() {
modal.style.display = "block";
playVideo(this.dataset.src); // pass the src
}
})
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
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;
}
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbw">Watch Trailer ►</button>
<br>
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbr">Watch Trailer ►</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<br>
You're almost there.
After you fix the issue with the double ids - mentioned by Frits, prasad & others - you still need to tell playVideo to play a different video, depending on which button you push.
Here's how you can fix your code to achieve the desired result :
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn1 = document.getElementById("TDwJDRbSYbw");
var btn2 = document.getElementById("6H_0aem12_I");
function playVideo(id) {
var video = document.getElementById('video');
var src = video.dataset.src + id;
video.src = src + '?autoplay=1';
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn1.onclick = function(e) {
modal.style.display = "block";
playVideo(this.id);
}
btn2.onclick = btn1.onclick;
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
/* Watch Trailer Button CSS */
.btn {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
.btn: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;
}
<button class="btn" id="TDwJDRbSYbw">Watch Trailer ►</button>
<br>
<button class="btn" id="6H_0aem12_I">Watch Trailer ►</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<br>
See also this JSFiddle demo
First, It is not good practice to use identical ids.
<button id="watchbutton">Watch Trailer ►</button>
And when you use
var btn = document.getElementById("watchbutton");
You get only one button (the first), You should use something like:
<button id="watchbutton" class="watchButton">Watch Trailer ►</button>
<br>
<button id="watchbutton2" class="watchButton" >Watch Trailer ►</button>
And get them with:
var buttons = document.getElementsByClassName("watchButton");
Related
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 4 years ago.
This is not a new problem on stackoverflow, but I've tried everything without success.
I have a "popup" created with two divs. The parent ist the background and the child is the popup content. I want to hide the popup when the user clicks on the background (the parent).
It sounds extremly easy also for me but I can't achieve that.
This is my code and what I tried (it works exacly at the opposite way as I want):
let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');
button.onclick = () => {
popup.style.display = 'block';
content.onclick = e => {
if(e.target !== this) {
popup.style.display = 'none';
}
}
}
.popup {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
display: none;
}
.popup-content {
background-color: #fff;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
min-width: 470px;
border-radius: 4px;
}
<button>
Open Popup
</button>
<div class="popup">
<div class="popup-content">
<h3>Popup Title</h3>
<p>Popup Text</p>
</div>
</div>
Can somebody help me?
You should separate both events and attach the click to the window so you can detect the clicks outside of popup-content like :
let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');
button.onclick = () => {
popup.style.display = 'block';
}
window.onclick = e => {
if (e.target === popup) {
popup.style.display = 'none';
}
}
.popup {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: none;
}
.popup-content {
background-color: #fff;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
min-width: 470px;
border-radius: 4px;
}
<button>
Open Popup
</button>
<div class="popup">
<div class="popup-content">
<h3>Popup Title</h3>
<p>Popup Text</p>
</div>
</div>
you can try something like this :
instead of adding the EventListner to close the div on the button you need to add it on the document instead. and test on target if is not your button just like this :
let popup = document.querySelector('.popup');
let button = document.querySelector('button');
// Event that hide the popin if the click happen out popin
function closeHandler(e) {
if (e.target !== popup) {
// We remove the event for better perfermance
removeCloseListner();
// We hide the popin
popup.style.display = 'none';
}
}
// Call this function when you open your popin popin
function addCloseLitnerToDocument() {
document.addEventListener("click", closeHandler);
}
function removeCloseListner() {
document.removeEventListener("click", closeHandler)
}
// Add listner to Open Popin
button.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
// when popin is open
// Add listner to the document
// And show the popin
popup.style.display = 'block';
addCloseLitnerToDocument();
}
So I have already coded other stuff to appear after a background video finishes playing using this javascript
var vid = document.getElementById("bgvid");
var vid2 = document.getElementById('akiratrailer');
vid.onended = function() {myFunction()};
function myFunction() {
vid2.style.display = "block";
document.getElementById("headline2").innerHTML = "stuff";
document.getElementById("headline3").innerHTML = "stuff";
};
How would I add a custom button (I already have the CSS for the button) to this javascript so that it may show up after the background video finishes along with the other stuff?
This is my the html for the button
<a href='newpage.html' class='button'>blah blah blah</a>
my website for reference My Website
Try this:
var vid = document.getElementById( 'bgvid' ),
vid2 = document.getElementById( 'content' );
vid.onended = function() {
vid2.style.display = 'block';
document.getElementById( 'headline2' ).innerHTML = 'stuff';
document.getElementById( 'headline3' ).innerHTML = 'stuff';
}
* {
box-sizing: border-box
}
body {
margin: 0
}
#bgvid {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%
}
#content {
display: none;
position: fixed;
overflow-y: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
text-align: center
}
#akiratrailer {
margin: 0 auto;
width: 50%
}
.button {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
text-decoration: none
}
.button:hover {
background: #ddd;
color: black
}
<video autoplay muted id="bgvid">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div id="content">
<h2 id="headline2"></h2>
<video id="akiratrailer" controls>
<source src="http://andiviaandes.com/videos/akiratrailer.mp4" type="video/mp4">
</video>
<h2 id="headline3"></h2>
<a href='#' class='button'>blah blah blah</a>
</div>
Well you could either generate the button dynamically using the below code in onended callback
var button = document.createElement('button');
var node = document.createTextNode('Click me');
button.appendChild(node);
button.classList.add('button');
body.appendChild(button); //or any other parent element you wish to add the button to
or just simply add the button in HTML, set up the class and adjust display to 'display: none' and change it similarily to how you manipulate the headlines right now.
Here's the jsbin with a working example: http://jsbin.com/pepidedimo/edit?html,css,js,console,output
For a class assignment, I have to make a gallery of images which i will be using on my final website. when a image is clicked, an enlarged version of that image will be displayed on the page as a modal image. However, the image that is been clicked on has to be a "thumbnail image", which is at a way smaller resolution (480x270) that the enlarged one, which is at 1920x1080.
This is my HTML code (I used anchors for the enlarged image and img src for thumbnail image):
<a class="myImages" id="myImg" href="screenshots/image1.jpg" target="_blank">
<img src="screenshots/thumbnails/image1-480.jpg" alt="description" style="width: 100%">
</a>
CSS:
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 100%;
max-width: 70%;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
JavaScript:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('myImages');
var modalImg = document.getElementById("img01");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.href;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
Most of the code is from W3Schools, I just modified it a little so that it works with a gallery of 20+ images.
However, because there is an anchor tag around the img, if i don't include the target="_blank", when the image is clicked on, it will just open up the enlarged image on the same page and not the modal. If I include the target="_blank", the enlarged image will open in a new tab, but the modal will open up on the original page too.
The result I need is a combination of the two described above, the modal needs to open up without the image opening in a new tab as well.
Is there something I am doing wrong? and how would I fix it?
Adding e.preventDefault() in onclick function should do the job.
And don't forget to bind the event to the function
img.onclick = function(e) {
e.preventDefault()
modal.style.display = "block";
modalImg.src = this.href;
}
on w3schools site i found a tutorial for a dialog box/popup window. I would like to implement this with more images.
my code:
<img onclick="openModal()" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400">
<!-- Modal -->
<div id="myModal" class="modal">
<!-- Close button -->
<span class="close">×</span>
<!-- Modal content -->
<img class="modal-content" id="modal-image">
</div>
<script type="text/javascript">
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById('modal-image');
function openModal() {
modal.style.display = "block";
modalImg.src = this.getAttribute("data-highres");
}
/*img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.getAttribute("data-highres");
}*/
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function() {
if(event.target == modal) {
modal.style.display = "none";
}
}
</script>
css:
#myImg {
cursor: zoom-in;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 50px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbbbbb;
text-decoration: none;
cursor: pointer;
}
the code is working for one image. so i added a function openModal() and uncomment some part of the previous code. But now this isn't working even for one image it opens the modal without the image.
thank you for your help
The error in the console is Uncaught ReferenceError: openModal is not defined. This means the function was run at a scope in which it was not defined. an easy fix would be to define it in a global scope, like window:
window.openModal = function(img) {
modal.style.display = "block";
modalImg.src = img.getAttribute("data-highres");
}
and then
<img onclick="openModal(this);" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400">
However, you should not use not use onclick anymore (w3schools is a bit old now) like this answer says.
What you want to do is attach an event listener to your images. Loop through all of your images and use the addEventListener('click' ...) to listen when they were clicked.
var images = document.querySelectorAll('img');
for(var i=0, len = images.length; i < len; i++){
images[i].addEventListener('click', openModal);
}
I'm currently designing a website in which a user clicks on a button and an overlay and box fades in with various contents. When the user either clicks a close button or clicks outside the box, the box and all the contents fade out. Here's a little bit of code I've already produced:
HTML
<div id="overlay"></div>
<div id="specialBox">
<p style="text-align: center">Special box content.</p>
<button type="button" onmousedown="toggleOverlay()">Close Overlay</button>
</div>
CSS
div#overlay {
background: #000;
display: none;
height: 100%;
left: 0px;
position: fixed;
text-align: center;
top: 0px;
width: 100%;
z-index: 2;
}
div#specialBox {
background: #fff;
color: #000;
display: none;
position: absolute;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px;
height: 300px;
left: 425px;
}
JavaScript
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
jQuery (may be incorrect syntax)
$('html').click(function() {
if (document.getElementById('#specialBox').***IS_VISIBLE***) {
$("#specialBox").fadeOut(300);
$("#overlay").fadeOut(300);
}
});
An example can be found on http://www.madeon.fr when you click on "Newsleter". You can both click a close button and click outside to close it. Now, my question is how can I achieve that with my work?
I figured out the main problem. I simply deleted my jQuery and added "onmousedown='toggleOverlay()'" as an attribute to div#overlay. Then when I clicked the overlay the box disappeared.
Here's the new HTML:
<div id="overlay" onmousedown="toggleOverlay()"></div>
You can do it this way: using $(document).click
The below jsfiddle is for your help: http://jsfiddle.net/jec7rmw6/2/
function toggleOverlay(){
if($("#specialBox").is(":visible"))
{
$('#specialBox').fadeOut(300);
}
}
jQuery('#specialBox').click(
function (e) {
e.stopPropagation();
}
);
$(document).click(function() {
if($("#specialBox").is(":visible"))
{
$('#specialBox').fadeOut(300);
}
});