Develop Reference

How to Covert Point on Canvas to CSS "Top" and "Left"

I have a canvas element that does not take up the entire screen, and I want to put a button at a certain point on the canvas where I'm also drawing something else. To find this point on the canvas in my js code I use x = "context.width/2" and y = "context.height/2 - 45". Is there a way to convert this point to pixels for use in my css?
EDIT
I added a snippet to show the issue, I need the button (pink circle) and the drawing (gray circle) to be centered around the same point on any screen size.
var canvas = document.getElementsByClassName("game");
var parent = document.getElementsByClassName("gameCont");
canvas[0].width = parent[0].offsetWidth;
canvas[0].height = document.body.clientHeight;
const context = document.querySelector("canvas").getContext("2d");
context.width = document.body.clientWidth; //document.width is obsolete
context.height = document.body.clientHeight; //document.height is obsolete
//Button SETUP
var guess_button = document.getElementById("h3");
let y = context.height/2 + 45;
let x = context.width/2;
guess_button.style.top = `${y}px`;
guess_button.style.left = `${x}px`;
guess_button.style.position = 'absolute'
guess_button.style.transform = "translate(-50%, -50%)"
// Creates the backdrop for each frame
context.fillStyle = "#201A23";
context.fillRect(0, 0, context.width, context.height); // x, y, width, height
// Creates and fills the circle for each frame
context.fillStyle = "#8DAA9D"; // hex for circ color
context.beginPath();
context.arc(context.width/2, context.height/2 - 45, 30, 0, 2 * Math.PI);
context.fill();
#import url('https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');
h1 {
text-align: center;
}
h2 {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 4vw;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
color: white;
text-shadow:
1px 1px #ff1f8f,
2px 2px #000000;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: transparent;
text-align: center;
/*position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; */ /* Footer height */
}
p {
text-align: center;
}
body {
height: 100%;
block-size: 100%;
min-height:100vh;
font-family: 'Montserrat', sans-serif;
}
img {
float: center;
width: 30vw;
height: 25vw;
object-fit: scale-down;
}
h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4vw;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
text-shadow:
2px 2px #ff1f8f,
4px 4px #000000;
}
/*
h3{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
}*/
.round-button {
width: 6vw;
font-size: 22vw;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 100%;
border: 1px solid white;
overflow: hidden;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 100%;
border: 1px solid white;
overflow: hidden;
background: transparent;
box-shadow: 0 0 5px #ff1f8f;
}
.round-button-circle:hover {
background: gray;
}
/*
.round-button a {
display: block;
float: left;
width: 80%;
padding-top: 50%;
padding-bottom: 50%;
line-height: .5em;
margin-top: -0.5em;
text-align: center;
color: gray;
font-family: Verdana;
font-size: .5em;
font-weight: bold;
text-decoration: none;
}
*/
button {
float: center;
color: black;
text-align: center;
padding: 4px;
text-decoration: none;
font-size: 16px;
line-height: 25px;
border-radius: 4px;
}
button:hover {
background-color: #ddd;
color: black;
}
/* Style the active/current link*/
button.active {
background-color: dodgerblue;
}
#gameCont{
display: flex;
float: center;
align-items: center;
flex-direction: column;
justify-content: center;
block-size: 100%;
width: 100%;
height: 100%;
}
.game{
margin-right: auto;
margin-left: auto;
display: block;
float: center;
block-size: 100%;
align-items: center;
flex-direction: column;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.center {
width: 50%;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
/* Style the header links */
/*
.header a {
float: left;
color: black;
text-align: center;
color: #ff1f8f;
padding: 12px;
text-decoration: none;
font-size: 40px;
line-height: 25px;
border-radius: 4px;
}
*/
.header a {
float: left;
color: black;
text-align: center;
color: #ff1f8f;
padding: 12px;
text-decoration: none;
font-size: 45px;
line-height: 25px;
border-radius: 4px;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
color: white;
text-shadow:
2px 2px #ff1f8f,
4px 4px #000000;
}
.header button {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header v.logo {
font-size: 25px;
font-weight: bold;
}
/* Change the background color on mouse-over */
.header button:hover {
background-color: #ddd;
color: black;
}
/* Style the active/current link*/
.header button.active {
background-color: dodgerblue;
color: white;
}
/* Float the link section to the right */
.header-right {
float: right;
}
/*
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
.keyboard-button{
font-size: 1rem;
font-weight: 600;
padding: 0.1rem;
transform: translate(10%, 0%);
}
.first-row {
position: relative;
overflow: auto;
transform: translate(10%, 0%);
}
.second-row {
margin: 0.5rem 0;
position: relative;
overflow: auto;
transform: translate(10%, 0%);
}
.third-row {
position: relative;
overflow: auto;
transform: translate(10%, 0%);
}
}
*/
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
/*#media screen and (max-width: 500px) {
.header button {
float: none;
display: block;
text-align: right;
}
.header-right {
float: none;
}
}
*/
/* 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: #f1f1f1;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 2px solid #888;
width: 55%; /* Could be more or less, depending on screen size */
text-align: center;
}
/* 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;
}
<body>
<div class="header">
Circuit
<!--<b href="#default" class="logo">Circuit</b>-->
<div class="header-right">
<button onclick="reset()">Restart</button>
<button id="about" >How To</button>
<script>
function reset() {
}
</script>
</div>
</div>
<h1 id="h1"></h1>
<h3 id="h3">
<div class="round-button">
<div class="round-button-border"></div>
<div class="round-button-circle"><!--Guess--></div>
</div>
</h3>
<div class="gameCont">
<canvas class="game"></canvas>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="script.js" type="module"></script>
</body>

If you want an overlapping button That is absolute to the whole page. Something like this
// using your y and x variables
y = y - 45
let btn = document.createElement('button')
// assign style directly with js
btn.style.left = `${x}px`
btn.style.top = `${y}px`
btn.style.position = 'absolute'
btn.style.textContent = 'yada yada'
document.body.append(btn)

How to keep the social links on the navigation bar when the page shrinks, and also how to place social icons on same line when hamburger menu is open

I am trying to create a responsive web page navigation bar. I want the logo on the left, the navigation links center, and social media links on the right. When the page width gets too small, it is supposed to hide the navigation links and social media links. This is effectively working correctly however the social media links are jumping below the navigation bar when the page is too narrow but before it reaches full "mobile" width. Also, I am having trouble placing the social links in one line when the hamburger menu is open. I am not a web developer, just a tutorial watcher and any help would be greatly appreciated.
I have tried changing the class type for the .social class but this seems to only make matters worse.
EDIT: I solved the overflow problem by adding "overflow: hidden;" under ".navbar ul{"
const navbarToggler = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");
navbarToggler.addEventListener("click", navbarTogglerClick);
function navbarTogglerClick() {
navbarToggler.classList.toggle("open-navbar-toggler");
navbarMenu.classList.toggle("open");
}
navbarLinks.forEach(elem => elem.addEventListener("click", navbarLinkClick));
function navbarLinkClick() {
if(navbarMenu.classList.contains("open")) {
navbarToggler.click();
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Righteous', cursive;
background-color: #fff;
color: #333;
}
.navbar {
background-color: #000;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.2);
width: 100%;
height: 80px;
line-height: 80px;
font-size: 18px;
padding: 0 30px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.navbar a {
text-decoration: none;
color: #fff;
}
.navbar a.navbar-brand {
float: left;
height: inherit;
line-height: inherit;
padding: 0 30px;
font-size: 22px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 28px;
font-weight: 700;
}
.navbar ul {
float: center;
list-style: none;
height: inherit;
line-height: inherit;
padding: 0 50px;
overflow: hidden;
}
/*Social Stuff*/
.social{
float: right;
background-color: coral;
font-size: 35px;
display: inline-block;
}
/*Social Stuff*/
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
display: block;
text-align: center;
min-width: 120px;
padding: 0 30px;
}
.navbar ul li a:hover {
background-color: transparent;
color:#00e713;
transition:0.2s all;
transform:scale(1.2) rotate(10deg);
}
.navbar .navbar-toggler {
display: none;
}
.intro {
width: 100%;
height: 100vh;
background: url("https://source.unsplash.com/GYQBryEWh0Y/") no-repeat center center;
background-size: cover;
background-color: #000;
}
.container {
position: relative;
height: 100vh;
color: #fff;
}
.container h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20vh;
}
#html { background-color: #e34f26; }
#css { background-color: #002561; }
#javascript { background-color: #333; }
#media (max-width: 991px) {
.navbar ul {
padding: 0 10px;
}
.navbar ul li a {
min-width: 100px;
padding: 0 20px;
}
#media (max-width: 767px) {
.navbar a.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.navbar {
padding: 0;
}
.navbar ul {
width: 100%;
padding: 0;
background-color: rgba(0,0,0,0.9);
/*height: auto; */
height: 100vh;
max-height: 0;
overflow: hidden;
transition: all ease-in-out 0.3s;
}
.navbar ul.open {
max-height: 100vh;
/*this next line prevents the navbar overlap on mobile */
padding-block-start: 9vh;
}
/*Social Stuff*/
.social{
width: 100%;
float: left;
text-align: center;
}
.social ul li{
display: inline;
float: left;
}
/*Social Stuff*/
.navbar ul li {
width: 100%;
/*border-bottom: 1px solid rgba(255,255,255,0.3); */
}
.navbar ul li a {
padding: 0px;
}
.navbar .navbar-toggler {
display: block;
position: absolute;
height: 40px;
top: 20px;
left: 20px;
background-color: transparent;
color: #fff;
/* border: 3px solid #fff;*/
border: none;
/* border-radius: 4px; */
outline: none;
padding: 0 5px;
cursor: pointer;
}
.navbar .navbar-toggler span,
.navbar .navbar-toggler span::before,
.navbar .navbar-toggler span::after {
display: block;
content: '';
background-color: #fff;
height: 3px;
width: 28px;
border-radius: 4px;
transition: all ease-in-out 0.3s;
}
.navbar .navbar-toggler span::before {
transform: translateY(-8px);
}
.navbar .navbar-toggler span::after {
transform: translateY(5px);
}
.navbar .navbar-toggler.open-navbar-toggler span {
/* transform: rotate(90deg); */
background-color: transparent;
/* transform: scale(0.85) rotate(270deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::before {
transform: translateY(0px) rotate(45deg);
/* transform: translateY(0px) scale(0.75) rotate(45deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::after {
transform: translateY(-3px) rotate(-45deg);
/* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Navbar</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Knewave&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar">
<button class="navbar-toggler">
<span></span>
</button>
<a href="#" class="navbar-brand">
<span>T</span>e<span>m</span>P</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<div class="social">
<li><i class ="fa fa-twitch"></i></li>
<li><i class ="fa fa-reddit"></i></li>
<li><i class ="fa fa-twitter"></i></li>
<li><i class ="fa fa-youtube"></i></li>
</div>
</ul>
</nav>
<script src="assets/js/script.js"></script>
</body>
<p>
</p>
</html>

First, you should decide your layout at what breakpoint you want to change the layout of navigation based on that we can write your styles within those media queries. Those things which you don't need on the mobile layout such as social links you can simply make display: none; to the social section but only in the mobile media query.

Actually your HTML structure is messy but anyhow, update this style in media query #media (max-width: 767px)
.social li {
width: auto;
margin-right: -18px;
float: none
}

Sidebar toggle effect is breaking my menu items

I'm creating a very simple sidenav for a mobile app. I followed this example.
Everything is working fine, except that when I close the menu, if you pay attention, my menu items <a> tags are "breaking" as the sidebar shrinks back to place. If you see the example code from above, their menu items do not break.
Here's my code.
function openNav() {
document.getElementById("sidenav").style.width = "80%";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
}
/*-- Top Navbar --*/
.top-navbar {
width: 100%;
height: 8%;
background-color: #E4E4E4;
font-size: 1.5em;
padding-top: 2%;
}
.top-navbar span {
margin-left: 4%;
padding-top: 2%;
color: #2c2c2c;
}
/*-- Sidebar --*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #E4E4E4;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 1em;
color: #2C2C2C;;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #9F2241;
}
/*.sidenav a:before {
content: "";
display: block;
background: url(../img/icono-retirar.svg) no-repeat;
width: 20px;
height: 20px;
float: left;
margin-left: 0 6px 0 0;
}
*/
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #2c2c2c;
}
<div id="sidenav" class="sidenav">
×
Haz un retiro
Invita un amigo
Ayuda
Términos y condiciones
Cerrar sesión
</div>
<div class="top-navbar">
<span onclick="openNav()">☰</span>
</div>

Add white-space:nowrap; to your .sidenav a css rule.

Full screen menu only appears in nav bar

I have got the following html and css. The problem is when it is run the full screen menu only appears in the nav bar. The problem only appears when using safari.
I can solve the problem my getting rid of
.nav {
position: fixed;
}
but I still want the nav bar to be fixed at the top of the page.
.nav {
font-family: Arial-BoldMT;
font-size: 16px;
list-style: none;
text-align: right;
padding: 0px 0 0px 0;
box-shadow:0px 1px 1px #d3d3d3;
background-color: white;
width: 100%;
z-index:0.1;
overflow: auto;
position: fixed;
top: 0;
}
.nav p {
float: left;
margin-left: 40px;
color: #333333;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.slider {
font-size:30px;
cursor:pointer;
float:right;
margin-right: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div class="nav">
<p>LIAM VINSON</p>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
HOME
ABOUT
PHOTOGRAPHY
PORTFOLIO
CONTACT
</div>
</div>
<span class="slider" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</div>

z-index:0.1;
is not valid css.
z-index must be an integer - either negative or positive. Chances are most browsers are just treating it as 0, but Safari don't know what to do with it. So, change it to an integer like
z-index:1;
and set your overlay to z-index:2 (though I would recommend spacing these numbers out in case you have to index additional elements. ie. z-index:100; and z-index:200;)
Setting it as fixed, with top at 0, should fix it to the top of page for you once you correct that z-index issue you got there.

The problem was
.nav {
overflow: auto;
}
It stopped the overlay from being shown outside of the nav div.

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";
}
}