Cannot set property 'innerHTML' of undefined, Contact form submit

Cannot set property 'innerHTML' of undefined, Contact form submit - javascript

I want to make a contact form, but my text is not displayed when I press "Submit". And my error is Cannot set property "innerHTML" of undefined. Its an external file.
I add under my code. All my external files. If you have any advice just type it, thanks :D (sorry for my bad english i'm trying to improve it)
function validation() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
var error_message = document.getElementById("error_message").value;
var text;
error_message.style.padding = "10px";
if (name.length < 5 ) {
text = "Te rog sa introduci un nume valid";
error_message.innerHTML = text;
return false;
}
if (message.length <= 50) {
text = "Te rog sa introduci minim 50 de caractere";
error_message.innerHTML = text;
return false;
}
if(email.indexOf('#') || email.length < 6) {
text = "Te rog sa introduci un email valid";
error_message.innerHTML = text;
return false;
}
alert("S-a trimis cu succes!");
return true;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght#800&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-family: 'Gloria Hallelujah', cursive;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
body {
font-family: 'Gloria Hallelujah', cursive;
background-color: #363535;
display: flex;
}
.main {
margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */
padding: 1rem;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #757d77;
}
body::-webkit-scrollbar-thumb {
background: #c2c2c2;
}
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: #2e2e2e;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 225px;
}
.nav-item {
font-size: 30px;
text-align: center;
width: 85%;
padding: 10px
}
ul {
list-style-type: none;
}
li a {
display: block;
text-decoration:0;
color:#b6b8ba;
}
.nav-link {
align-items: center;
height: 3rem;
text-decoration: none;
}
.secnav-item {
font-size: 30px;
text-align: center;
padding: 5px;
width: 85%
}
.secnavbar {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 50px;
}
.imgnav {
margin-top: 10px;
margin-left: 27px;
position: absolute;
}
.copy {
color: white;
position: absolute;
margin-left: 50px;
}
.contact-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact-info {
position: relative;
color: #fff;
max-width: 500px;
line-height: 95px;
padding-left: 50px;
font-size: 18px;
top: 50px;
}
.contact-info i {
margin-right: 20px;
font-size: 25px;
}
.contact-form {
max-width:700px;
margin-right: 50px;
position: relative;
top: 50px;
left: 100px;
}
.contact-info, .contact-form {
flex: 1;
}
.contact-form h2 {
color: #fff;
text-align: center;
font-size: 35px;
text-transform: uppercase;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
}
.contact-form .text-box {
background: #b8b8b8;
color: #fff;
border: none;
width: calc(50% - 10px);
height: 50px;
padding: 12px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .text-box:first-child {
margin-right: 15px;
}
.contact-form textarea {
background: #b8b8b8;
color: #fff;
border: none;
width: 100%;
padding: 12px;
font-size: 15px;
min-height: 200px;
max-height: 400px;
resize: vertical;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .send-btn {
float: right;
background: #261010;
color: #fff;
border: none;
width: 120px;
height: 40px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
transition-property: background;
}
.contact-form .send-btn:hover {
background: #ff2a00;
}
#error_message {
padding: 0;
background: #d60000;
margin-bottom: 2px;
text-align: center;
font-size: 15px;
transition: all 0.5s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Constantin Bogdan-Teodor</title>
<link rel="icon" href="https://icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon">
<link rel="stylesheet" href="contactme.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</head>
<body>
<div class="navbar">
<div class="copy">
©
</div>
<div class="imgnav">
<a href="home.html">
<svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/>
</svg>
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="home.html" class="nav-link">
<i class="fas fa-home"></i>
</a>
</li>
<li class="nav-item">
<a href="aboutme.html" class="navbar-link">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item">
<a href="goals.html" class="navbar-link">
<i class="fas fa-bullseye"></i>
</a>
</li>
<li class="nav-item">
<a href="stiaica.html" class="navbar-link">
<i class="fas fa-code"></i>
</a>
</li>
<li class="nav-item">
<a href="contactme.html" class="navbar-link">
<i class="fas fa-at"></i>
</a>
</li>
</ul>
<div class="secondnav">
<ul class="secnavbar">
<li class="secnav-item">
<a href="https://www.facebook.com/bogdan.teodor.148/" target="_blank" class="secnavbar-link">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="secnav-item">
<a href="https://www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="contact-section">
<div class="contact-info">
<div><i class="fas fa-map-marker-alt"></i>Str. Avram Iancu nr16, Ors. Cernavoda, jud. CT</div>
<div><i class="fas fa-envelope"></i>bogdan.constantin0110#gmail.com</div>
<div><i class="fas fa-phone"></i>+40769881692</div>
<div><i class="fas fa-university"></i>Universitatea Tehnica Gheorghe Asachi</div>
</div>
<div class="contact-form">
<h2>Contacteaza-ma</h2>
<div id="error_message"></div>
<form class="contact" onsubmit=" return validation()">
<input type="text" name="name" class="text-box" id="name" placeholder="Nume complet">
<input type="" name="email" class="text-box" id="email" placeholder="Email">
<textarea name="message" id="message" rows="5" placeholder="Mesajul tau"></textarea>
<input type="submit" class="send-btn">
</form>
</div>
</div>
</div>
</body>
</html>

I think that you cant write this line of code like this var error_message = document.getElementById("error_message").value;
It should be var error_message = document.getElementById("error_message");
Because you dont need value of div you only need div.

Related

How to change image position

I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!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>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>

Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!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>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>

Whitespace randomly appeared in site

I am building a website to showcase my future projects. But a whitespace randomly appeared on the site. When I inspect the site in chrome, the space does not seem to belong to any element. The space is between the banner and container-fluid from bootstrap. But when I add an extra div between the banner and container-fluid, the space seems to be on top of the container-fluid rather than below the banner.
Another problem I wanted to solve was, how can I make the text "Coming Soon" disappear when I hover over the images. I tried using "+" and "~" but it doesn't seem to work.
Any help or ideas would be very much appreciated! :)
Here is the code.
const navSlide = () => {
const burgerMenu = document.querySelector(".burger");
const nav = document.querySelector(".navbar-nav");
const navlinks = document.querySelectorAll(".navbar-nav li");
burgerMenu.addEventListener("click", function () {
// Toggle drop down menu
nav.classList.toggle("mobilenav-active");
// Increase links' opacity
navlinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `linkSlide 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
// Toggle burger to cross animation
burgerMenu.classList.toggle("toggle");
});
};
navSlide();
#import url("https://fonts.googleapis.com/css2?family=Oswald:wght#700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght#600&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
button {
outline: none !important;
}
/*NAVIGATION BAR*/
header {
position: absolute;
z-index: 10;
width: 100%;
padding: 25px 5%;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand {
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
text-shadow: 1px 1px 3px black;
margin-right: 0;
}
.navbar-brand:hover {
color: rgba(202, 210, 197, 1);
}
.nav-item,
.nav-link {
font-size: 1.05em;
text-transform: uppercase;
font-weight: 800;
margin-right: 20px;
color: #cad2c5;
text-shadow: 1px 1px 5px black;
font-family: "Montaga", serif;
letter-spacing: 1px;
transition: all 0.5s;
}
.nav-link:hover {
background: #2f3e46;
color: #cad2c5;
}
#navbutton {
font-size: 1.05em;
text-transform: capitalize;
font-weight: 500;
font-family: "Montaga", serif;
letter-spacing: 1px;
padding: 9px 25px;
background: #cad2c5;
border: none;
border-radius: 50px;
transition: all 0.5s;
margin-left: 10px;
}
#navbutton:hover {
background: #2f3e46;
color: #cad2c5;
}
.burger div {
width: 25px;
height: 3px;
background: #cad2c5;
margin: 5px;
border-radius: 3px;
transition: all 0.3s ease;
}
.burger {
display: none;
}
/* Make from burger icon to X icon */
.toggle #line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle #line2 {
opacity: 0;
}
.toggle #line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Animation for links */
#keyframes linkSlide {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*BANNER*/
.banner {
position: relative;
background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
url("../images/projects/banner-img.jpg") center/cover no-repeat fixed;
background-position: 50% 60%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#banner-text {
font-size: 6rem;
color: rgb(202, 210, 197);
letter-spacing: 2px;
text-shadow: 1px 1px 10px black;
font-family: "Dancing Script", cursive;
}
/* Mobile */
#media screen and (max-width: 992px) {
body {
overflow-x: hidden;
}
.navbar-nav {
position: absolute;
height: calc(95vh - 80px);
right: 0;
width: 100%;
top: 80px;
background: #354f52;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 100px 0px;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease-in;
}
.nav-item,
.nav-link {
margin-right: 0;
text-shadow: none;
}
.navbar-nav li a:hover {
color: #354f52;
background: #edf0f1;
padding: 10px 20px;
text-shadow: none;
}
.nav-item {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
.navbar-nav.mobilenav-active {
transform: translateX(0%);
opacity: 0.96;
}
#navbutton {
margin-left: 0;
}
#banner-text {
font-size: 5rem;
}
}
.transition {
width: 100vw;
height: 50px;
background: #000;
}
/*IMAGE GALLERY*/
.container-fluid {
background: rgb(47,62,70);
background: radial-gradient(circle, rgba(47,62,70,1) 0%, rgba(132,169,140,1) 100%);
}
.item {
transition: all 0.5s ease-in-out;
position: relative;
text-align: center;
color: white;
}
.item img {
filter: brightness(50%);
transition: all 0.3s ease-in-out;
}
.item img:hover {
filter: brightness(100%);
}
.img-center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Oswald", sans-serif;
font-weight: 500;
font-size: 2.5rem;
color: #f5f5f5;
text-shadow: 1px 1px 2px black;
transition: all 0.3s ease-in-out;
}
/*FOOTER*/
footer {
display: flex;
flex-flow: row wrap;
padding: 60px 50px 20px 50px;
background: #2f3e46;
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
.footer {
margin: auto;
position: relative;
}
.footer-container {
position: absolute;
margin: 0;
padding: 0;
top: 50%;
transform: translateY(-50%);
}
#logo {
margin: 0;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
}
.footer > * {
flex: 1 100%;
}
.footer-col-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-col-right h4 {
font-size: 20px;
color: #cad2c5;
margin-bottom: 35px;
text-transform: capitalize;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
}
.footer-col-right h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer-col-right ul li:not(:last-child) {
margin-bottom: 10px;
}
.box li a,
.box li p {
font-size: 16px;
color: #f5f5f5;
text-decoration: none;
font-weight: 300;
display: block;
font-family: "Roboto Slab", serif;
transition: all 0.3s ease;
}
.footer-col-right ul li a:hover {
color: #cad2c5;
padding-left: 10px;
}
.footer a {
text-decoration: none;
}
.footer-col-right {
display: flex;
flex-flow: row wrap;
}
.footer-col-right > * {
flex: 1 50%;
margin-right: 1.25em;
}
.footer-row-bot {
text-align: center;
color: #cad2c5;
padding-top: 45px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
}
.footer-col-left p {
padding-right: 20%;
}
.footer-col-left .socials a {
display: inline-block;
height: 40px;
width: 40px;
background: #52796f;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: rgba(202, 210, 197, 1);
transition: all 0.5s ease;
}
.socials {
padding-top: 5px;
}
.footer-col-left .socials a:hover {
background: rgba(202, 210, 197, 1);
color: #52796f;
}
#media screen and (max-width: 780px) {
footer {
padding: 60px 10px 20px 10px;
}
}
#media screen and (min-width: 700px) {
.footer-col-right > * {
flex: 1;
}
.footer-col-left {
flex: 1 0px;
}
.footer-col-right {
flex: 2 0px;
}
}
#media screen and (max-width: 700px) {
.footer {
padding: 15px;
}
.footer-container {
position: absolute;
margin-top: 30px;
padding: 0;
top: 0;
transform: translateY(0);
}
.footer-col-right {
margin-top: 75px;
}
.footer-col-right h4 {
margin-top: 50px;
}
}
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="./css/project-style.css" rel="stylesheet" />
<link rel="shortcut icon" href="./images/fav.ico" type="image/x-icon" />
<title>Projects -BWS</title>
</head>
<body>
<div class="site">
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
<ul class="navbar-nav navbar-light ml-lg-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html"
>Home<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./project.html">Projects</a>
</li>
</ul>
<div class="burger navbar-center">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<a href="./contact.html" id="contact">
<button id="navbutton">Contacts</button>
</a>
</nav>
</header>
<section class="banner">
<h1 id="banner-text">My Creations</h1>
</section>
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4">
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img1.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img1.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img2.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img2.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img3.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img3.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img4.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img4.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img5.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img5.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img6.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img6.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img7.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img7.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img8.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img8.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img9.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img9.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-col-left">
<div class="footer-container">
<a id="logobutton" href="index.html">
<h4 id="logo">BrianWyann</h4>
</a>
<div class="socials">
<a href="https://www.facebook.com/" target="blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://twitter.com/" target="blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://www.instagram.com/" target="blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://www.linkedin.com/feed/" target="blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
</div>
<ul class="footer-col-right">
<li>
<h4>Myself</h4>
<ul class="box">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</li>
<li class="mooc">
<h4>MOOCs</h4>
<ul class="box">
<li>edX</li>
<li>
Coursera
</li>
<li>
<a href="https://www.futurelearn.com/" target="blank"
>FutureLearn</a
>
</li>
<li>
<a href="https://cognitiveclass.ai/" target="blank"
>CognitiveClass</a
>
</li>
</ul>
</li>
<li>
<h4>Address</h4>
<ul class="box">
<li>
<p>
C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
Jakarta, Indonesia
</p>
</li>
</ul>
</li>
</ul>
<div class="footer-row-bot">
<p>All right reserved by ©wyannbrian 2020</p>
</div>
</footer>
<script src="./js/app.js"></script>
</div>
</body>
</html>

There is a setting with !important for margin-top buried in an SCSS file.
.mt-4, .my-4 {
margin-top: 1.5rem!important;
}
To override it for just this one instance (so as not to disturb its usage anywhere else if used) introduce this inline style:
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4" style="margin-top: 0 !important;">

Solution for whitespace: Remove margin-top styling applied to the div class="row mt-4" inside div class="container-fluid".
.mt-4 {
margin-top: 1.5rem!important; /*remove this*/
}

How to open en close menu using javascript?

Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!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>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>

You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.

Is there a way to fix this problem of a slideToggle() inside a slideToggle() inside a slideToggle() while using flex-grids?

If you run the code snippet, you'll see that the output is kind of "bugged".
I have been stuck on this for the past 2 days and can't seem to make it work at all.
I tried several solutions found here on stack, but none seem to do it for me. Basically there is Parent, Child1....n, and Grandchild1....n. Whenever i click on the parent, the list with all children should open. And for every child i click, the list with all grandchildren should open.
My code kinda does that, but not in a visually pleasant way.
PS: I am not a web developer and this whole thing is a request from my boss so everything is in fact new for me.
Thank you all and hope this question does not upset anyone.
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").slideToggle(1000, "linear");
$("#infrtransp").toggleClass('fa-book fa-book-open');
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
});
$("#infrtransp").mouseover(function() {
jQuery('#infrtransp').css('cursor', 'pointer');
});
$("#infrtranspUL").mouseover(function() {
jQuery('#infrtranspUL').css('cursor', 'pointer');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
height: 1000px;
overflow: scroll;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;" id="infrtranspUL">
<div class="flex-grid">
<div class="fas fa-book col1"></div>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<div class="fas fa-file col1"></div>
<div class="col2">Formular - AndConsult
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<div class="fas fa-eye col3"></div>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" <div class="fas fa-download col4"></div>
</a>
</div>
</li>
</ul>
</ul>
</div>

First I congratulate you , despite you're not a developer , you did a great work
If I could understand you issue ,
First, in HTML code you have to move the id #infrtranspUL from the li to the child .fa-book div element,
then your condition of showing li child was wrong replace it ony
from
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
to
if (!($("#infrtranspFORM").css("display") === "none")) {
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
$("#infrtranspFORM").slideToggle(1000, "linear");
}
And now it should work :
See below snippet :
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").parents("li").slideToggle(1000, "linear");
$("#infrtransp").toggleClass('fa-book fa-book-open');
if (!($("#infrtranspFORM").css("display") === "none")) {
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
height: 1000px;
overflow: scroll;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
#infrtransp:hover,
#infrtranspUL:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtranspUL"></div>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<div class="fas fa-file col1"></div>
<div class="col2">Formular - AndConsult
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<div class="fas fa-eye col3"></div>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
<div class="fas fa-download col4"></div>
</a>
</div>
</li>
</ul>
</ul>
</div>

Not too sure of what you expect, but , font-awsome uses <i> tags, maybe you can stick to it to easily read the code & avoid confusion .
You toggle a class (for an icone) on an element that does not hold it at first : $("#infrtranspUL").toggleClass('fa-book fa-book-open'); , you can update the selector $("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');.
height + overflow does not seem necessary here .
possible result you are expecting:
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").slideToggle(1000, "linear");
$("#infrtransp ").toggleClass('fa-book fa-book-open');
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');
});
$("#infrtransp").mouseover(function() {
jQuery('#infrtransp').css('cursor', 'pointer');
});
$("#infrtranspUL").mouseover(function() {
jQuery('#infrtranspUL').css('cursor', 'pointer');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="maindiv">
<div class="flex-grid">
<div class="fa fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;" id="infrtranspUL">
<div class="flex-grid">
<i class="fa fa-book col1"></i>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <i class="fas fa-book"></i> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<i class="fas fa-file col1"></i>
<div class="col2">Formular - AndConsult
<br>(Click pe <i class="fas fa-book"></i> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<i class="fas fa-eye col3"></i>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
<i class="fas fa-download col4"></i>
</a>
</div>
</li>
</ul>
</ul>
</div>

resizing div height so it always fits the page

Hey guys I'm trying to make a DIV resize to always fit 90% of my page. I have a footer (.kontakt) that I'd like to always have positioned at the bottom of the screen, so I need my DIV to scale (if it's too big the footer won't move when I scroll). I am loading external html files onto my div using jquery, and the div always resizes to fit content. Problem is, I don't want to set max-height, min-height in css but would like for the div to resize every time the browser window resized.
Is there an easy solution to do that that I failed to find, and can I write a function that does that?
What event handler can I use that triggers on browser window resize?
I guess I could just use position:fixed on the footer(haven't actually tried if it works) but I'd prefer to have scrollbars on my div (hence overflow:auto;) than scrolling in the browser window. Thanks for the help
$(document).ready(function() {
$('.content').load('pages/test.html');
console.log("content loaded");
$(".kontakt").hover(
function() {
$(".kontakt").width("20%");
$(".kontakt").css("margin-left", "40%");
$(".kontakt").append("<a class='kontakttext'>mobitel: 031-535-919</a>");
$(".kontakt").append("<br><a class='kontakttext'>stacionarni tel.: 01-3664-515</a><br>");
$(".kontakt").append("<br><a class='kontakttext'>email: </a><a class='kontaktmail' href='mailto:sustersic_miha#hotmail.com'>sustersic_miha#hotmail.com</a><br>");
$(".kontakt").append("<br><a class='kontakttext'>Visoko 19<br>1292 Ig<br>Slovenija</a>");
},
function() {
$(".kontakt").empty();
$(".kontakt").width("10%");
$(".kontakt").css("margin-left", "45%");
$(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
});
$(".menubutton").hover(
function() {
$(this).css("color", "#cccccc");
$(this).prev().css("color", "#cccccc");
$(this).next().css("color", "#cccccc");
},
function() {
$(this).css("color", "#ffffff");
$(this).prev().css("color", "#ffffff");
$(this).next().css("color", "#ffffff");
});
});
body {
margin: 0;
font-family: verdana;
background-image: url("images/background_test.jpg");
background-size: cover;
}
.topmenu {
width: 90%;
margin: auto;
background-color: #000066;
border-radius: 0px 0px 10px 10px;
text-align: center;
opacity: 0.7;
}
.menubutton {
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
background-color: #000066;
color: #ffffff;
font-weight: bolder;
padding: 2px;
}
.activatedmenubutton {
background-color: #cccccc;
}
.menubreak {
background-color: #000066;
display: inline-block;
color: #ffffff;
padding: 2px;
}
.kontaktlabel {
font-weight: bolder;
}
.kontaktlabelbox {
background-color: #000066;
color: #ffffff;
margin-top: 6px;
margin-bottom: 5px;
}
.kontakttext {
font-size: 0.7em;
background-color: #000066;
color: #ffffff;
}
.kontaktmail {
font-size: 0.7em;
text-decoration: none;
color: #999999;
}
.content {
margin: auto;
width: 80%;
min-height: 200px;
overflow: auto;
border: 1px solid black;
}
.kontakt {
position: absolute;
bottom: 0;
width: 10%;
margin-left: 45%;
background-color: #000066;
color: #cccccc;
border-radius: 10px 10px 0px 0px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Iščem delo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="unicornsandrainbows.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</head>
<body>
<div class="topmenu">
<a class="menubreak" id="1">|</a
><a class="menubutton" id="iz">Izobrazba</a
><a class="menubreak" id="2">|</a
><a class="menubutton" id="zn">Znanja in Kompetence</a
><a class="menubreak" id="3">|</a
><a class="menubutton" id="izk">Izkušnje</a
><a class="menubreak" id="4">|</a
><a class="menubutton" id="pč">Prosti Čas</a
><a class="menubreak" id="5">|</a
><a class="menubutton" id="fo">Fotografije</a
><a class="menubreak" id="6">|</a>
</div>
<div class="content">
</div>
<div class="kontakt">
<div class="kontaktlabelbox">
<div class="kontaktlabel">Kontakt</div>
</div>
</div>
</body>
</html>

This makes .contact always have height equal to 90% of window height:
$(document).ready(function() {
$('.content').load('pages/test.html');
console.log("content loaded");
$(".kontakt").hover(
function() {
$(".kontakt").width("20%");
$(".kontakt").css("margin-left", "40%");
$(".kontakt").append("<a class='kontakttext'>mobitel: 031-535-919</a>");
$(".kontakt").append("<br><a class='kontakttext'>stacionarni tel.: 01-3664-515</a><br>");
$(".kontakt").append("<br><a class='kontakttext'>email: </a><a class='kontaktmail' href='mailto:sustersic_miha#hotmail.com'>sustersic_miha#hotmail.com</a><br>");
$(".kontakt").append("<br><a class='kontakttext'>Visoko 19<br>1292 Ig<br>Slovenija</a>");
},
function() {
$(".kontakt").empty();
$(".kontakt").width("10%");
$(".kontakt").css("margin-left", "45%");
$(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
});
$(".menubutton").hover(
function() {
$(this).css("color", "#cccccc");
$(this).prev().css("color", "#cccccc");
$(this).next().css("color", "#cccccc");
},
function() {
$(this).css("color", "#ffffff");
$(this).prev().css("color", "#ffffff");
$(this).next().css("color", "#ffffff");
});
});
$(window).load(function() { $(window).trigger('resize') });
$(window).resize(function() {
h = $(window).height() * 0.9;
$('.content').css({'height': h + 'px'});
});
body {
margin: 0;
font-family: verdana;
background-image: url("images/background_test.jpg");
background-size: cover;
}
.topmenu {
width: 90%;
margin: auto;
background-color: #000066;
border-radius: 0px 0px 10px 10px;
text-align: center;
opacity: 0.7;
}
.menubutton {
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
background-color: #000066;
color: #ffffff;
font-weight: bolder;
padding: 2px;
}
.activatedmenubutton {
background-color: #cccccc;
}
.menubreak {
background-color: #000066;
display: inline-block;
color: #ffffff;
padding: 2px;
}
.kontaktlabel {
font-weight: bolder;
}
.kontaktlabelbox {
background-color: #000066;
color: #ffffff;
margin-top: 6px;
margin-bottom: 5px;
}
.kontakttext {
font-size: 0.7em;
background-color: #000066;
color: #ffffff;
}
.kontaktmail {
font-size: 0.7em;
text-decoration: none;
color: #999999;
}
.content {
margin: auto;
width: 80%;
min-height: 200px;
overflow: auto;
border: 1px solid black;
}
.kontakt {
position: absolute;
bottom: 0;
width: 10%;
margin-left: 45%;
background-color: #000066;
color: #cccccc;
border-radius: 10px 10px 0px 0px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Iščem delo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="unicornsandrainbows.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</head>
<body>
<div class="topmenu">
<a class="menubreak" id="1">|</a
><a class="menubutton" id="iz">Izobrazba</a
><a class="menubreak" id="2">|</a
><a class="menubutton" id="zn">Znanja in Kompetence</a
><a class="menubreak" id="3">|</a
><a class="menubutton" id="izk">Izkušnje</a
><a class="menubreak" id="4">|</a
><a class="menubutton" id="pč">Prosti Čas</a
><a class="menubreak" id="5">|</a
><a class="menubutton" id="fo">Fotografije</a
><a class="menubreak" id="6">|</a>
</div>
<div class="content">
</div>
<div class="kontakt">
<div class="kontaktlabelbox">
<div class="kontaktlabel">Kontakt</div>
</div>
</div>
</body>
</html>

#John Kapantzakis have already provided a solution but i will try to give you a non js solution here! ~ let me know if you want to understand the trick. P.S this solution do-sent keep layout exactly at 90% but enough that footer have its own negative area. Go on play with it and let me know if it is what you wanted.
body {
margin: 0;
font-family: verdana;
background-image: url("images/background_test.jpg");
background-size: cover;
}
.topmenu {
width: 90%;
margin: auto;
background-color: #000066;
border-radius: 0px 0px 10px 10px;
text-align: center;
opacity: 0.7;
}
.menubutton {
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
background-color: #000066;
color: #ffffff;
font-weight: bolder;
padding: 2px;
}
.activatedmenubutton {
background-color: #cccccc;
}
.menubreak {
background-color: #000066;
display: inline-block;
color: #ffffff;
padding: 2px;
}
.kontaktlabel {
font-weight: bolder;
}
.kontaktlabelbox {
background-color: #000066;
color: #ffffff;
margin-top: 6px;
margin-bottom: 5px;
}
.kontakttext {
font-size: 0.7em;
background-color: #000066;
color: #ffffff;
}
.kontaktmail {
font-size: 0.7em;
text-decoration: none;
color: #999999;
}
.content {
margin: auto;
width: 80%;
min-height: 200px;
height: 100%;
overflow: auto;
border: 1px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.kontakt {
background-color: #000066;
border-radius: 10px 10px 0 0;
bottom: 0;
color: #cccccc;
display: inline-block;
margin: 10px auto 0;
padding: 0 7px;
position: static;
text-align: center;
}
body, html{ height: 100%; }
.t-layout{ display: table; width: 100% }
.t-layout--full{ height: 100%; }
.t-row{ display: table-row; }
.t-col{ display: table-cell; }
.t-col--top{ vertical-align: top; }
.t-col--mid{ vertical-align: middle; }
.t-col--bot{ vertical-align: bottom; }
.t-col--compress{ height: 1px; }
.t-a-c{ text-align: center; }
.content-wrap{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow-y: auto;}
.relative{ position: relative; }
<!DOCTYPE html>
<html>
<head>
<title>Iščem delo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="unicornsandrainbows.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</head>
<body>
<div class="t-layout t-layout--full">
<div class="t-row">
<div class="t-col t-col--compress">
<div class="topmenu">
<a class="menubreak" id="1">|</a
><a class="menubutton" id="iz">Izobrazba</a
><a class="menubreak" id="2">|</a
><a class="menubutton" id="zn">Znanja in Kompetence</a
><a class="menubreak" id="3">|</a
><a class="menubutton" id="izk">Izkušnje</a
><a class="menubreak" id="4">|</a
><a class="menubutton" id="pč">Prosti Čas</a
><a class="menubreak" id="5">|</a
><a class="menubutton" id="fo">Fotografije</a
><a class="menubreak" id="6">|</a>
</div>
</div><!--.t-col -->
</div><!--.t-row -->
<div class="t-row">
<div class="t-col t-col--top relative">
<div class="content-wrap">
<div class="content">
</div>
</div>
</div><!--.t-col -->
</div><!--.t-row -->
<div class="t-row">
<div class="t-col t-a-c t-col--bot t-col--compress">
<div class="kontakt">
<div class="kontaktlabelbox">
<div class="kontaktlabel">Kontakt</div>
</div>
</div>
</div><!--.t-col -->
</div><!--.t-row -->
</div><!--.t-layout -->
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Cannot set property 'innerHTML' of undefined, Contact form submit - javascript

I think that you cant write this line of code like this var error_message = document.getElementById("error_message").value; It should be var error_message = document.getElementById("error_message"); Because you dont need value of div you only need div.

Related

How to change image position

Whitespace randomly appeared in site

How to open en close menu using javascript?

Is there a way to fix this problem of a slideToggle() inside a slideToggle() inside a slideToggle() while using flex-grids?

resizing div height so it always fits the page

Categories

Resources