I don't know what i am doing wrong or where the code is breaking,i am trying to append a new div into the locationBox div,but every time i click on the button(green button that says enter) to add the new div,it momentarily adds the div and it disappears,can someone explain what i'm doing wrong and why the code breaks?Thanks
var menuBtn = document.querySelector("#menuBtn button");
var sideMenu = document.querySelector(".sideMenu");
var addCity = document.querySelector("#addCityBtn");
var cityForm = document.querySelector("#cityForm");
var cityContainer = document.querySelector(".cities");
var formClose = document.querySelector("#cityForm p");
var enterBtn = document.querySelector("#enter");
var locationBox = document.querySelector(".locationBox");
var btn = document.querySelector("#btn");
/*=============================================
= FUNCTIONS =
=============================================*/
/*===== OPEN MENU ======*/
menuBtn.addEventListener("click", function() {
menuBtn.style.marginLeft = "0px";
if (sideMenu.style.marginLeft === "0px") {
menuBtn.style.transition = "all .5s linear";
sideMenu.style.marginLeft = "-320px";
sideMenu.style.transition = "all .5s linear";
} else {
menuBtn.style.marginLeft = "320px";
menuBtn.style.transition = "all .5s linear";
sideMenu.style.marginLeft = "0px";
sideMenu.style.transition = "all .5s linear";
}
});
/*===== ADD NEW DIV TO LOCATION BOX ======*/
function newDiv() {
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "city");
locationBox.appendChild(newDiv);
}
/*===== ADD NEW CITY ======*/
function newCity() {
if (cityForm.style.display === "block") {
cityForm.style.transition = "all .7s linear";
cityForm.style.display = "none";
} else {
cityForm.style.transition = "all .7s linear";
cityForm.style.display = "block";
}
}
/*===== FORM CLOSE ======*/
formClose.addEventListener("click", function() {
cityForm.style.display = "none";
});
/*=============================================
= EVENT LISTENERS =
=============================================*/
addCity.addEventListener("click", newCity);
enterBtn.addEventListener("click", newDiv);
body {
padding: 0;
margin: 0;
background-color: blanchedalmond;
}
#menuBtn button {
position: fixed;
padding: 2px 0;
width: 40px;
background-color: black;
z-index: 3;
border-radius: 0px;
margin: 0;
color: #ffffff;
font-size: 20px;
font-weight: bold;
border: none;
cursor: pointer;
}
#menuBtn button:hover {
color: black;
background-color: white;
transition: all .3s linear;
}
.sideMenu {
height: 100vw;
width: 320px;
background-color: steelblue;
position: absolute;
z-index: 2;
margin-left: -320px;
}
.sideMenu li {
margin-left: 10px;
list-style-type: none;
border-bottom: 2px solid #0752a2;
padding: 10px;
}
.sideMenu li:hover {
background: white;
transition: all .3s linear;
}
.sideMenu li:hover a {
color: red;
transition: all .3s linear;
}
.sideMenu li a {
text-decoration: none;
color: black;
font-size: 18px;
}
#topContainer {
padding: 0;
margin: 0;
height: 280px;
width: 100%;
background-image: url("./images/sunnyBg.jpeg");
background-size: cover;
background-position: center;
position: absolute;
}
#topContainer h2 {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -1%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 38px;
text-transform: uppercase;
}
/*=============================================
= LOCATION BOX RULES =
=============================================*/
.locationBox {
position: absolute;
top: 40%;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: .2fr 1fr;
justify-content: center;
align-content: center;
width: 100%;
height: 550px;
}
.locationBox h3 {
color: blue;
text-align: center;
font-size: 28px;
}
.weatherDetails {
color: #fffafa;
text-align: left;
margin: 0 10px;
font-size: 17px;
padding: 0;
text-transform: uppercase;
}
.cities {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
}
.city {
width: 320px;
height: 320px;
background-color: cadetblue;
border-bottom: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.city h3 {
text-align: center;
text-transform: uppercase;
font-size: 20px;
border-bottom: 2px solid black;
color: white;
padding-bottom: 3px;
}
.cities form {
display: none;
height: 230px;
width: 530px;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #002fa7;
border-radius: 10px;
padding: 5px;
color: white;
font-size: 22px;
letter-spacing: 2px;
text-align: center;
z-index: 4;
transition: .7s all linear;
}
.cities label {
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%);
}
.cities input {
color: black;
font-style: italic;
font-weight: bolder;
padding: 5px;
display: block;
margin: 90px auto;
font-size: 18px;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.cities form button {
width: 140px;
padding: 5px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
border: none;
background-color: #ff007f;
color: #ffffff;
position: absolute;
top: 70%;
transform: translate(-50%);
}
.cities form button:hover {
content: " ";
border: none;
background-color: #98ff98;
color: #000000;
transition: background-color .3s linear;
}
#cityForm p {
position: absolute;
top: 0;
left: 90%;
font-size: x-small;
font-weight: bold;
color: #fffafa;
cursor: pointer;
}
#addCityBtn {
width: 120px;
padding: 5px;
background: #23297a;
border: 1.5px solid #000000;
border-radius: 4.5px;
font-size: 17px;
color: #ffffff;
cursor: pointer;
}
#addCityBtn:hover {
color: #23297a;
background-color: #fffafa;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="icon" href="/Weather App/images/cloudy.png">
</head>
<body>
<div id="menuBtn">
<button>X</button>
</div>
<div class="sideMenu">
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
</div>
<div id="topContainer">
<h2>Weather</h2>
</div>
<div class="locationBox">
<div class="location">
<h3>LOCATIONS</h3>
</div>
<div class="cities">
<form id="cityForm">
<p>close</p>
<label for="cityInput">City</label>
<input type="text" id="cityInput" placeholder="Enter city">
<button id="enter">Enter</button>
</form>
<div class="city">
<h3>Copenhagen</h3>
<div class="weatherDetails">
<p>Current Weather:40 degrees</p>
<p>Condition:Cloudy</p>
<p>Wind:10mph</p>
<p>Overcast:None</p>
</div>
</div>
<div id="addCityContainer">
<button id="addCityBtn">Add city</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
The default type of button is submit which causes the submission of the form.
To solve the issue either use Event.preventDefault() or change the type of the button to button like the following:
<button type="button" id="addCityBtn">Add city</button>
Related
I want the text to change whenever I toggle the open contact btn to "close contact" and when I click on it, It reverts back to "open contact" and continues that way.
Should I give it an id and then use the arrow function and add eventListener, Or should I just use plain onclick?
const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")
btn.addEventListener('click', () => {
form.classList.toggle('open')
})
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>
The easiest way to to just add a line that toggle the Text with textContent between 2 defined text as below:
const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")
btn.addEventListener('click', () => {
let text = btn.textContent;
btn.textContent = text == 'OPEN CONTACT' ? 'CLOSE CONTACT' : 'OPEN CONTACT';
})
* {
margin: 0;
padding: 0;
font-family: "poppins";
box-sizing: border-box;
}
.btn_sub {
margin: 10px 35%;
border-radius: 3px;
}
.btn3 {
position: relative;
background: transparent;
border-top: 1px solid var(--maincolor);
border-bottom: 1px solid var(--maincolor);
border-left: none;
border-right: none;
padding: 6px 12px;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
color: black;
overflow: hidden;
transition: 0.5s ease all;
cursor: pointer;
z-index: 12;
}
.btn3:hover {
color: var(--primarycolor);
}
.btn3::before {
content: '';
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
width: 100%;
cursor: pointer;
height: 100%;
background-color: var(--maincolor);
transition: 0.5s ease all;
}
.cta-btn3 {
color: black;
}
.cta-btn3::before {
transform: translate(-50%, -50%) rotate(45deg);
width: 100%;
height: 0;
z-index: -1;
}
.cta-btn3:hover::before {
height: 500%;
width: 100%;
transition: 0.5s ease all;
}
.cta_btn_contact {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>
You can use ternary operator to change the textContent of the button based on its present content.
const btn = document.getElementById("click_contact")
//const form = document.getElementById("message_form")
const div = document.getElementById("testDiv")
btn.addEventListener('click', () => {
btn.textContent = btn.textContent === "open contact" ? "close contact" : "open contact";
div.classList.toggle('open')
})
* {
margin: 0;
padding: 0;
font-family: "poppins";
box-sizing: border-box;
}
.btn_sub {
margin: 10px 35%;
border-radius: 3px;
}
.btn3 {
position: relative;
background: transparent;
border-top: 1px solid var(--maincolor);
border-bottom: 1px solid var(--maincolor);
border-left: none;
border-right: none;
padding: 6px 12px;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
color: black;
overflow: hidden;
transition: 0.5s ease all;
cursor: pointer;
z-index: 12;
}
.btn3:hover {
color: var(--primarycolor);
}
.btn3::before {
content: '';
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
width: 100%;
cursor: pointer;
height: 100%;
background-color: var(--maincolor);
transition: 0.5s ease all;
}
.cta-btn3 {
color: black;
}
.cta-btn3::before {
transform: translate(-50%, -50%) rotate(45deg);
width: 100%;
height: 0;
z-index: -1;
}
.cta-btn3:hover::before {
height: 500%;
width: 100%;
transition: 0.5s ease all;
}
.cta_btn_contact {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#testDiv{
width: 50px;
height: 50px;
background: yellow;
}
#testDiv.open {
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- CONTACT -->
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>
<div id="testDiv"></div>
</body>
</html>
I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.
From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox
I currently have a gallery of my portfolio set-up. Once you click on the image, it makes a pop-up. Inside of the pop-up is the image and text describing the design, copywriting ect. Once you hover over the image, it zooms. My problem is that one or two of the images, on css hover transform scale, scales to such a size that it is outside of the viewing port of the browser. It is in rectangular form, where other designs are only square. I would like the user of the website to move their cursor up and have the image move with the cursor, so the user can see the top of the image, and then have the user move their cursor down to the bottom of the image and have the image move with the cursor so that the user can see the bottom of the image. I have no idea how to do this, and I've searched everywhere but I can not find anything useful. I think it might use background-image and java-script but I really need help since I don't have knowledge of this.
html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/mainwebsite.css">
<link rel="stylesheet" href="CSS/fonts/futura_bold_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_book_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_bt-stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_italic_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_medium_stylesheet.css">
<script defer src="javascript/POPUP.js"></script>
<script src="javascript/Filters.js" defer></script>
<script defer src="javascript/tothetop.js"></script>
<script defer src="javascript/moveimage.js"></script>
<meta charset="utf-8">
<title>Ilana's creations</title>
</head>
<body class="helpme">
<div class="container">
<div class="mainnavbar">
<div class="navbar_left">
<p class="nav">
<a class="current" href="index.html">
CREATIONS
</a>
</p>
<p class="nav">
<a href="aboutme.html">
ABOUT ME
</a>
</p>
<p class="nav">
<a href="sayhi.html">
SAY HI!
</a>
</p>
</div>
<div class="navbar_right">
<p class="nav1">
<a href= target="_blank">
<img src="images/LI-In-Bug.png" alt="LinkedIn" class="icon" style="width:20px;height:20px">
</a>
</p>
<p class="nav1">
Ilana van Rooyen
</p>
</div>
</div>
<div class="searchbar" id="filtering">
<button class="searchbarbuttons active" onclick="filterSelection('all')">
ALL
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('design')">
DESIGN
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('copy')">
COPYWRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('creativewriting')">
CREATIVE WRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('videos')">
VIDEOS
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('socialmedia')">
SOCIAL MEDIA MANAGEMENT
</button>
</div>
<div class="case">
<!-- MODAL 22 BIGGER IMAGES -->
<div class="nobutton design" data-modal-target="#modal22">
<img src="Images/ZoetisMap_Pres.png" alt="ZoetisMap" width="250px" height="250px" class="gallerypics">
</div>
<div class="modal2" id="modal22" style="width: 50%; height: auto">
<div id="scroll">
<img src="Images/ZoetisMap_Design.png" alt="ZoetisMap" class="IMG3" style="width: 40%; height: 40%">
</div>
<div class="containerDB">
<div class="DESC">
<p class="DESC_text">
<strong class="title">
Layout design:
</strong>
Ilana van Rooyen
</p>
<p class="DESC_text">
<strong class="title">
Company:
</strong>
Agribonus
</p>
<p class="DESC_text">
<strong class="title">
Brief:
</strong>
Design a layout for an article provided by Zoetis for the Bonus magazine.
</p>
</div>
<div class="buttonclose">
<button data-close-button class="closebutton">
CLOSE
</button>
</div>
</div>
</div>
<!-- OVERLAY JAVA -->
<div id="overlay">
</div>
<!-- CLOSE DIV CASE -->
</div>
<div onclick="topFunction()" id="myBtn"><img src="images/outline_expand_circle_down_black_24dp.png" alt="tothetop" height="80%" width="80%"></div>
<div class="madewithlove" id="footer">
<p class="love"><i> This website was made by me, with a lot of <b>love</b>, a lot of <b>googling</b>, and a lot of <b>banging my head on the table</b> (I'm fine, thanks).</i></p>
</div>
<!-- CLOSE DIV CONTAINER -->
</div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
a {
color: inherit;
text-decoration: none;
position: inherit;
}
strong {
color: inherit;
text-decoration: none;
position: inherit;
}
p {
color: inherit;
text-decoration: none;
position: inherit;
margin: inherit;
line-spacing: inherit;
}
.helpme {
margin: 0;
}
.container {
Display: flex;
flex-direction: column;
min-height: 100vh;
}
.mainnavbar {
color: white;
background-color: white;
box-shadow: 0px 0px 5px 0.1px #707070;
border-bottom: 1px solid #D9D9D9;
overflow: hidden;
margin: 0px 0px 40px 0px;
padding: 10px;
position: sticky;
z-index: 100;
top: 0;
bottom: 0;
height: 50px;
}
.navbar_left {
margin-left: 20%;
float: left;
display: inline-flex;
font-family: 'futuralight';
color: #707070;
background-color: white;
}
.navbar_right {
margin-right: 20%;
float: right;
display: inline-flex;
font-family: 'futuralight';
font-weight: normal;
color: #707070;
background-color: white;
}
.nav {
margin: 20px 20px 20px 20px;
background-color: white;
transition-property: transform;
transition: 0.25s ease;
}
.nav .current {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav1 {
margin: 20px 0px 20px 0px;
padding: 0px 20px 0px 20px;
background-color: white;
}
.nav::after {
content: '';
border-top: 1px solid #707070;
width: 100%;
position: absolute;
display: block;
transform: rotateY(90deg);
transition:transform 0.25s linear;
}
.nav:hover {
transform: scale(1.05);
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav:hover::after {
transform: rotate(0deg);
}
.icon:hover {
transform: scale(1.1)
}
.searchbar {
display: block;
color: #707070;
text-align: center;
margin: 0px 20%;
}
.search {
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
margin: 0% 0% 8% 0%;
}
.searchbarbuttons {
background: none;
border: none;
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
padding: 5px;
cursor: pointer;
}
.searchbarbuttons:hover {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.searchbarbuttons.active {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.case {
margin: 0px 20% 70px 20%;
text-align: center;
position: relative;
}
.gallerypics {
padding: 5px 5px 5px 5px;
cursor: pointer;
transition: 0.3s;
border-radius: 15px;
}
.gallerypics:hover {
transform: scale(1.5)
}
.nobutton {
display: none;
}
.show {
display: inline-block;
transition: 0.3s;
border-radius: 15px;
}
/* MODAL BIG IMAGES */
.modal2 {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(0);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
}
.modal2.active {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(1);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
vertical-align: middle;
}
.modal2 .IMG3 {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
border-radius: 15px;
display: inline-block;
float: left;
}
.modal2 .IMG3:hover {
cursor: zoom-in;
transform: scale(170%);
transition: 200ms ease-in;
transition-delay: 0.5s;
border-radius: 0px;
}
.modal2 .containerDB {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
float: right;
}
.modal2 .DESC {
border-radius: 15px;
background-color: white;
padding: 20px;
overflow: scroll;
overflow-x: hidden;
}
.modal2 .DESC_text {
font-family: 'futuralight';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .DESC_text a:hover {
font-family: 'futuramedium';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .title {
font-family: 'futuramedium';
font-weight: normal;
font-size: 15px;
color: #707070;
line-spacing: 20pt;
}
.modal2 .buttonclose {
margin: 20px 0px;
}
.modal2 .closebutton {
position: fixed;
bottom: 20px;
right: 20px;
border: #707070;
border-width: 1px;
cursor: pointer;
outline: solid 1px #707070;
background: white;
font-family: 'futurabold';
letter-spacing: 0.5px;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font-size: 1.5vh;
color: #707070;
font-weight: normal;
float: right;
}
.modal2 .closebutton:hover {
transition:transform 0.25s linear;
box-shadow: 1px 1px 1px 1px #707070;
}
/* MODAL BIG IMAGES END */
#overlay {
position: fixed;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #707070;
pointer-events: none;
transition: 200ms ease-in-out;
}
#overlay.active {
opacity:70%;
pointer-events: all;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
border: none;
outline: none;
cursor: pointer;
}
#myBtn:hover {
transform: scale(1.1);
}
.madewithlove {
background-color: white;
padding: 10px 10px;
box-shadow: -2px -2px 5px 0.1px #707070;
height: 60px;
left: 0;
bottom: 0;
right: 0;
margin-top: auto;
}
.love {
font-family: 'futuralight';
color: #707070;
padding: 20px;
text-align: center;
font-size: 13px;
}
javascript on pop-up only:
/* eslint-env es6 */
/* eslint-disable */
/* popup javascript */
const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
/* modal */
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})
/* close button modal */
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal2')
closeModal(modal)
})
})
function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}
function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}
/* overlay open all */
overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal2.active')
modals.forEach(modal => {
closeModal(modal)
})
})
Images for download: https://drive.google.com/drive/folders/1OGD5iuyxcVekdr-pTjfkDi5o6uF4LVH5
I am building a model popup and implementing the close button to close the popup, so I created an on Click event to close the model. When I close the model, the model is successfully closing. But the Open Model button is also hiding.
I have tried many times. But it is hiding every time I run it. I also tried to remove the class, but it didn't work.
function closeTheModel() {
getting = document.getElementById('modelID');
getting.style.display = "none";
}
.popupButton {
appearance: none;
background: #16a34a;
border-radius: 0.25em;
color: white;
cursor: pointer;
display: inline-block;
font-weight: 500;
height: 3em;
line-height: 3em;
padding: 0 1em;
}
.popupButton:hover {
background-color: #17ac4e;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.details-modal {
background: #fff;
border-radius: 0.5em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
left: 50%;
max-width: 50%;
pointer-events: none;
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
width: 75em;
height: 20em;
/* border-top: 10em; */
text-align: left;
max-height: 50em;
display: flex;
flex-direction: column;
}
.details-modal .details-modal-title {
color: #111827;
padding: 1.5em 2em;
pointer-events: all;
position: relative;
width: calc(100% - 4.5em);
}
.details-modal .details-modal-title h1 {
font-size: 2.10rem;
text-align: center;
font-weight: 490;
line-height: normal;
}
.details-modal .details-modal-content {
border-top: 1px solid blue;
padding: 2em;
pointer-events: all;
overflow: auto;
}
.details-modal-overlay {
transition: opacity 0.2s ease-out;
pointer-events: none;
background: rgba(15, 23, 42, 0.8);
position: fixed;
opacity: 0;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
details[open] .details-modal-overlay {
pointer-events: all;
opacity: 0.5;
}
details summary {
list-style: none;
}
details summary:focus {
outline: none;
}
details summary::-webkit-details-marker {
display: none;
}
code {
font-family: Monaco, monospace;
line-height: 100%;
background-color: #2d2d2c;
padding: 0.1em 0.4em;
letter-spacing: -0.05em;
word-break: normal;
border-radius: 7px;
color: white;
font-weight: normal;
font-size: 1.75rem;
position: relative;
top: -2px;
}
.popupContainer {
text-align: center;
max-width: 40em;
padding: 2em;
}
.popupContainer > h1 {
font-weight: 700;
font-size: 2rem;
line-height: normal;
color: #111827;
}
.popupContainer > p {
margin-top: 2em;
margin-bottom: 2em;
}
.popupContainer sup {
font-size: 1rem;
margin-left: 0.25em;
opacity: 0.5;
position: relative;
}
<div class="popupContainer" id="modelID">
<details>
<summary>
<div class="popupButton">
Show me the modal
</div>
<div class="details-modal-overlay"></div>
</summary>
<div class="details-modal">
<div class="details-modal-title">
<h1>My details modal</h1>
<b onclick="closeTheModel();">Close Model</b>
</div>
<div class="details-modal-content">
<p>
</p>
</div>
</div>
</details>
</div>
As I mentioned in snippet, when you clicked on the Close Model the Open Model button also disappeared.
I also tried "hidden" instead of "none", but it is not even hiding the model.
Try removing the open attribute from your details tag.
function closeTheModel() {
//just remove the open attribute from the details element
var detailsEle = document.getElementsByTagName("details");
detailsEle[0].removeAttribute("open");
}
.popupButton {
appearance: none;
background: #16a34a;
border-radius: 0.25em;
color: white;
cursor: pointer;
display: inline-block;
font-weight: 500;
height: 3em;
line-height: 3em;
padding: 0 1em;
}
.popupButton:hover {
background-color: #17ac4e;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.details-modal {
background: #fff;
border-radius: 0.5em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
left: 50%;
max-width: 50%;
pointer-events: none;
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
width: 75em;
height: 20em;
/*border-top: 10em;*/
text-align: left;
max-height: 50em;
display: flex;
flex-direction: column;
}
.details-modal .details-modal-title {
color: #111827;
padding: 1.5em 2em;
pointer-events: all;
position: relative;
width: calc(100% - 4.5em);
}
.details-modal .details-modal-title h1 {
font-size: 2.10rem;
text-align: center;
font-weight: 490;
line-height: normal;
}
.details-modal .details-modal-content {
border-top: 1px solid blue;
padding: 2em;
pointer-events: all;
overflow: auto;
}
.details-modal-overlay {
transition: opacity 0.2s ease-out;
pointer-events: none;
background: rgba(15, 23, 42, 0.8);
position: fixed;
opacity: 0;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
details[open] .details-modal-overlay {
pointer-events: all;
opacity: 0.5;
}
details summary {
list-style: none;
}
details summary:focus {
outline: none;
}
details summary::-webkit-details-marker {
display: none;
}
code {
font-family: Monaco, monospace;
line-height: 100%;
background-color: #2d2d2c;
padding: 0.1em 0.4em;
letter-spacing: -0.05em;
word-break: normal;
border-radius: 7px;
color: white;
font-weight: normal;
font-size: 1.75rem;
position: relative;
top: -2px;
}
.popupContainer {
text-align: center;
max-width: 40em;
padding: 2em;
}
.popupContainer > h1 {
font-weight: 700;
font-size: 2rem;
line-height: normal;
color: #111827;
}
.popupContainer > p {
margin-top: 2em;
margin-bottom: 2em;
}
.popupContainer sup {
font-size: 1rem;
margin-left: 0.25em;
opacity: 0.5;
position: relative;
}
<div class="popupContainer" id="modelID">
<details>
<summary>
<div class="popupButton">
Show me the modal
</div>
<div class="details-modal-overlay" id="divCloseID"></div>
</summary>
<div class="details-modal" id="modelCloseID">
<div class="details-modal-title">
<h1>My details modal</h1>
<b onclick="closeTheModel();">Close Model</b>
</div>
<div class="details-modal-content">
<p>
</p>
</div>
</div>
</details>
</div>
You wrap the Open Modal button and modal in one div (id=modelID).
When you click close modal, you set a display=none, so open modal button is hidden.
=> Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#modelID {
display: none
}
</style>
</head>
<body>
<div class="popupButton" onClick="openTheModel();">
Show me the modal
</div>
<div class="popupContainer" id="modelID">
<div class="details-modal">
<div class="details-modal-title">
<h1>My details modal</h1>
<b onclick="closeTheModel();">Close Model</b>
</div>
<div class="details-modal-content">
<p>
</p>
</div>
</div>
</div>
<script>
function openTheModel() {
getting = document.getElementById('modelID');
getting.style.display = "block";
}
function closeTheModel() {
getting = document.getElementById('modelID');
getting.style.display = "none";
}
</script>
</body>
</html>
Your modal contains both the buttons Open and Close. They are both inside the modal.
So it's a correct behavior right now.
Place the Open button outside the modal div.
<div class="popupButton">
Show me the modal
</div>
<div class="popupContainer" id="modelID">
<details>
<summary>
<div class="details-modal-overlay"></div>
</summary>
<div class="details-modal">
<div class="details-modal-title">
<h1>My details modal</h1>
<b onclick="closeTheModel();">Close Model</b>
</div>
<div class="details-modal-content">
<p>
</p>
</div>
</div>
You should setModelID on modal-detail and change background color of overlay when modal is closed:
function closeTheModel() {
getting = document.getElementById('modelID');
getting.style.display = "none";
document.getElementsByClassName("details-modal-overlay")[0].style.backgroundColor='white';
}
function openModal(){
getting = document.getElementById('modelID');
getting.style.display = "block";
document.getElementsByClassName("details-modal-overlay")[0].style.backgroundColor='rgba(15, 23, 42, 0.8)';
}
.popupButton {
appearance: none;
background: #16a34a;
border-radius: 0.25em;
color: white;
cursor: pointer;
display: inline-block;
font-weight: 500;
height: 3em;
line-height: 3em;
padding: 0 1em;
}
.popupButton:hover {
background-color: #17ac4e;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.details-modal {
background: #fff;
border-radius: 0.5em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
left: 50%;
max-width: 50%;
pointer-events: none;
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
width: 75em;
height: 20em;
/*border-top: 10em;*/
text-align: left;
max-height: 50em;
display: flex;
flex-direction: column;
}
.details-modal .details-modal-title {
color: #111827;
padding: 1.5em 2em;
pointer-events: all;
position: relative;
width: calc(100% - 4.5em);
}
.details-modal .details-modal-title h1 {
font-size: 2.10rem;
text-align: center;
font-weight: 490;
line-height: normal;
}
.details-modal .details-modal-content {
border-top: 1px solid blue;
padding: 2em;
pointer-events: all;
overflow: auto;
}
.details-modal-overlay {
transition: opacity 0.2s ease-out;
pointer-events: none;
background: rgba(15, 23, 42, 0.8);
position: fixed;
opacity: 0;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
details[open] .details-modal-overlay {
pointer-events: all;
opacity: 0.5;
}
details summary {
list-style: none;
}
details summary:focus {
outline: none;
}
details summary::-webkit-details-marker {
display: none;
}
code {
font-family: Monaco, monospace;
line-height: 100%;
background-color: #2d2d2c;
padding: 0.1em 0.4em;
letter-spacing: -0.05em;
word-break: normal;
border-radius: 7px;
color: white;
font-weight: normal;
font-size: 1.75rem;
position: relative;
top: -2px;
}
.popupContainer {
text-align: center;
max-width: 40em;
padding: 2em;
}
.popupContainer > h1 {
font-weight: 700;
font-size: 2rem;
line-height: normal;
color: #111827;
}
.popupContainer > p {
margin-top: 2em;
margin-bottom: 2em;
}
.popupContainer sup {
font-size: 1rem;
margin-left: 0.25em;
opacity: 0.5;
position: relative;
}
<div class="popupContainer" >
<details>
<summary>
<div class="popupButton" onclick="openModal()">
Show me the modal
</div>
<div class="details-modal-overlay"></div>
</summary>
<div class="details-modal" id="modelID">
<div class="details-modal-title">
<h1>My details modal</h1>
<b onclick="closeTheModel();">Close Model</b>
</div>
<div class="details-modal-content">
<p>
</p>
</div>
</div>
</details>
</div>
All the other elements of the page seem to resize whenever i make the window smaller, but it seems like the "Contact Me" Button seems to disappear whenever i resize the page, I've been trying to fix this problem for a while by changing the position of the button by itself, but it seems like nothing I've been doing has fixed the problem yet. Any help would be awesome thanks!
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" type= "text/css" href="css/style.css">
<title>Jaylen Cooper</title>
<body>
<div class="image_one" id="main">
<img src="http://d2tovwv1y8kfyq.cloudfront.net/wp-content/uploads/2016/07/28105929/tech3.jpg" class="image_one">
<h1>Hello, My Name Is Jaylen Cooper, And I Develop Websites and User Interfaces</h1>
</div>
<div>
<button id="myBtn" class="myBtn" align="middle">Contact Me</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>CONTACT INFORMATION</h3>
<form>
<label for="Email">Email Address</label>
<input type="text" name="Email"/>
<label for="Info">Brief Information</label>
<input type="text" name="lName"/>
<input type="submit" value="SUBMIT">
</form>
</div>
</div>
<div class="nav_body">
<h2><b><center>My Preferences</center></b></h2>
</div>
<div>
<img src="http://pluspng.com/img-png/coder-png-source-code-icon-1600.png" height="150px" class="image_One">
<img src="https://png.icons8.com/metro/540/graduation-cap.png" height="100px" class="image_Two">
<img src="http://www.freeiconspng.com/uploads/brain-2.png" height="150px" class="image_Three">
</div>
<div class="text_display">
<p1 id="text"><b>CODE</b></p1>
</div>
<div class="third_text">
<p5 id="text2"><b><br> The Best Languages that I know right now are<br> HTML,CSS,JavaScript,<br> and a basic ammount of Python<br> and Java.</b></p5>
<p4 id="text2"><b><br> ⚋<br> I'm always looking to collaborate <br> with other developers on other project<br>If you know any other coding communities <br>Feel Free To Contact Me.</b></p4>
<p6 id="text2"><b><br> ⚋<br> The Ideas that I usually have<br> are Website Based and Mobile,<br> Want To Pursue SQL.</b></p6>
</div>
<div class="fourth_box">
<h7><b>WORK</b></h7>
</div>
<div class="fifth_box">
<img src="http://www.freepngimg.com/thumb/coming_soon/4-2-coming-soon-png-thumb.png" class="coming_soon">
</div class="third_text">
<div class="About_Me">
<h9><b><center>ABOUT ME</center></b></h9>
</div>
<div class="aboutme_box">
<p id="aboutme_text"><b>I Live In Dallas,Texas <br>⚋</b></p>
<p id="aboutme_text"><b>I'm 19 Years Old. <br>⚋</b></p>
<p id="aboutme_text"><b>I've Been Coding For A Year. <br>⚋</b></p>
<p id="aboutme_text"><b>Graduated High School In 2017. <br>⚋</b></p>
<p id="aboutme_text"><b>Attending Community College For Computer Science 2018.<br>⚋</b></p>
<p id="aboutme_text"><b>My Favorite Color Is Blue. <br>⚋</b></p>
<p id="aboutme_text"><b>I Love Watching Twitch On My Down Time. <br> ⚋</b></p>
<p id="aboutme_text"><b>If You Would Like To Know More About Me Shoot Me A Email.</b></p>
</div>
<div class="Hyperlink_images">
<a href="https://twitter.com/slitheirings">
<img src="http://www.freeiconspng.com/uploads/twitter-icon--basic-round-social-iconset--s-icons-0.png" class="hyperlink_one" width="100px" id="hyperlink" href="https://twitter.com/slitheirings">
</a>
<a href="https://www.instagram.com/coop2824">
<img src="http://www.freeiconspng.com/uploads/instagram-logo-icon--icon-search-engine-5.png" class="hyperlink_two" width="100px" id="hyperlink" href="https://www.instagram.com/coop2824/">
</a>
<a href="https://www.facebook.com/profile.php?id=100004979988388">
<img src="https://cdn.worldvectorlogo.com/logos/facebook-3.svg" class="hyperlink_three" width="100px" id="hyperlink" href="https://www.facebook.com/profile.php?id=100004979988388">
</a>
<a href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" width="100px" id="hyperlink" href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
</a>
<a href="https://github.com/Slitherings">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" width="100px" id="hyperlink" href="https://image.flaticon.com/icons/svg/25/25231.svg">
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/javascript_index.js"></script>
</body>
CSS
html, body{
margin: 0;
text-align: center;
top: 100%;
}
.nav_body{
height: 100px;
}
h1{
position: absolute;
font-family: sans-serif;
font-size: 52px;
text-align: center;
padding-left: 100px;
padding-right: 100px;
color: white;
top: 250px;
}
.image_one{
position:relative;
width: 100%;
height: 1080px;
opacity: 0.85;
}
.Contact_text{
color: white;
font-size: 24px;
top: 600px;
text-decoration: none;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 750px;
padding-top: 25px;
padding-bottom: 25px;
background-color: black;
opacity: 0.5;
transition-duration: 1s;
position: absolute;
}
.Contact_text:hover{
opacity: 1.0;
color: black;
background-color: white;
}
.Information_Text{
text-decoration: none;
color: white;
font-size: 16px;
position: absolute;
top: 710px;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 785px;
padding-top: 25px;
padding-bottom: 25px;
transition: 1s;
}
.Down_Arrow{
top: 750px;
position: absolute;
padding-left: 100px;
padding-right: 100px;
left: 490px;
}
.Main_Image{
position: absolute;
top: 70px;
padding-left: 100px;
padding-right: 100px;
left: 425px;
}
h2{
font-family: sans-serif;
font-size: 64px;
text-align: center;
}
.image_One{
padding-left: 20px;
padding-bottom: 50px;
}
.image_Two{
padding-left: 185px;
padding-bottom: 70px;
}
.image_Three{
padding-left: 170px;
top: 40px;
padding-bottom: 50px;
}
p1{
font-family:sans-serif;
text-decoration: none;
font-size: 64px;
color: white;
}
p2{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
p3{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
.text_display{
display: inline-block;
height: 55px;
padding-top: 25px;
background-color: cadetblue;
width: 100%;
text-align: center;
padding-bottom: 25px;
}
#text{
padding:200px;
}
.second_display{
height: 200px;
display: inline-block;
width: 100%;
}
p4{
font-family: sans-serif;
font-size: 14px;
left: 500px;
}
p5{
font-family: sans-serif;
font-size: 14px;
}
p6{
font-family: sans-serif;
font-size: 14px;
}
#text2{
}
.third_text{
display: inline-block;
padding-top: 50px;
padding-bottom: 50px;
}
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
height: 300px;
}
.prev, .next{
cursor: pointer;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8)
}
.text{
color:cadetblue;
font-size: 15px;
padding: 8px 12px;
bottom: 10px;
width: 100%;
text-align: center;
}
.numbertext{
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
top: 0;
}
.dot{
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display:inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
-webkit-animation-name:fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade{
from {opacity: .4}
to {opacity: 1.0}
}
#keyframes fade{
from{opacity: .4}
to {opacity: 1.0}
}
.fourth_box{
height: 85px;
background-color: cadetblue;
padding-bottom: 150px;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -400%;
}
100%{
left: -400%;
}
}
#slider{
overflow: hidden;
max-width: 600px;
width: auto;
left: 3500px;
position: fixed;
}
#slider figure img{
width: 20%;
float: left;
}
#slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
h7{
font-size: 64px;
font-family: sans-serif;
color: white;
left: 0;
position: relative;
top: 100px;
}
.contact_background{
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
top: 0;
}
.About_Me{
padding-top: 50px;
height: 100px;
background-color: cadetblue;
}
h9{
font-family: sans-serif;
font-size: 64px;
text-align: center;
color: white;
}
h10{
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
.submit_button{
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.clicktoclose{
font-family: sans-serif;
font-size: 16px;
color: white;
text-decoration: none;
}
.coming_soon{
text-align: center;
left: 500px;
}
.fifth_box{
padding-top: 100px;
padding-bottom: 100px;
}
#aboutme_text{
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
}
.aboutme_box{
padding-top: 50px;
padding-bottom: 50px;
}
.Hyperlink_images{
height: 200px;
background-color: cadetblue;
padding:100px;
}
#hyperlink{
padding:100px;
}
.Email_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.Category_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.myBtn{
transition:background-color 1.5s ease;
position: absolute;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
left: 850px;
}
a{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 15px;
}
.myBtn:hover{
background: cadetblue;
}
/* The Modal (background) */
.modal {
transition:background-color 1.5s ease;
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.6); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
input[type=text] {
transition:background-color 1.5s ease;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
font-family: sans-serif;
}
input[type=text]:focus {
background-color: coral;
opacity: 0.5;
}
label{
font-family: sans-serif;
font-weight: bold;
font-size: 26px;
}
h3{
font-family: sans-serif;
font-weight: bold;
font-size: 48px;
color: coral;
opacity: 0.4
}
input[type=button], input[type=submit], input[type=reset] {
transition:background-color 1.5s ease;
background-color: cadetblue;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
input[type=button], input[type=submit], input[type=reset]:hover{
background-color: coral;
opacity: 0.5;
font-family: sans-serif;
font-weight: bold;
}
Javascript
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var myopacity = 0;
function MyFadeFunction() {
if (myopacity<1) {
myopacity += .075;
setTimeout(function(){MyFadeFunction()},100);
}
document.getElementById('myModal').style.opacity = myopacity;
}
MyFadeFunction();
JSFiddle
Click if you want to see in browser
Again, any help would be great and it would really help me in the development of my portfolio website, I've been stuck on this problem for a while now. Thanks!
Nevermind, figured out the answer by readings Ben Kolya Mansleys, and Sergiu Post.
Thank you both for the help.
For Anyone That is wondering what i did
.myBtn{
transition:background-color 1.5s ease;
position: relative;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
align-items: center;
justify-content: center;
}
HTML
<div style="width:100%; height: 100%">
<button id="myBtn" class="myBtn" align="middle"><a href="#">Contact
Me</a></button>
</div>
Simply put the button inside a div then and styled it with width and height, and added align-items and justify-content centered in CSS.
Again Thanks Ben and Sergiu!
You are pushing the button off of the page with this:
.myBtn {
left: 850px;
}
You could try changing that line to something like this (adjust as necessary):
left: calc(110px + 8em);