classList.add() is not working | Vanilla JavaScript

classList.add() is not working | Vanilla JavaScript - javascript

My webpage has an element that gets removed when the URL parameters change. One element is supposed to display and the other is supposed to disappear. My attempt was to change the class using classList.add() and classList.remove(). The code that should-have worked:
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");//doesn't seem to work
questionConfirm.classList.add ("hidden");
//triger function
signupConfirmCode()
}
else {
console.log ("hello")
}
View the problem here:
https://cheerful-sable-4fff28.netlify.app/sucuss.html?page-type=signup
All Code:
HTML/JS
<!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>Succes | The Coders Club</title>
<link rel="icon" href="img_2.jpg">
<link rel="stylesheet" href="Styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&family=Poppins:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="info_styles.css">
</head>
<body>
<div class="nav-bar">
<nav>
<img src="img_2.jpg" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
</div>
<div class="welcome" id="question-confirm">
<div class="success" style="height: 50%; position:absolute; bottom: 200px;">
<h1>Your Question is in!</h1>
<p>For your reference, this is what you wrote:</p>
<div id="wrote"></div>
<h2>While you wait why not?</h2>
<button class="standard-button" style="width: 250px; height: 50px;">Check out our classes</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Read the about us page</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Head to our homepage</button><br><br>
</div>
<div class="signup hidden welcome" id="signup-confirm">
<div class="success">
<h1>Success! Your child(ren) enrolled!</h1>
<p>A conformation will be sent to your email address. For your refernce below are the detials you entered into the signup form. If you need to change <strong>any</strong> of these details please contact me.</p>
<div class="signup-infomation">
<h2>Parent Name</h2>
<li id="parent-name-confirm">Error no parent name</li>
<h2>Student Name(s)</h2>
<li id="student-names">Error no student(s) name</li>
<h2>Parent Email Address</h2>
<li id="email-confirm">Error no parent email address found</li>
<h2>Parent Phone Number</h2>
<li id="parent-phone">Error no parent name</li><br><br>
<p>This info is very important. It may be a good idea to bookmark or</p>
<button class="standard-button" onclick="window.print();">Print this info</button><br><br>
</div>
<h3>Please remeber to bring <span id="confirm-price">$39</span> cash to pay Ethan.</h3>
</div>
</div>
<script>
var signupConfirm = document.getElementById ("signup-confirm");
var questionConfirm = document.getElementById ("question-confirm");
console.log (signupConfirm)
const urlParams = new URLSearchParams(window.location.search);
var pageType = urlParams.get("page-type");
var signupConfirmCode = function () {
var parentNameConfirm = document.getElementById ("parent-name-confirm");
parentNameConfirm.textContent = localStorage.getItem("parent_name");
var studentNamesConfirm = document.getElementById ("student-names");
studentNamesConfirm.textContent = localStorage.getItem("child_names");
var parentEmailConfirm = document.getElementById ("email-confirm");
parentEmailConfirm.textContent = localStorage.getItem("email_confirm");
var parentPhoneConfirm = document.getElementById ("parent-phone");
parentPhoneConfirm.textContent = localStorage.getItem("parent_phone");
};
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");
questionConfirm.classList.add ("hidden")
signupConfirmCode()
}
else {
console.log ("hello")
}
</script>
<script>
var wrote = document.getElementById ("wrote");
wrote.innerHTML = sessionStorage.getItem ("Tiny-Data")
</script>
</body>
</html>
CSS
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
.welcome {
text-align: center;
background-image: url("img_1.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 95vh;
color: white;
position: absolute;
top: 100px;
min-width: 100%;
padding: 0 auto;
}
.welcome-txt {
position: absolute;
top: 40%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
float: right;
padding-right: 50px;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p, ul, ol, li, select {
font-family: 'Poppins', sans-serif;
}
footer {
position: absolute;
top: 3000px;
width: 100%;
}
.footer-list {
list-style: none;
}
.footer-secetion {
position: absolute;
bottom: 200px;
text-align: center;
}
.content {
position: absolute;
top: 1200px;
text-align: center;
margin-left: 30%;
}
input {
height: 30px;
width: 300px;
}
::placeholder {
text-align: center;
font-family: 'Poppins', sans-serif;
}
textarea {
resize: none;
width: 700px;
height: 400px;
}
.standard-button {
background-color: rgb(16, 92, 116);
color: white;
border: none;
border-radius: 5px;
height: 30px;
width: 150px;
font-size: medium;
cursor: pointer;
transition: all 0.5s ease-out;
}
.standard-button:hover {
width: 175px;
height: 40px;
}
.hidden {
display: none;
}
.info-content {
position: absolute;
top: 1075px;
text-align: center;
background-image: url("img_5.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.info-content-blocks {
background-color: rgba(204, 204, 204, 0.8);
margin: 30px;
padding: 30px;
}
.diveder {
width: 100%;
height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}
.success {
background-color: rgba(255, 255, 255, 0.808);
margin-left: 1.75%;
padding: 30px;
height: 80%;
position: absolute;
bottom: 100px;
color: black;
width: 93%;
}
.signup-infomation {
border: 1px solid;
width: 45%;
position: relative;
left: 25%;
overflow-y: hidden;
overflow-x: scroll;
}
select {
width: 150px;
height: 35px;
font-size: medium;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 85%;
top: 30px;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color:rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left:auto;
margin-right:auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
.fade-out {
opacity: 0;
transition: all 3000ms ease-in-out;
}
.fade-in {
opacity: 1;
transition: all 3000ms ease-in-out;
}
.arrow
{
position: relative;
bottom: -2rem;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
/**
* Dark Arrow Down
*/
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
background-size: contain;
}
.bounce {
animation: bounce 2s infinite;
}
.arrow-background {
background-color: rgba(204, 204, 204, 0.8);
min-width: 100px;
padding: 25px;
border-radius: 100px;
margin: 0;
position: absolute;
top: 80%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
#media print {
.nav-bar {
display: none;
}
.standard-button {
display: none;
}
p {
display: none;
}
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}

Your problem seems to be the HTML, your #question-confirm seems to have a missing closing tag.
You need to add the missing </div>.
This is what makes #signup-confirm to be inside #question-confirm.

Related

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

How to display another page without reloading?

I'm working on Admin panel for my Portfolio page.
body {
margin: 0;
background-color: #E0E0E0;
}
.navbar {
width: 100%;
height: 40px;
background-color: #21262a;
position: fixed;
top: 0;
display: block;
}
.navbar .adminText {
color: #d9f3fe;
position: absolute;
font-family: sans-serif;
top: 50%;
margin-left: 10px;
transform: translateY(-50%);
text-transform: uppercase;
font-weight: 600;
cursor: default;
user-select: none;
}
.navbar .logout {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
border-style: none;
height: 100%;
width: 100px;
background-color: #21262a;
color: #d9f3fe;
transition: .2s;
}
.logout:hover {
background-color: #181b20;
cursor: pointer;
}
.logout:focus {
outline: none;
}
.control {
height: calc(100% - 40px);
width: 20%;
background-color: #21262a;
position: fixed;
left: 0;
bottom: 0;
}
.control .dashboard {
position: relative;
width: 100%;
height: 50px;
border: none;
background-color: #21262a;
color: #d9f3fe;
font-size: 1.1em;
transition: .3s;
text-align: left;
}
.control .dashboard:hover {
background-color: #181b20;
cursor: pointer;
}
.control .dashboard:focus {
outline: none;
}
.control .dashboard i {
margin-right: 10px;
float: left;
margin-left: 10px;
}
.workStation {
position: absolute;
height: calc(100%-40px);
width: 80%;
right: 0;
top: 40px;
z-index: 100;
}
#active {
background-color: #006da0;
}
#active:after {
content: "";
height: 20px;
width: 20px;
position: absolute;
background-color: #E0E0E0;
transform: rotate(45deg);
right: -10px;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
<button class="logout">LOGOUT</button>
</div>
<aside class="control">
<button class="dashboard" id="active"> <i class="fas fa-tachometer-alt"></i> Dashboard</button>
<button class="dashboard"> <i class="fas fa-images"></i> Posts</button>
<button class="dashboard"> <i class="fas fa-plus-square"></i> Add post</button>
</aside>
<aside class="workStation">
<h1>THis is DASHBOARD</h1>
</aside>
That's my page.
Now, I will have it linked to my database, I'm doing it in PHP, but for now I'm working on frontend.
So When I click on Posts I want to display content for that page in this gray area that is empty.
I think You know What I mean by now.
So what's the best way to do it? Keep in mind, I'm doing my backend system in PHP.

An easy way to do this is by using the state pattern. This will let you load different pages by changing the state of your application. Let me show you an example of doing this.
<div id="content"></div>
const content = document.getElementById('content');
const PageState = function() {
let currentState = new homeState(this);
this.change = state => currentState = state;
}
const homeState = function() {
content.innerHTML = `This is my home page`;
}
const aboutState = function() {
content.innerHTML = `This is my about page`;
}
const page = new PageState();
page.change(new homeState);
You have the content element as the main tag of the page, then you simply call page.change() with the new state you want to have. This lets you avoid changing the page & only changing the content of it.
This will let you achieve a single page application without a javascript framework like react.js or vue.js. It's a neat & simple way to get started.

Please try this
$(document).ready(() => {
let return_text = true;
let $content = $('.workStation');
let $button = $('button.dashboard');
if($button.attr('id') === 'active'){
let data_uri = $button.data('uri');
return_data($content,data_uri, return_text)
}
$button.click(function (e) {
e.stopPropagation();
e.preventDefault();
$this = $(this);
$this.attr('id', 'active').siblings().removeAttr('id', 'active');
let data_uri = $this.data('uri');
return_data($content,data_uri, return_text)
});
function return_data($content,data_uri, return_text) {
if (return_text) {
$content.html(`<h1>${data_uri}</h1>`);
} else {
//Ajax
$.get(data_uri).done(function (response, status){
if(status === 'success'){
$content.html(response);
}else{
alert('error! '+status);
}
}).fail(function(jqXHR, textStatus){
alert("Request failed: " + textStatus);
})
}
}
});
body {
margin: 0;
background-color: #E0E0E0;
}
.navbar {
width: 100%;
height: 40px;
background-color: #21262a;
position: fixed;
top: 0;
display: block;
}
.navbar .adminText {
color: #d9f3fe;
position: absolute;
font-family: sans-serif;
top: 50%;
margin-left: 10px;
transform: translateY(-50%);
text-transform: uppercase;
font-weight: 600;
cursor: default;
user-select: none;
}
.navbar .logout {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
border-style: none;
height: 100%;
width: 100px;
background-color: #21262a;
color: #d9f3fe;
transition: .2s;
}
.logout:hover {
background-color: #181b20;
cursor: pointer;
}
.logout:focus {
outline: none;
}
.control {
height: calc(100% - 40px);
width: 20%;
background-color: #21262a;
position: fixed;
left: 0;
bottom: 0;
}
.control .dashboard {
position: relative;
width: 100%;
height: 50px;
border: none;
background-color: #21262a;
color: #d9f3fe;
font-size: 1.1em;
transition: .3s;
text-align: left;
}
.control .dashboard:hover {
background-color: #181b20;
cursor: pointer;
}
.control .dashboard:focus {
outline: none;
}
.control .dashboard i {
margin-right: 10px;
float: left;
margin-left: 10px;
}
.workStation {
position: absolute;
height: calc(100% - 40px);
width: 80%;
right: 0;
top: 40px;
z-index: 100;
}
#active {
background-color: #006da0;
}
#active:after {
content: "";
height: 20px;
width: 20px;
position: absolute;
background-color: #E0E0E0;
transform: rotate(45deg);
right: -10px;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
<button class="logout">LOGOUT</button>
</div>
<aside class="control">
<button class="dashboard" id="active" data-uri="This is Dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard
</button>
<button class="dashboard" data-uri="This is Post"><i class="fas fa-images"></i> Posts</button>
<button class="dashboard" data-uri="This is Add post"><i class="fas fa-plus-square"></i> Add post</button>
</aside>
<aside class="workStation"></aside>

This code is simple in each button there is an attribute data-page="" put the name of the page in data-page="exemple.php or path/exemple.php"
$(document).ready(() => {
let $content = $('.workStation');
let $button = $('button.dashboard');
if ($button.attr('id') === 'active') {
let $data_uri = $button.data('page');
return_page($content, $data_uri)
}
$button.click(function (e) {
e.stopPropagation();
e.preventDefault();
$this = $(this);
$this.attr('id', 'active').siblings().removeAttr('id');
let $data_uri = $this.data('page');
if ($data_uri !== '') {
return_page($content, $data_uri);
}else{
$content.html('<h1>Empty data-uri attribute<h1/>');
}
});
function return_page($content, $data_uri) {
$($content).load( $data_uri,function(responseText,textStatus){
if(textStatus === 'error') $content.html(`<h1>${$data_uri} Page not found<h1/>`);
});
}
});
body {
margin: 0;
background-color: #E0E0E0;
}
.navbar {
width: 100%;
height: 40px;
background-color: #21262a;
position: fixed;
top: 0;
display: block;
}
.navbar .adminText {
color: #d9f3fe;
position: absolute;
font-family: sans-serif;
top: 50%;
margin-left: 10px;
transform: translateY(-50%);
text-transform: uppercase;
font-weight: 600;
cursor: default;
user-select: none;
}
.navbar .logout {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
border-style: none;
height: 100%;
width: 100px;
background-color: #21262a;
color: #d9f3fe;
transition: .2s;
}
.logout:hover {
background-color: #181b20;
cursor: pointer;
}
.logout:focus {
outline: none;
}
.control {
height: calc(100% - 40px);
width: 20%;
background-color: #21262a;
position: fixed;
left: 0;
bottom: 0;
}
.control .dashboard {
position: relative;
width: 100%;
height: 50px;
border: none;
background-color: #21262a;
color: #d9f3fe;
font-size: 1.1em;
transition: .3s;
text-align: left;
}
.control .dashboard:hover {
background-color: #181b20;
cursor: pointer;
}
.control .dashboard:focus {
outline: none;
}
.control .dashboard i {
margin-right: 10px;
float: left;
margin-left: 10px;
}
.workStation {
position: absolute;
height: calc(100% - 40px);
width: 80%;
right: 0;
top: 40px;
z-index: 100;
}
#active {
background-color: #006da0;
}
#active:after {
content: "";
height: 20px;
width: 20px;
position: absolute;
background-color: #E0E0E0;
transform: rotate(45deg);
right: -10px;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
<button class="logout">LOGOUT</button>
</div>
<aside class="control">
<button class="dashboard" id="active" data-page="dashboard.html"><i class="fas fa-tachometer-alt"></i> Dashboard
</button>
<button class="dashboard" data-page="post.html"><i class="fas fa-images"></i> Posts</button>
<button class="dashboard" data-page="add_post.html"><i class="fas fa-plus-square"></i> Add post</button>
</aside>
<aside class="workStation"></aside>
</body>

Please try this
$('#post').click(function(){
$('.title-dashboard').hide();
$('.title-post').show();
$('#dasboard').removeClass('active');
$('#post').addClass('active');
});
$('#dasboard').click(function(){
$('.title-dashboard').show();
$('.title-post').hide();
$('#post').removeClass('active');
$('#dasboard').addClass('active');
});
body {
margin: 0;
background-color: #E0E0E0;
}
.navbar {
width: 100%;
height: 40px;
background-color: #21262a;
position: fixed;
top: 0;
display: block;
}
.navbar .adminText {
color: #d9f3fe;
position: absolute;
font-family: sans-serif;
top: 50%;
margin-left: 10px;
transform: translateY(-50%);
text-transform: uppercase;
font-weight: 600;
cursor: default;
user-select: none;
}
.navbar .logout {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
border-style: none;
height: 100%;
width: 100px;
background-color: #21262a;
color: #d9f3fe;
transition: .2s;
}
.logout:hover {
background-color: #181b20;
cursor: pointer;
}
.logout:focus {
outline: none;
}
.control {
height: calc(100% - 40px);
width: 20%;
background-color: #21262a;
position: fixed;
left: 0;
bottom: 0;
}
.control .dashboard {
position: relative;
width: 100%;
height: 50px;
border: none;
background-color: #21262a;
color: #d9f3fe;
font-size: 1.1em;
transition: .3s;
text-align: left;
}
.control .dashboard:hover {
background-color: #181b20;
cursor: pointer;
}
.control .dashboard:focus {
outline: none;
}
.control .dashboard i {
margin-right: 10px;
float: left;
margin-left: 10px;
}
.workStation {
position: absolute;
height: calc(100%-40px);
width: 80%;
right: 0;
top: 40px;
z-index: 100;
}
.active {
background-color: #006da0;
}
.active:after {
content: "";
height: 20px;
width: 20px;
position: absolute;
background-color: #E0E0E0;
transform: rotate(45deg);
right: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
<button class="logout">LOGOUT</button>
</div>
<aside class="control">
<button class="dashboard" class="active" id="dasboard"> <i class="fas fa-tachometer-alt"></i> Dashboard</button>
<button class="dashboard" id="post"> <i class="fas fa-images"></i> Posts</button>
<button class="dashboard"> <i class="fas fa-plus-square"></i> Add post</button>
</aside>
<aside class="workStation">
<h1 class="title-dashboard">THis is DASHBOARD</h1>
<h1 style="display:none;" class="title-post">THis is POST</h1>
</aside>

On click div moves down

I want to make something like - When I press on About, so there will show overlay over the main div with text about. Now when I click, so that div will show, but it will move down that particles-js div. And I don't want to move that div, but I want to make about to show over that particle (fullscreen overlay with 50% opacity)
$(".about").click(function() {
$(".main").fadeToggle('500');
$(".aboutText").fadeToggle('500');
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
display: none;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>

Is this what you are trying to do? Show the about text when clicked?
$(".about").click(function() {
$("#particles-js").toggleClass("hide")
$(".aboutText").toggleClass("hide")
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
.hide {
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText hide">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>

Text editor error

For some strange reason I my text editor (Microsoft Visual Code) wont review this file. So you please try copy paste this in to your editor and tell me what went wrong?
Sorry for the length of the code and thank you in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Space Trip - Adventure of a Lifetime</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="welcomeText">
<div class="welcome">
<h1 class="greet">Space Trip - Adventure of a Lifetime</h1>
</div>
<div class="subText">
<div class="subTexts">
<p class="subscribe">Subscribe to our newsletter</p>
<p class="soon">We are launching soon</p>
</div>
</div>
</div>
<div class="form">
<form action="" class="sub">
<input class='email' type="email">
<button class="button" value="Send">Get Started</button>
</form>
</div>
<div class="social">
<div class="follow">
<p class="followUs">Or follow us</p>
</div>
<div class="socialIcons">
<div class="socialIcon facebook brandico-facebook-rect"></div>
<div class="socialIcon twitter brandico-twitter-bird"></div>
<div class="socialIcon github brandico-github"></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
#import url(http://weloveiconfonts.com/api/?family=brandico);
#import url(https://fonts.googleapis.com/css?family=Junge);
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: url('https://static.pexels.com/photos/26206/pexels-photo.jpg') no-repeat;
background-size: cover;
font-family: Junge, georgia;
text-align: center;
}
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
.content {
max-width: 40%;
max-height: 50%;
margin: 100px auto;
}
.welcomeText,
.form,
.social {
width: 100%;
}
/*welcome text*/
.welcome {
height: 100px;
position: relative;
border-bottom: 1px solid;
overflow: hidden;
}
.greet {
width: 100%;
height: 100%;
position: absolute;
top: 100%;
font-size: 50px;
text-align: center;
line-height: 100px;
transition: all .5s;
}
/*taglines*/
.subText {
width: 100%;
height: 100px;
position: relative;
font-size: 30px;
overflow: hidden;
}
.subText p {
height: 100%;
line-height: 100px;
text-align: center;
}
.subTexts {
width: 100%;
position: absolute;
bottom: 100%;
text-align: center;
overflow: hidden;
transition: all .5s;
}
/*FORM*/
.form {
width: 100%;
height: 100px;
position: relative;
}
.sub {
width: 90%;
height: 50px;
margin: auto;
opacity: 0;
border: none;
border-radius: 50px;
background: rgba(0, 0, 0, .05);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .4), 0 0 0px 5px rgba(0, 0, 0, .1);
transition: all .5s;
}
.email {
width: 70%;
height: 70%;
margin: 1% 0;
padding-left: 10px;
background: none;
border: none;
font-size: 20px;
}
input:focus {
outline: none;
}
.button {
width: 20%;
height: 100%;
float: right;
border: none;
border-radius: 0 50px 50px 0;
font-size: 16px;
background: red;
background-color: #49afcd;
background-image: linear-gradient(top, #5bc0de, #2f96b4);
cursor: pointer;
transition: all .5s;
}
.button:hover {
background: #2f96b4;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
}
/*footer-follow us*/
.follow {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
.followUs {
width: 100%;
height: 100%;
position: absolute;
bottom: 100%;
line-height: 100px;
text-align: center;
font-size: 40px;
transition: all .5s;
}
.socialIcons {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
.socialIcon {
width: 33.33%;
height: 100px;
float: left;
margin-top: 100px;
font-size: 50px;
line-height: 100px;
transition: margin-top .5s, color .5s;
cursor: pointer;
}
.socialIcon:hover {
color: #49afcd;
text-shadow: 0 0 20px white;
}
.twitter {
transition-delay: .5s, 0;
}
.github {
transition-delay: 1s, 0;
}
#media screen and (max-width:930px) {
.subTexts p {
font-size: 20px
}
.button {
font-size: 12px
}
}
#media screen and (max-width:600px) {
.welcome,
.subText,
.sub {
background: rgba(255, 255, 255, .3);
}
.welcome {
border-radius: 20px 20px 0 0;
}
.subText {
border-radius: 0 0 20px 20px;
}
.sub {
border: 1px solid;
}
.greet {
font-size: 30px
}
.subTexts p {
font-size: 16px;
}
.button {
font-size: 8px;
margin-right: -3%
}
}
window.addEventListener('load', function() {
var welcome = document.querySelector('.greet'),
subtext = document.querySelector('.subTexts'),
form = document.querySelector('.sub'),
follow = document.querySelector('.followUs'),
social = document.querySelectorAll('.socialIcon'),
delay = 1000;
setTimeout(function() { welcome.style.top = '0'; }, delay);
setTimeout(function() { subtext.style.bottom = '0%'; }, delay * 2);
setTimeout(function() { subtext.style.bottom = '-100%'; }, delay * 4);
setTimeout(function() { form.style.opacity = '1'; }, delay * 5);
setTimeout(function() { follow.style.bottom = '0%'; }, delay * 6);
setTimeout(
function() {
social[0].style.marginTop = '0px';
social[1].style.marginTop = '0px';
social[2].style.marginTop = '0px';
}, delay * 7
);
});

<!DOCTYPE html>
<html lang="en">
<head>
<title>Space Trip - Adventure of a Lifetime</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
#import url(http://weloveiconfonts.com/api/?family=brandico);
#import url(https://fonts.googleapis.com/css?family=Junge);
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: url('https://static.pexels.com/photos/26206/pexels-photo.jpg') no-repeat;
background-size: cover;
font-family: Junge, georgia;
text-align: center;
}
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
.content {
max-width: 40%;
max-height: 50%;
margin: 100px auto;
}
.welcomeText,
.form,
.social {
width: 100%;
}
/*welcome text*/
.welcome {
height: 100px;
position: relative;
border-bottom: 1px solid;
overflow: hidden;
}
.greet {
width: 100%;
height: 100%;
position: absolute;
top: 100%;
font-size: 50px;
text-align: center;
line-height: 100px;
transition: all .5s;
}
/*taglines*/
.subText {
width: 100%;
height: 100px;
position: relative;
font-size: 30px;
overflow: hidden;
}
.subText p {
height: 100%;
line-height: 100px;
text-align: center;
}
.subTexts {
width: 100%;
position: absolute;
bottom: 100%;
text-align: center;
overflow: hidden;
transition: all .5s;
}
/*FORM*/
.form {
width: 100%;
height: 100px;
position: relative;
}
.sub {
width: 90%;
height: 50px;
margin: auto;
opacity: 0;
border: none;
border-radius: 50px;
background: rgba(0, 0, 0, .05);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .4), 0 0 0px 5px rgba(0, 0, 0, .1);
transition: all .5s;
}
.email {
width: 70%;
height: 70%;
margin: 1% 0;
padding-left: 10px;
background: none;
border: none;
font-size: 20px;
}
input:focus {
outline: none;
}
.button {
width: 20%;
height: 100%;
float: right;
border: none;
border-radius: 0 50px 50px 0;
font-size: 16px;
background: red;
background-color: #49afcd;
background-image: linear-gradient(top, #5bc0de, #2f96b4);
cursor: pointer;
transition: all .5s;
}
.button:hover {
background: #2f96b4;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
}
/*footer-follow us*/
.follow {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
.followUs {
width: 100%;
height: 100%;
position: absolute;
bottom: 100%;
line-height: 100px;
text-align: center;
font-size: 40px;
transition: all .5s;
}
.socialIcons {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
.socialIcon {
width: 33.33%;
height: 100px;
float: left;
margin-top: 100px;
font-size: 50px;
line-height: 100px;
transition: margin-top .5s, color .5s;
cursor: pointer;
}
.socialIcon:hover {
color: #49afcd;
text-shadow: 0 0 20px white;
}
.twitter {
transition-delay: .5s, 0;
}
.github {
transition-delay: 1s, 0;
}
#media screen and (max-width:930px) {
.subTexts p {
font-size: 20px
}
.button {
font-size: 12px
}
}
#media screen and (max-width:600px) {
.welcome,
.subText,
.sub {
background: rgba(255, 255, 255, .3);
}
.welcome {
border-radius: 20px 20px 0 0;
}
.subText {
border-radius: 0 0 20px 20px;
}
.sub {
border: 1px solid;
}
.greet {
font-size: 30px
}
.subTexts p {
font-size: 16px;
}
.button {
font-size: 8px;
margin-right: -3%
}
}
</style>
<script>
window.addEventListener('load', function() {
var welcome = document.querySelector('.greet'),
subtext = document.querySelector('.subTexts'),
form = document.querySelector('.sub'),
follow = document.querySelector('.followUs'),
social = document.querySelectorAll('.socialIcon'),
delay = 1000;
setTimeout(function() { welcome.style.top = '0'; }, delay);
setTimeout(function() { subtext.style.bottom = '0%'; }, delay * 2);
setTimeout(function() { subtext.style.bottom = '-100%'; }, delay * 4);
setTimeout(function() { form.style.opacity = '1'; }, delay * 5);
setTimeout(function() { follow.style.bottom = '0%'; }, delay * 6);
setTimeout(
function() {
social[0].style.marginTop = '0px';
social[1].style.marginTop = '0px';
social[2].style.marginTop = '0px';
}, delay * 7
);
});
</script>
</head>
<body>
<div class="content">
<div class="welcomeText">
<div class="welcome">
<h1 class="greet">Space Trip - Adventure of a Lifetime</h1>
</div>
<div class="subText">
<div class="subTexts">
<p class="subscribe">Subscribe to our newsletter</p>
<p class="soon">We are launching soon</p>
</div>
</div>
</div>
<div class="form">
<form action="" class="sub">
<input class='email' type="email">
<button class="button" value="Send">Get Started</button>
</form>
</div>
<div class="social">
<div class="follow">
<p class="followUs">Or follow us</p>
</div>
<div class="socialIcons">
<div class="socialIcon facebook brandico-facebook-rect"></div>
<div class="socialIcon twitter brandico-twitter-bird"></div>
<div class="socialIcon github brandico-github"></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

My Jquery/Javascript will not connect! - works in HTML - NEW to programming

I can not figure out why my jquery/javascript won't show up on my loaded web page.
When I put it in the actual HTML file it works.
Everytime I try to link the js, jquery file it fails. I don't understand. Please help!!
NMC
$(document).ready(function(){
window.onload=function(){
$('#one').hide();
$('#two').hide();
$('#three').hide();
});
$(function() {
$("#menu-circle").on("mouseenter", function() {
var i = $(this).index();
$("#one").eq(i)
.show().siblings().hide();
});
$("#menu-circle1").on("mouseenter", function() {
var i = $(this).index();
$("#two").eq(i)
.show().siblings().hide();
});
$("#menu-circle3").on("mouseenter", function() {
var i = $(this).index();
$("#three").eq(i)
.show().siblings().hide();
});
$('html,body').animate({ scrollTop: 9999 }, 'slow');
});
}
});
}
});
}
#one {
text-decoration: none;
font-size: 100px;
height: 50%;
width: 80%;
margin-top: 20%;
position: fixed;
padding-left: 30px;
padding-right: 30px;
padding-top: 10%;
vertical-align: middle;
margin-right: 50%;
justify-content: left;
color: rgba(255, 255, 255, 0.62);
z-index: 1;
background-color:rgba(109, 104, 104, 0.54)
}
#two {
text-decoration: none;
font-size: 100px;
height: 50%;
width: 80%;
margin-top: 20%;
position: fixed;
padding-left: 30px;
padding-right: 30px;
padding-top: 10%;
vertical-align: middle;
margin-right: 50%;
justify-content: left;
color: rgba(255, 255, 255, 0.62);
z-index: 1;
background-color:rgba(109, 104, 104, 0.54)
}
#three {
text-decoration: none;
font-size: 100px;
height: 50%;
width: 80%;
margin-top: 20%;
position: fixed;
padding-left: 30px;
padding-right: 30px;
padding-top: 10%;
vertical-align: middle;
margin-right: 50%;
justify-content: left;
color: rgba(255, 255, 255, 0.62);
z-index: 1;
background-color:rgba(109, 104, 104, 0.54)
}
.wrapper {
width: 100%;
height: 2500px;
margin-top: -30px;
background-image: url("joaquinmiller.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
filter: grayscale (100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.wrapper:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.menunav {
cursor: pointer;
display: inline;
position: fixed;
z-index: 1;
margin-left: 90%;
margin-top: 40%;
}
#menu-circle {
width: 40px;
height: 40px;
background: gray;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: auto;
margin-top: 20px;
opacity: 1.0;
}
.menu-text {
text-align: center;
text-decoration: none;
font-family: 'Oswald', sans-serif;
font-weight:700;
letter-spacing: .07em;
opacity: 1;
}
.menu-item:hover #menu-circle{
background:yellow;
opacity: 1.0;
}
.menu-item:hover .menu-text{
text-decoration: none;
color: yellow;
opacity: 1.0;
text-decoration: none;
}
#menu-circle1 {
width: 40px;
height: 40px;
background: gray;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: auto;
margin-top: 20px;
opacity: 1.0;
}
.menu-text1 {
text-align: center;
text-decoration: none;
font-family: 'Oswald', sans-serif;
font-weight:700;
letter-spacing: .07em;
opacity: 1;
}
.menu-item1:hover #menu-circle1 {
background:yellow;
opacity: 1.0;
}
.menu-item1:hover .menu-text1 {
text-decoration: none;
color: yellow;
opacity: 1.0;
text-decoration: none;
}
#menu-circle3 {
width: 40px;
height: 40px;
background: gray;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: auto;
margin-top: 20px;
opacity: 1.0;
}
.menu-text1 {
text-align: center;
text-decoration: none;
font-family: 'Oswald', sans-serif;
font-weight:700;
letter-spacing: .07em;
opacity: 1;
}
.menu-item3:hover #menu-circle3 {
background:yellow;
opacity: 1.0;
}
.menu-item1:hover .menu-text1 {
text-decoration: none;
color: yellow;
opacity: 1.0;
text-decoration: none;
}
.topcontainer {
position: !important;
width: 100%;
filter: grayscale(100%)
}
.topcontainer:hover {
filter: grayscale(0%)
}
button {
height: 100px;
width: 100px;
border-style: none;
color: white;
font-size: 15px;
}
button p {
font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, intial-scale=1">
<title>FINAL</title>
<link rel="stylesheet" type="text/css" href="evenmorepractice.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<header>
</header>
<div class="menunav">
<div class="menu-item">
<div id="menu-circle"></div>
</div>
<div class="menu-item1">
<div id="menu-circle1"></div>
</div>
<div class="menu-item3">
<div id="menu-circle3"></div>
</div>
</div>
<article>
<p id="one">Neighborhoods<button><p>click</p></button></p>
<p id="two">History<button>click</button></p>
<p id="three">Housing Crisis<button>readmore</button></p>
</article>
<div class"whitenav">whitenav</div>
<div class="wrapper">
<p class="oakland">OAKLAND</p>
</div>
<script src="script.js"></script>
</body>
</html>

You need to reference your script in the head of the html file. So right below the tag where you add jquery, you need to add this:
<script src="path\to\your\js\file"></script>

Your JS file is really messed up, i think this is what you're looking for..
$(function() {
$('#one').hide();
$('#two').hide();
$('#three').hide();
$("#menu-circle").on("mouseenter", function() {
var i = $(this).index();
$("#one").eq(i)
.show().siblings().hide();
});
$("#menu-circle1").on("mouseenter", function() {
var i = $(this).index();
$("#two").eq(i)
.show().siblings().hide();
});
$("#menu-circle3").on("mouseenter", function() {
var i = $(this).index();
$("#three").eq(i)
.show().siblings().hide();
});
$('html,body').animate({ scrollTop: 9999 }, 'slow');
});

Develop Reference

JavaScript is the programming language of the Web.

classList.add() is not working | Vanilla JavaScript - javascript

Your problem seems to be the HTML, your #question-confirm seems to have a missing closing tag. You need to add the missing </div>. This is what makes #signup-confirm to be inside #question-confirm.

Related

How to delay something thats just a possibility

How to display another page without reloading?

On click div moves down

Text editor error

My Jquery/Javascript will not connect! - works in HTML - NEW to programming

Categories

Resources