Develop Reference

How to target and display error message with data-error in JavaScript

I'de like to validate a form with data propriety data-error and data-error-visible. I want to display the error message only with JS and don't use anymore HTML codes to do it.
The current code I use is below and I left only the first input :
/******
*
FORM VALIDATION
*
******/
// DOM
const formData = document.querySelectorAll(".formData");
const form = document.getElementById("form");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity");
const tournament = document.getElementsByName("location");
const checkbox = document.getElementsByName("checkbox");
// form preventDefault + checkInputs function
form.addEventListener('submit', e => {
e.preventDefault();
});
/***********
*
DATA-ATTRIBUTE
*
************/
// set error message to "true"
const displayErrorMsg = (element, message) => {
const formData = element
formData.setAttribute("data-error", message)
formData.setAttribute("data-error-visible", true)
}
// Function for remove one error msg
const removeErrorMsg = (element) => {
const formData = element
formData.removeAttribute('data-error')
formData.removeAttribute('data-error-visible')
}
/***********
*
* VALIDATION FUNCTION
*
************/
function validate(formData) {
let isFormValid = true;
// Regex
const nameRegex = /[a-zA-Z]+/i;
// First name
if (firstName.value.match(nameRegex) || firstName.value.length < 2) {
isFormValid = false;
displayErrorMsg(firstName);
} else {
removeErrorMsg(firstName);
}
}
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked + .checkbox-label .checkbox-icon::after,
.checkbox-input:checked + .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked + .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
#media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
#keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
<form
id="form"
name="reserve"
action="index.html"
method="get"
>
<div class="formData">
<label for="firstName">Prénom</label><br>
<input
class="text-control"
type="text"
id="firstName"
name="first"
minlength="2"
required
/><br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>

Add/Remove class to get a menu to display

I started programming the mobile version of my nav menu earlier. I had to rework my #serviceNav to get it to work in a mobile setting. When doing this I changed my javascript from this:
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('active');
$('body').css('overflow', 'auto');
e.preventDefault();
});
To this:
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
//$('.infoTitles:before').addClass('opened');
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
The issue that I am having now that I previously didn't with my javascript code is that now my desktop media query version of my #serviceNav is not displaying, however it does display and function in the mobile setting. The trigger for this menu is the menu item called "Solutions". You can see that in a media query over 640px that nothing happens, but 640px or less it applies the fadeDown function.
Does anyone see why this is not working for the larger version media query?
Here is a jsfiddle
Full code:
$('#mobile-button').on('click', function () {
$('#nav-pop').addClass('active');
$('html').addClass('is-navOpen');
});
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

There is a lot going on here and frankly, it's hard to decipher but I think "Nothing happens" is relative. When inspecting the element in dev console you can see the Javascript styling is being added appropriately. So something is happening, it's simply happening off screen because you've told it to. I think the culprit here, is the >640px positioning of your #serviceNav element is maintained at top: -40vh; That's a lot. When removing this value the button displays as follows:
Note: you will have to change some other things around as this displays it on page load. But you get the idea

Click function never reading else statement to remove class

I have been stuck on a sliding down menu, but have made some headway with it. I had to modify a lot to make it work for both desktop and mobile viewports. The only thing I am stuck on now is getting the menu to close in a < 640px viewport.
In my snippet and jsfiddle below there is a lot of code, but the only code that really matters to this question is the javascript below:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
Basically my else statement is now removing the class 'activeSol` and then sliding up the selection.
In the mobile viewport, after clicking on "Solutions" the menu expands, but when you click on "Solutions" again, nothing happens.
It seems as if the variable relative is never reading as the class appended to it, making the click function run else. I did a simple console.log and the else never runs. I tried changing the click function to a change, but then the menu never triggers.
Does anyone see what is causing my else statement to not removeClass from serviceNav and slideUp?
JSfiddle link to see in mobile viewport.
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('activeSol');
$('body').css('overflow', 'auto');
e.preventDefault();
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

var relative = $(this);
Is picking the serviceClick list item (li) and then you are checking
if (!relative.hasClass('activeSol')) {
but you never added the class to the li, instead you added it to the div #serviceNav.
I think changing
if (!relative.hasClass('activeSol')) {
to
if (!$('#serviceNav').hasClass('activeSol')) {
should work.

Your shouldn't check for $("#serviceClick") for class activeSol, should check on $("#serviceNav") instead.
if (!$('#serviceNav').hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}

relative doesn't have the class 'activeSol' and will never have it, in order to have it toggle the visibility of your menu, you should add and remove classes to it, like this:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('opened')) { // if it's not opened
relative.addClass('opened'); // open it
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else { // if it's opened
relative.removeClass('opened'); // close it
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});

Javascript button to open a modal; button doesn't work when in a list

Basically, I want to press a button (matched to a person) that brings up a pop-up (right now using a modal) of an of another page which will vary based on which person it is. I am using a basic template from the w3school and I can get one button working, but when I try and add a button into the list to match a person, the modal does not open. Obviously for each button to be assigned to one person they will need to have their own element id, but why cant I get even one button to work?
Its the "show on map" button in the snippet below.
The top most "show on map" button works in the sense that it brings up the modal, but the same buttons in the list do nothing.
Thank you in advance.
// 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 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";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/*DESKTOP*/
/* The Modal (background) */
#media screen and (min-width: 801px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
/*MOBILE*/
/* The Modal (background) */
#media screen and (max-width: 800px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background-color: #810008;
}
a.menu-link {
color: #ffc948;
display: block;
text-decoration: none;
padding-top: 25px;
}
.menu-link span {
border-bottom: solid 3px #000;
border-top: double 10px #000;
display: inline-block;
height: 4px;
margin: 0 5px -3px 0;
width: 30px;
}
.menu-link:hover span {
border-color: #666;
}
.menu,
.menu > ul,
.menu > ul ul {
clear: both;
display: flex;
flex-flow: column;
margin: 0;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-left: 15%;
}
.menu.active {
background: #640006;
border-bottom: 1px solid #64006;
border-top: 1px solid #64006;
margin: 1em 0 1em -12px;
max-height: 55em;
width: 100vw;
}
.js .menu > ul ul.active {
margin: 0;
max-height: 55em;
padding: 0;
}
.menu > ul {
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
.menu li a {
color: #ffc948;
display: inline-block;
font-size: 1.04em;
letter-spacing: .05em;
line-height: 2.5em;
text-decoration: none;
}
span.has-subnav {
display: block;
font-size: 1em;
line-height: 2.5em;
position: absolute;
right: 20px;
padding: 0 0.5em;
top: 0;
}
/*NAV MENU CSS MOBILE */
#media screen and (max-width: 800px) {
.menu,
.menu > ul ul {
margin: 0;
max-height: 0;
overflow: hidden;
}
.menu li a {
border-bottom: 1px solid #ffc948;
display: block;
padding-left: 15px;
}
.menu li li a {
padding-left: 50px;
}
.menu li:last-child a {
border: none;
}
.menu li li:last-child a {
border-bottom: 1px solid #ffc948;
}
.menu li:hover {
background: #640006;
}
}
.menu li a:hover {
background: #ffc948;
color: black;
}
/*NAV MENU CSS DESKTOP*/
#media screen and (min-width: 801px) {
nav {
border-bottom: 1px solid #ffc948;
}
a.menu-link {
display: none;
}
.js .menu,
.js .menu > ul ul {
max-height: none;
overflow: visible;
}
.js .menu > ul li:hover > ul {
display: flex;
}
.menu ul {
display: flex;
flex-flow: row;
height: 44px;
justify-content: space-between;
margin: 0;
padding: 0;
}
.menu span.has-subnav {
display: none;
}
.menu li a:hover {
color: rgb(0, 0, 0);
}
.menu li li a:hover {
background: rgba(0, 0, 0, 0.1);
color: #fff;
}
.menu ul ul {
background: #640006;
border: solid 1px rgba(0, 0, 0, 1);
border-radius: 2px 2px 5px 5px;
border-top: solid 2px transparent;
display: none;
height: auto;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
top: 43px;
width: 150px;
z-index: 999;
}
.chrome .js .menu > ul ul {
top: 43px;
}
.menu ul ul.wide {
width: 300px;
}
.menu ul ul li {
border-bottom: solid 1px rgba(0, 0, 0, 0.5);
display: inline-block;
position: relative;
}
.menu > ul ul li:last-child {
border-bottom: none;
}
.menu ul ul li a {
display: block;
padding-left: 10px;
}
}
a {
text-decoration: none;
color: #ffc948;
}
ul,
li {
list-style: none;
vertical-align: middle;
}
ul.list {
padding-left: 20px;
}
.alphalist {
position: fixed;
right: 0;
font-size: 12px;
text-align: center;
display: inline-block;
z-index: 2;
top: auto;
height: 100%;
}
.list li {
border-bottom: 1px solid #ffc948;
line-height: 44px;
height: 44px;
}
.list .divider {
font-size: 20px;
font-weight: bold;
background: #fafafa;
box-shadow: -60px 0 0 #fafafa;
line-height: 28px;
height: 28px;
margin-top: -1px;
position: -webkit-sticky;
top: 44px;
}
h1 {
color: #ffc948;
font-size: 30px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: 30px;
}
h2 {
color: #ffc948;
font-size: 20px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: auto;
margin: auto;
}
h3 {
line-height: 44px;
height: 44px;
color: #ffc948;
width: 100%;
position: absolute;
text-align: center;
z-index: 10;
}
#scrolling {
padding-top: 44px;
padding-right: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
#media (-webkit-min-device-pixel-ratio: 2) {
.list .divider {
top: 0;
}
}
.modal-button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
.button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
<button id="myBtn">Show on Map</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times</span>
<h2>Career Fair Map</h2>
</div>
<div class="modal-body">
<iframe src="map.html" width="500px" height="700px">
</iframe>
</div>
</div>
</div>
<div id="scrolling">
<ul class="list">
<li class="divider" id="a">A</li>
<li>Amelia Webster
<button class="button" onclick="alert('## has been added to favorites.')">Favorite</button>
<button class="button" id="myBtn">Show on Map</button>
<li>Andrew WifKinson
</li>
<li>Archibald Carrington
<button class="modal-button" id="myBtn">Show on Map</button>
</li>
<li>Ariana Clapton
</li>
<li>Ashley Carter
</li>
<li class="divider" id="b">B</li>
<li>Barney Mercer
</li>
<li>Barry Goodman
</li>
<li>Brenda Brown
</li>
<li>Brooke Creighton
</li>
<li class="divider" id="c">C</li>
<li>Camilla Kapinksy
</li>
<li>Caroline Miller
</li>
<li>Charlotte Gardner
</li>
<li>Cynthia Monroe
</li>
<li class="divider" id="e">E</li>
<li>Elizabeth Abramson
</li>
<li>Elizabeth Cook
</li>
<li>Ernie Carter
</li>
<li>Evelyn Nash
</li>
<li class="divider" id="f">F</li>
<li>Fyodor Dostoevsky
</li>
</ul>
</div>

Id's should always be unique.
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
That is also the origin of your problem. document.getElementById("theid"); will return the first element (and also the only element expected to use this id). However you want to assign your onclick method to multiple buttons.
You should consider to use the name attribute instead. Then you can use document.getElementsByName("myBtn") in order to loop through all buttons and register your listener. The code below contains comments that should explain my changes.
// Get the modal
var modal = document.getElementById('myModal');
// Get all buttons that should opens the modal
var btns = document.getElementsByName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// The iframe inside of the Modal
var modalIFrame = document.getElementById("modal-iframe");
// When the user clicks the button, open the modal
for(var i = 0; i < btns.length; i++) {
(function(i) {
var btn = btns[i];
// you should use addEventListener("click", function() {}); here
btn.onclick = function() {
// this will set the iframe url every time you press a button and add the "id" of the button that was pressed as a parameter. "id" is just the current index of the for loop for now.
modalIFrame.setAttribute("src", "map.html?id=" + i);
modal.style.display = "block";
}
})(i);
}
// 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";
}
}
/*DESKTOP*/
/* The Modal (background) */
#media screen and (min-width: 801px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
/*MOBILE*/
/* The Modal (background) */
#media screen and (max-width: 800px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background-color: #810008;
}
a.menu-link {
color: #ffc948;
display: block;
text-decoration: none;
padding-top: 25px;
}
.menu-link span {
border-bottom: solid 3px #000;
border-top: double 10px #000;
display: inline-block;
height: 4px;
margin: 0 5px -3px 0;
width: 30px;
}
.menu-link:hover span {
border-color: #666;
}
.menu,
.menu > ul,
.menu > ul ul {
clear: both;
display: flex;
flex-flow: column;
margin: 0;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-left: 15%;
}
.menu.active {
background: #640006;
border-bottom: 1px solid #64006;
border-top: 1px solid #64006;
margin: 1em 0 1em -12px;
max-height: 55em;
width: 100vw;
}
.js .menu > ul ul.active {
margin: 0;
max-height: 55em;
padding: 0;
}
.menu > ul {
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
.menu li a {
color: #ffc948;
display: inline-block;
font-size: 1.04em;
letter-spacing: .05em;
line-height: 2.5em;
text-decoration: none;
}
span.has-subnav {
display: block;
font-size: 1em;
line-height: 2.5em;
position: absolute;
right: 20px;
padding: 0 0.5em;
top: 0;
}
/*NAV MENU CSS MOBILE */
#media screen and (max-width: 800px) {
.menu,
.menu > ul ul {
margin: 0;
max-height: 0;
overflow: hidden;
}
.menu li a {
border-bottom: 1px solid #ffc948;
display: block;
padding-left: 15px;
}
.menu li li a {
padding-left: 50px;
}
.menu li:last-child a {
border: none;
}
.menu li li:last-child a {
border-bottom: 1px solid #ffc948;
}
.menu li:hover {
background: #640006;
}
}
.menu li a:hover {
background: #ffc948;
color: black;
}
/*NAV MENU CSS DESKTOP*/
#media screen and (min-width: 801px) {
nav {
border-bottom: 1px solid #ffc948;
}
a.menu-link {
display: none;
}
.js .menu,
.js .menu > ul ul {
max-height: none;
overflow: visible;
}
.js .menu > ul li:hover > ul {
display: flex;
}
.menu ul {
display: flex;
flex-flow: row;
height: 44px;
justify-content: space-between;
margin: 0;
padding: 0;
}
.menu span.has-subnav {
display: none;
}
.menu li a:hover {
color: rgb(0, 0, 0);
}
.menu li li a:hover {
background: rgba(0, 0, 0, 0.1);
color: #fff;
}
.menu ul ul {
background: #640006;
border: solid 1px rgba(0, 0, 0, 1);
border-radius: 2px 2px 5px 5px;
border-top: solid 2px transparent;
display: none;
height: auto;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
top: 43px;
width: 150px;
z-index: 999;
}
.chrome .js .menu > ul ul {
top: 43px;
}
.menu ul ul.wide {
width: 300px;
}
.menu ul ul li {
border-bottom: solid 1px rgba(0, 0, 0, 0.5);
display: inline-block;
position: relative;
}
.menu > ul ul li:last-child {
border-bottom: none;
}
.menu ul ul li a {
display: block;
padding-left: 10px;
}
}
a {
text-decoration: none;
color: #ffc948;
}
ul,
li {
list-style: none;
vertical-align: middle;
}
ul.list {
padding-left: 20px;
}
.alphalist {
position: fixed;
right: 0;
font-size: 12px;
text-align: center;
display: inline-block;
z-index: 2;
top: auto;
height: 100%;
}
.list li {
border-bottom: 1px solid #ffc948;
line-height: 44px;
height: 44px;
}
.list .divider {
font-size: 20px;
font-weight: bold;
background: #fafafa;
box-shadow: -60px 0 0 #fafafa;
line-height: 28px;
height: 28px;
margin-top: -1px;
position: -webkit-sticky;
top: 44px;
}
h1 {
color: #ffc948;
font-size: 30px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: 30px;
}
h2 {
color: #ffc948;
font-size: 20px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: auto;
margin: auto;
}
h3 {
line-height: 44px;
height: 44px;
color: #ffc948;
width: 100%;
position: absolute;
text-align: center;
z-index: 10;
}
#scrolling {
padding-top: 44px;
padding-right: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
#media (-webkit-min-device-pixel-ratio: 2) {
.list .divider {
top: 0;
}
}
.modal-button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
.button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
<!-- Changed id="myBtn" to name="myBtn" -->
<button name="myBtn">Show on Map</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times</span>
<h2>Career Fair Map</h2>
</div>
<div class="modal-body">
<iframe id="modal-iframe" src="map.html" width="500px" height="700px">
</iframe>
</div>
</div>
</div>
<div id="scrolling">
<ul class="list">
<li class="divider" id="a">A</li>
<li>Amelia Webster
<button class="button" onclick="alert('## has been added to favorites.')">Favorite</button>
<!-- Changed id="myBtn" to name="myBtn" -->
<button class="button" name="myBtn">Show on Map</button>
<li>Andrew WifKinson
</li>
<li>Archibald Carrington
<!-- Changed id="myBtn" to name="myBtn" -->
<button class="modal-button" name="myBtn">Show on Map</button>
</li>
<li>Ariana Clapton
</li>
<li>Ashley Carter
</li>
<li class="divider" id="b">B</li>
<li>Barney Mercer
</li>
<li>Barry Goodman
</li>
<li>Brenda Brown
</li>
<li>Brooke Creighton
</li>
<li class="divider" id="c">C</li>
<li>Camilla Kapinksy
</li>
<li>Caroline Miller
</li>
<li>Charlotte Gardner
</li>
<li>Cynthia Monroe
</li>
<li class="divider" id="e">E</li>
<li>Elizabeth Abramson
</li>
<li>Elizabeth Cook
</li>
<li>Ernie Carter
</li>
<li>Evelyn Nash
</li>
<li class="divider" id="f">F</li>
<li>Fyodor Dostoevsky
</li>
</ul>
</div>

In HTML the id attribute is unique. As such, you are only ever binding to the first button with the id of myBtn (I go and get the element by id and I only get one because that's what's expected).
You will need to make the IDs unique and bind each one's click event, that or apply a class, get an array of buttons by class, and bind each button in the array.
If you had a class named showModalButton set on each button you could get the references with:
var elements = document.getElementsByClassName('showModalButton');
and then iterate over the elements and bind:
for(var i = 0; i < elements.length; ++i) {
elements[i].onclick = function() {
modal.style.display = "block";
}
}

Drop down, adapt width from parent?

So I am trying to get my dropdown to work properly. The dropdown is under a list-item in my header that changes depending on what username the user have. That makes the size differ but I can't get the dropdown to follow in the width resize.
Example 1:
http://jsfiddle.net/73tUx/
Here does it work properly but what if...
Example 2:
http://jsfiddle.net/73tUx/1/
As you can see in example 2 the dropdown is wider than the list-item.
How can I make it change width as well?
CSS:
header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}
.navItem {
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
text-decoration: none;
color: #FFF;
}
.navItem:hover {
background-color: #34495e;
}
header ul li a.right {
float: right;
}
.dropdown {
list-style-type: none;
}
.drop {
position: absolute;
float: right;
background: #2C3E50;
margin-top: 72px;
right: 103px;
width: 150px;
height: 140px;
display: none;
z-index: -10;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}
.drop li a {
color: #FFF;
text-decoration: none;
}
.drop li:hover {
background: #34495e;
}

header ul{width:100%;position:relative;}

DEMO
I made few changes here and there in css. Major one was moving padding and float from anchor to the list.
Note: That the dropdown div is so small that i had to add overflow auto to see the hidden content.
CSS:
header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}
ul > li{
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
position:relative;
}
.navItem {
text-decoration: none;
color: #FFF;
}
.navItem:hover {
background-color: #34495e;
}
header ul li a.right {
float: right;
}
.dropdown {
list-style-type: none;
}
.drop {
background: none repeat scroll 0 0 #2C3E50;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
display: none;
float: right;
height: 140px;
margin-top: 46px;
overflow: auto;
position: absolute;
right: 0;
width: 100%;
z-index: -10;
}
.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}
.drop li a {
color: #FFF;
text-decoration: none;
}
.drop li:hover {
background: #34495e;
}