Develop Reference

showing an img in a div after upload

I am trying to upload an image with javascript and display it in a div but the method I'm using right now is not working. I tried using both an img tag and just setting it as a background-image but both won't show the img in the div but when I inspect the div it shows that the URL has successfully been inserted. Where did I go wrong? Any help is appreciated. Thanks in advance.
const image_input = document.querySelector("#image_input");
image_input.addEventListener("change", function() {
const reader = new FileReader();
reader.addEventListener("load", () => {
const uploaded_image = reader.result;
$('.imgCon').attr("background-image", `url(${uploaded_image})`);
$('.imgCon2 img').attr("src", `url(${uploaded_image})`);
});
reader.readAsDataURL(this.files[0]);
});
.imgCon {
position: absolute;
top: 30%;
width: 40%;
height: 40%;
border-radius: 8px;
background-color: #000000;
/* background-size: 100%; */
background-position: center;
background-size: cover;
}
.imgCon2 {
position: absolute;
top: 30%;
right: 0%;
width: 40%;
height: 40%;
border-radius: 8px;
background-color: #000000;
/* background-size: 100%; */
background-position: center;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" title="" id="image_input" accept="image/png, image/jpg">
<div class="imgCon">
</div>
<div class="imgCon2">
<img src="" />
</div>

Change to:
$('.imgCon').css("background-image", `url(${uploaded_image})`);
$('.imgCon2 img').attr("src", uploaded_image);
attr will set an attribute on the element i.e <div background-image="url(...)" and src="url(...)" is incorrect.

Modal close clicking outside the content

Can someone please help me? I need to be able to close this modal when I click outside the content; this is my code:
$(document).ready(function(){
$(".add-roles-btn").click(function(){
$("#modal1").addClass("show-modal");
});
});
.overlay {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(50, 65, 97, 0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .3s; }
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default; }
.overlay__content {
position: absolute;
top: 44%;
left: 55.5%;
padding: 4.8rem 6.4rem;
width: 540px;
background-color: #ffffff;
box-shadow: 0 2rem 4rem rgba(81, 136, 255, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(0.25);
transition: all .4s .2s; }
#media only screen and (max-width: 61.875em) {
.overlay__content {
top: 50%;
left: 50%; } }
#media only screen and (max-width: 47em) {
.overlay__content {
padding: 4rem 6.5rem;
width: 500px; } }
#media only screen and (max-width: 37.5em) {
.overlay__content {
padding: 4rem 6.5rem;
width: 100%; } }
.show-modal {
opacity: 1;
visibility: visible; }
.show-modal .overlay__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1); }
<button type="button" class="add-roles-btn"><i class="material-icons icon--middle icon--pr-8">add</i>Add roles</button>
<!-- Pop up modal -->
<div class="overlay" id="modal1">
<div class="overlay__content">
<h3 class="heading-primary">Add role</h3>
<form action="#">
<div class="form__group">
<input type="text" class="form__input" id="role_title">
<label for="role_title" class="form__label">Role Title</label>
</div>
<div class="form__group">
<textarea name="" class="form__input resize-none u-margin-bottom-0" id="role_description" rows="5"></textarea>
<label for="role_description" class="form__label">Role Description</label>
</div>
<div class="align-right">
<button class="btn btn--primary capitalize add-role-btn">Add Role <i class="material-icons icon--sub add-modal-role">add</i></button>
</div>
</form>
</div>
</div>
<!-- Pop up modal -->
As you can see it has the JS code on click it shows the modal, but I am not able to change it when you click outside to be closed; how can this be done? I have created this from scratch. I do not want to use some library or something; can you help me? I am new on JavaScript and coding on general. I would really appreciate it; thank you.

Here is the updated code, basically the concept was listening to click events on the body and if the DOM parent chain on the element doesn't reach the modal modal1 - the click is outside of it and therefore the modal can be closed.
Another important note was calling e.stopPropagation as the body event would be called after the button event, causing the window to be closed. Calling e.stopPropgation would mean that when the button is clicked, the "larger" body event won't trigger.
$(document).ready(function(){
$(".add-roles-btn").click(function(e){
$("#modal1").addClass("show-modal");
// This is required so that when clicking the button the click event wont propogate to the body event
e.stopPropagation()
});
// This function listens to all clicks on the document and gets the event data e
$('body').click(function(e) {
target = e.target;
// If the clicked target isnt under modal1 - that means it won't be found in its parents
if (($(target)).parents('#modal1').length == 0) {
$("#modal1").removeClass("show-modal");
}
})
});
$(document).ready(function(){
$(".add-roles-btn").click(function(e){
$("#modal1").addClass("show-modal");
// This is required so that when clicking the button the click event wont propogate to the body event
e.stopPropagation()
});
// This function listens to all clicks on the document and gets the event data e
$('body').click(function(e) {
target = e.target;
// If the clicked target isnt under modal1 - that means it won't be found in its parents
if (($(target)).parents('#modal1').length == 0) {
$("#modal1").removeClass("show-modal");
}
})
});
.overlay {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(50, 65, 97, 0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .3s; }
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default; }
.overlay__content {
position: absolute;
top: 44%;
left: 55.5%;
padding: 4.8rem 6.4rem;
width: 540px;
background-color: #ffffff;
box-shadow: 0 2rem 4rem rgba(81, 136, 255, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(0.25);
transition: all .4s .2s; }
#media only screen and (max-width: 61.875em) {
.overlay__content {
top: 50%;
left: 50%; } }
#media only screen and (max-width: 47em) {
.overlay__content {
padding: 4rem 6.5rem;
width: 500px; } }
#media only screen and (max-width: 37.5em) {
.overlay__content {
padding: 4rem 6.5rem;
width: 100%; } }
.show-modal {
opacity: 1;
visibility: visible; }
.show-modal .overlay__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="add-roles-btn"><i class="material-icons icon--middle icon--pr-8">add</i>Add roles</button>
<!-- Pop up modal -->
<div class="overlay" id="modal1">
<div class="overlay__content">
<h3 class="heading-primary">Add role</h3>
<form action="#">
<div class="form__group">
<input type="text" class="form__input" id="role_title">
<label for="role_title" class="form__label">Role Title</label>
</div>
<div class="form__group">
<textarea name="" class="form__input resize-none u-margin-bottom-0" id="role_description" rows="5"></textarea>
<label for="role_description" class="form__label">Role Description</label>
</div>
<div class="align-right">
<button class="btn btn--primary capitalize add-role-btn">Add Role <i class="material-icons icon--sub add-modal-role">add</i></button>
</div>
</form>
</div>
</div>
<!-- Pop up modal -->

You stated you don't want to use any library so here's a vanilla JS solution.
To provide that, I also "translated" your jQuery code to vanilla JS:
document.getElementsByClassName('add-roles-btn')[0].onclick = function() {
document.getElementById('modal1').classList.add('show-modal');
}
// This block hides the modal when the user clicks outside of it
window.onclick = function(event) {
if (event.target == document.getElementById('modal1')) {
document.getElementById('modal1').style.display = 'none';
}
}
Here's a working example with the rest of your code.
If you want the ability to re-open it, this should work:
var modal = document.getElementById('modal1');
document.getElementsByClassName('add-roles-btn')[0].onclick = function() {
modal.classList.add('show-modal');
}
window.onclick = function(event) {
if (event.target == modal) {
modal.classList.remove('show-modal');
}
}
Here's the updated code.

Highlight a checkbox when an other check box is clicked

I have multiple checkboxes that have the same ID for different screen resolutions. When I click on the Check 1 label the checkmark gets highlighted. In the example provided both check 1 and check2 have the same IDs, when I click on check 1 I want the check mark of check 2 too also be highlighted and vice versa.
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A">Check1
<span for="10A" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A">Check2
<span for="10A" class="checkmark"></span >
</label >
</div>
How do I highlight all the checkmarks of the same IDS?

Highlighting is in your case based on the :checked selector -> if the checkbox is checked, the span behind it is highlighted.
In your case you will need javascript to react on the onchange / click event on the checkbox and trigger the other checkbox aswell.
A basic setup how to use it, you will need to alter that to your needs:
// use click or onchange
document.getElementById('checkbox1').addEventListener('click', function () {
document.getElementById('checkbox2').click();
});

You can do it with this javascript code.
This code does the following:
Add an event listener to the change event of both check boxes.
Set the checked property of the other checkbox to the same value as the checked property of the checkbox where the change event triggered on.
Note: I changed the id's of the check boxes to make them unique.
document.getElementById('10A-1').addEventListener('change', function () {
document.getElementById('10A-2').checked = this.checked;
});
document.getElementById('10A-2').addEventListener('change', function () {
document.getElementById('10A-1').checked = this.checked;
});
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A-1">Check1
<span for="10A-1" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A-2">Check2
<span for="10A-2" class="checkmark"></span >
</label >
</div>

//Run it after document ready
var checkbox = $('input[type="checkbox"]');
$(checkbox).on('click', function(){
if($(this).is(':checked')){
$(checkbox).prop('checked', true);
}
else{
$(checkbox).prop('checked', false);
}
});

Adding Inputs to a Form Dynamically Via Javascript

I'm fixing up a form that had a series of areas with two or three duplicate inputs for things like employer name, position, etceteras. I thought it would be easier to just dynamically add them with an onclick button but I am having two major problems: (1) When the onclick event create a new line of inputs the label attributes seems to abandon their css and (2) When you click into the input of the form the label should raise up, but the inputs no longer raise their respective labels.
My questions are (1) What is required to amend the css to keep the labels relative to their inputs and (2) Why/How are the inputs working in the first level of inputs and then not the second? Also, how can I fix this?
Any help would be great!
I've recreated the problem in a minor way in the code pen below. If you click inside the inputs you'll understand what I mean by "raising."
CodePen Example : http://codepen.io/theodore_steiner/pen/WGOaAR
HTML:
<p class="subtitleDirection">Please list your employment histroy in chronological order, beginning with your current position (Limit of Three)</p>
<div class="clearFix"></div>
<div id="employmentHistory">
<div class="input-group" id="employment-history-1">
<input type="text" name="job_1" />
<label class="schoolBoard">School Board</label>
<input type="text" name="position_1" />
<label class="position">Position</label>
<input type="text" name="years_1" />
<label class="years">Years</label>
<button type="button" id="add_job()" onclick="addJob()" value="+">+</button>
</div>
</div><!--end of employmentHistory Div-->
CSS:
input
{
background: none;
border: 1px solid #21a1e1;
margin: 15px;
margin-top: 25px;
margin-left: 15px;
margin-bottom: 25px;
display: inline-block;
height: 30px;
width: 320px;
float: left;
}
.input-group label
{
position: absolute;
left: 17px;
top: 42px;
font-style: italic;
font-size: 17.5px;
color: #999;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
transition: all 0.2s ease;
}
.input-group input:focus+label,
.input-group input.has-value+label {
top: 20px;
font-size: 12px;
color: #aaa;
}
input:focus,
input:active
{
outline: none;
}
input[type="text"],
input[type="email"]
{
border: none;
border-bottom: 1px solid #b3c1cc;
}
.input-group
{
position: relative;
}
#teaching-experience-years input
{
margin-left: 70px;
}
#teaching-experience-years label
{
left: 421px;
}
#employment-history-1 input
{
width: 220px;
float: left;
}
#employment-history-1 label.position
{
left: 265px;
}
#employment-history-1 label.schoolBoard
{
left: 15px;
}
#employment-history-1 label.years
{
left: 514px;
}
JS:
var i = 1;
function addJob()
{
if( i <= 3 )
{
i++;
var div = document.createElement("div");
div.innerHTML = '<div class="input-group" id="employment-history-1"><label class="schoolBoard">School Board</label><input type="text" name="job_'+i+'"><label class="position">Position</label><input type="text" name="position_'+i+'"><label class="years">Years</label><input type="text" name="years_'+i+'"><button type="button" id="add_job()" onclick="addJob()" value="+"></button></div>';
document.getElementById("employmentHistory").appendChild(div);
}
};

JQuery Custom LightBox - Opacity Fade

I am building my own jQuery light box but am running into a small issue. The html page has 6 images on it and when one is clicked an overlay is displayed over the whole page with the image in the center.
The issue I am running into is that the animation that controls the light box displaying is not smooth, it produces a sort of outwards in effect and I would like it to all be effected as one. The animation to fade it out works perfectly though, so I am not sure what I am missing ?
Here is a jsFiddle: http://jsfiddle.net/hqsapk5a/
My HTML:
<div class="page-wrapper">
<div class="grid">
<div class="image-thumb-wrapper">
<img src="img/Casinogames_2MillionBC.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_7thheaven.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_10sOrBetter.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_21BurnBlackjack.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/Casinogames_AfterNightFalls.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinoGames_AllAmerican.jpg" class="image-thumb" />
</div>
</div>
</div>
<div class="light-box">
<div class="light-box-overlay">
</div>
<div class="light-box-wrapper">
<img src="" id="light-box-image" />
</div>
x
</div>
My jQuery:
$(document).ready( function() {
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
$('.light-box-close').click( function(e) {
event.preventDefault(e);
$('.light-box').css('opacity', '1').fadeTo(100, 0, function() {
$('.light-box').css('z-index', '0');
}); });
});
My CSS:
.page-wrapper {
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
.grid {
width: 600px;
height: 552px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
text-align: center;
margin: auto;
background-color: #DFDFDF;
border: 2px solid #999;
border-radius: 5px;
padding: 20px 0px;
}
.image-thumb-wrapper {
width: 228px;
display: inline-block;
margin: 5px;
}
.image-thumb:hover {
cursor: pointer;
}
.light-box {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
.light-box-overlay {
position: absolute;
top: 0;
left: 0;
background-color: #000;
height: 100%;
width: 100%;
opacity: 0.8;
}
img#light-box-image {
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 2px solid #fff;
background-color: #999;
padding: 25px;
border-radius: 5px;
}
.light-box {
opacity: 0;
}
a.light-box-close {
color: #fff;
font-size: 1.2em;
position: absolute;
text-decoration: none;
right: 10px;
top: 5px;
}
a.light-box-close:hover {
text-decoration: underline;
}

You are changing the z-index of .light-box after the fade in animation completes which is why you see it display strangely as it jumps in front of the other content.
Change this block:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
To this:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css({'z-index': '2','opacity':'0'}).fadeTo(100, 1);
});
DEMO

Is this what you are looking for?
You just have to make $('.light-box').css('z-index', '2'); before it fades in.
What is happening is that you are putting the z-index: 2 while it fades in that's why it acts weird.

Expanding on previous answers, beyond changing the z-index in css, try this ...
$('.light-box').css('z-index', '2').animate({ opacity: 0 }, 500).fadeTo(100, 1);
This will give you a much smoother animation; the time can be adjusted higher or lower from the 500ms.