Develop Reference

Javascript code is getting executed even before user presses ok on alert window

I need to remove video element, Canvas and a button on canvas before displaying an alert window and once user presses ok button on the alert window, I need to display some other elements. Currently I am facing below issues.
alert window is getting displayed before deleting the button. So we
just used setTimeout to delete all the elements before displaying
alert window to fix this.
The UI code which should be executed after user presses 'ok' button
is getting executed after alert window display with out stopping for
user click. I thought that the code next to alert() should not be
executed until user presses Ok on alert window.
Below is Javascript code.
$("#remoteVideo").remove();
$("#localCanvas").remove();
$(".terminate_session_btn").remove();
// USED setTimeout TO DELAY THE DISPLAY OF ALERT WINDOW. WITHOUT
// setTimeout, ALERT WINDOW IS GETTING DISPLAYED BEFORE DELETING THE BUTTON.
setTimeout(function() {
displayAndProcessUserTerminateAlertDialog();
}, 200);
function displayAndProcessUserTerminateAlertDialog() {
socket.close();
alert("User terminated the video call. Press 'Ok' button to create new session.");
// BELOW CODE IS GETTING EXECUTED WITHOUT STOPPING FOR USER ACTION ON ALERT WINDOW.
$(".main_container .item").hide();
$("#video-session-menu").removeClass("active");
$("#images-menu").removeClass("active");
$(".sidebar ul li a").addClass("disabled");
}
Can anyone please help me to understand why code execution is not stopped until user presses OK on alert window and how to fix this issue.
UPDATE:
Interesting thing is if I open developer tools, the issue is not happening. If I don't open developer tools, issue is happening always. I am not sure how to fix this issue.

Apparently browsers do not have a standard behavior for alert. As a result, you might want to implement your own alert with the behavior you prefer. You can test it here: https://jsfiddle.net/rf0jd7te/1/
HTML
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Alert Window</p>
<p>
<input type="button" value="OK">
</p>
</div>
</div>
CSS
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
JS
console.log("before alert");
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = modal.getElementsByClassName("close")[0];
// Get the OK element that closes the modal
var OK = modal.querySelector("input[type=button]");
// When the user clicks on <span> (x), close the modal
function close() {
modal.style.display = "none";
console.log("after alert");
}
OK.onclick = span.onclick = function() {
close();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
close();
}
}
modal.style.display = "block";

Alert in JS is only responsible for showing message, try to use window.confirm(message) (check example use case)

Javscript: For every image click show modal with image zoom

I'm currently working on a simple image modal that should show only an image zoom with a close button.
I have a markup generated from my CMS in which the a tag can be configurated to have an extra class "lightbox" as an attribute which should then trigger the lightbox script.
However, currently it seems to only work for the first image that's loaded. When I click on another image it shows the same image source from the first one and I'm not sure how to fix it. Do all the images need to be looped over first?
My CMS generates a markupa for the images like this in the DOM (image is a placeholder):
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
In my default layout I then add the markup for the lightbox modal:
<div id="imagemodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="close">×</div>
<img src="" id="imagepreview" style="width: 100%;" >
</div>
</div>
This is the javascript code:
window.addEventListener('DOMContentLoaded', function () {
// add imageresource id to loaded image
$(".image-embed-item").attr("id", "imageresource");
// add data-toggle class to all lightbox elements
$(".lightbox").attr("data-toggle", "lightbox");
// click event for data toggle
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
// use image source from clicked image
$('#imagepreview').attr('src', $('#imageresource').attr('src'));
$('.modal').css('display', 'block');
});
$(document).on('click', $('.closeModal'), function (event) {
// close function
});
});
Here is my css:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

You are using the same id for all .image-embed-item in:
$(".image-embed-item").attr("id", "imageresource");
And then use $('#imageresource').attr('src') to set the preview.
That's why it always show the first image in the modal. You can solve it by changing $('#imageresource').attr('src') to $(this).find('img').attr('src'). Something like this:
window.addEventListener('DOMContentLoaded', function () {
// add data-toggle class to all lightbox elements
$(".lightbox").attr("data-toggle", "lightbox");
// click event for data toggle
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
// use image source from clicked image
$('#imagepreview').attr('src', $(this).find('img').attr('src'));
$('.modal').css('display', 'block');
});
$(document).on('click', $('.closeModal'), function (event) {
// close function
});
});

trigger input file click on modal on first page load doesn't fire

Using angularJS, I have a modal that should trigger a input file in order to upload a file.
this is the function that triggers the click
function triggerUploadMethod()
{
inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.onchange = photoChosen;
inputFile.click();
}
The thing that is boring me is that on the FIRST page load, when I open the modal, the trigger is not fired. If I close the modal and open again, the trigger WORKS, and it will keep working until the next page load... What can be happening to not work on the first page load?
This only happens on Chrome. On Firefox, Edge and Internet Explorer the trigger works every time, even after a page load...

As a disclaimer I've never used Angular and since you didn't provide any of the other code, I went with vanilla JavaScript.
As far as I can tell, the error in your code is not from what you posted above. In the snippet below, I have taken code from W3Schools How to Make a Modal Box With CSS and JavaScript and then added your function to the part where it opens the modal on button click and it works fine (I'm on Chrome).
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// This variable isn't defined in your code so I just assume
// it's somewhere at the top.
var inputFile;
// When the user clicks on the button, open the modal.
// Also creates your input and clicks it.
btn.onclick = function() {
modal.style.display = "block";
triggerUploadMethod();
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Create the input element and click it.
function triggerUploadMethod() {
inputFile = document.createElement('input');
inputFile.type = 'file';
// I have no idea what this is so I can't include it.
//inputFile.onchange = photoChosen;
inputFile.click();
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>

Javascript: Iterate through ID -> cannot set property 'onclick' of null javascript

I'm trying to code a modal with a slideshow. It works fine for the first picture when I type '1' instead of 'i' in the for loop. When I use 'i' in the for loop I get the error message "cannot set property 'onclick' of null javascript"
I know that this is some very beginner stuff... but I'm sitting here now for hours to find a solution...
Thank you for your help!
window.onload = function() {
var modal;
var prefixModal = 'myModal';
var img;
var prefixmyImg = 'myImg';
var modalImg;
var prefixmodalImg = 'img';
for (var i = 0; i <= 6; i++) {
modal = document.getElementById(prefixModal + i);
img = document.getElementById(prefixmyImg + i);
modalImg = document.getElementById(prefixmodalImg + i);
}
var closey = document.getElementsByClassName('close');
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
};
.container_slideshow {
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
display: block;
height: 8rem;
margin-top: 1rem;
min-width: 100%;
}
.content_slideshow {
display: inline-block;
height: 100%;
width: 40vw;
background-color: darkgray;
margin-left: 0;
margin-right: .5rem;
}
.content_slideshow:last-child {
margin: 0;
}
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 50%; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: scroll; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(57,61,69,0.6); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close2 {
display: none;
position: absolute;
color: #f1f1f1;
transition: 0.3s;
width: 100%;
height: 100%;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
HTML:
<div class="container_slideshow">
<div class="content_slideshow">
<!-- Trigger the Modal -->
<img class="slider" id="myImg1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/SilburyHill_gobeirne.jpg/1200px-SilburyHill_gobeirne.jpg" alt="">
<!-- The Modal -->
<a class="close">
<div id="myModal1" class="modal">
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img1">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</a>
</div>
<div class="content_slideshow">
<!-- Trigger the Modal -->
<img class="slider" id="myImg2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/SilburyHill_gobeirne.jpg/1200px-SilburyHill_gobeirne.jpg" alt="">
<!-- The Modal -->
<a class="close">
<div id="myModal2" class="modal">
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img2">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</a>
</div>
</div>

The reason is for (var i = 0; i <= 6; i++) {. The count starts from 0 and it will try to find a dom element with id myModal6.
Change the for loop to
for (var i = 0; i < 6; i++) {

After a very rough look I'd say the DOM node with id "myModal0" doesn't exist (which is most likely true for your other prefixes as well it just happens to be the first you try to get the DOM node of.
Keep in mind that your loop starts at 0 not 1.
Also keep in mind that each node you are trying to assign must exist beforehand! So you either have to have each element in your html file or create them on the fly with JS.
If you wanted to start at 1 you could do:
for (let i=1; i<x; i++) {
// do smth ...
}

It looks like this code:
for (var i = 0; i <= 6; i++) {
modal = document.getElementById(prefixModal + i);
img = document.getElementById(prefixmyImg + i);
modalImg = document.getElementById(prefixmodalImg + i);
// NOTE: put the code that does something IN HERE,
// right now it's outside the loop
}
is iterating through all elements in the HTML document that have ids from "myModal0" through "myModal6", and the same for the other two prefixes "myImg" and "img".
I don't see all these elements in your HTML document. I only see "myModal1" and "myModal2" (as well as elements 1 and 2 of "myImg" and "img".
It looks like you either need to reduce the size of the loop so it only iterates through the elements you actually have, or you need to fill out the rest of the HTML and put in the rest of the elements (all the way from 0 through (and including) 6.
Oh and there's another thing to remember here too, none of your actual code that is causing the error, is inside the loop. All you do in the loop is setting the names of the variables. So the later code is always using "myModal6", because that is the last thing the loop sets the names to.

Adding custom animations for dialog box when popup

I want to add effects to my dialog box as in this link.
I tried several examples in other sites and SO as well, but no joy. My dialog box takes the whole browser width and height.
Here's the button i'm clicking to open the dialog box, modal HTML Code, some of the CSS styles related to Dialog Box and JS Code to open the dialog Box:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0px;
top: 0px;
width: 100%;
/* Full width */
height: 620px;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
overflow-y: hidden;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
/*margin: 15% auto; 15% from the top and centered */
padding: 20px 40px 20px 40px;
border: 1px solid #888;
/*width: 80%; Could be more or less, depending on screen size */
}
<div class="site-body">
<h1>Click the Button to Open Modal</h1>
<button id="myBtn" class="modal-btn">Open Modal</button>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<image class="logo" src="images/logo.png" />
<div class="header">
<div class="reference">
<div class="row font-size1">
<div class="label"><strong>OR Ref:</strong>
</div>
<div class="value"><strong>1-2-123456789</strong>
</div>
</div>
<div class="row font-size1">
<div class="label"><strong>CP Ref:</strong>
</div>
<div class="value"><strong>hID-prod123456</strong>
</div>
</div>
</div>
<div class="search">
<div class="row right-align">
<div class="left-align label show-right-margin"><strong>Note Type: </strong>
</div>
<select class="left-align">
<option>All Notes</option>
<option>Any</option>
</select>
<button class="search-btn left-align">Search</button>
</div>
</div>
</div>
<div class="error">Sorry, We couldn't fetch all of the notes you asked for. Please try again or report an error if it continues to happen
</div>
</div>
How to add animations to dialog box when poping up as in this link?

JQuery has a fairly strait forward method for showing/hiding elements with an animation. It isn't exactly what is in the example but fairly close and, again, very simple.
// When the user clicks on the button, open the modal
btn.onclick = function() {
$('.modal').show('fast');
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('.modal').hide('fast');
}
You could also experiment with JQuery slideDown() and slideUp() functions (just replace show() and hide() with these two respectively).