I'm developing a simple frontend page written in native HTML, CSS using Boostrap framework.
I'm getting some problem related with opening of a modal, after it is opened I'm no longer able to interact with any element of the page.
Here's the interested piece of code:
<!DOCTYPE html>
<head>
<title>3DFlix - Home</title>
<link href="images/Materiale Sito web/IconaSito.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header-navbar">
<div class="header-navbar-start">
<div class="header-navbar-logo">
<a href="index.html"><img width="228" height="58" class="logo"
src="images/Materiale Sito web/HEADER_Tavola disegno 1.png"></a>
</div>
</div>
<div class="header-navbar-middle">
<ul class="header-menu">
<li>Maker/Stampanti <! Fare pagina Maker/Stampanti> </li>
<li>Blog <! Fare pagina Blog> </li>
<li>Chi Siamo <! Fare pagina Chi Siamo> </li>
</ul>
</div>
<div class="header-navbar-end">
<div>
<button style="padding-right: 20px; background-color: transparent;
border-color: transparent; color: black; font-size: 20px;"
id="loginButton" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false"> Accedi
</button>
<div class="dropdown-menu">
<input type="text" name="username" placeholder="Username" required><br><br>
<input type="password" name="password" placeholder="Password" required><br><br>
<input type="submit" value="Login">
</div>
<button style="background-color: transparent;
border-color: transparent; color: black; font-size: 20px;"
id="siginButton" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#siginModal"
aria-expanded="false"> Registrati
</button>
<!-- Modal -->
<div class="modal fade" id="siginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Registrati</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
....
....
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
When "Registrati" button is pressed I'm not able to do anything more, such as filling forms, closing modal or clicking on buttons, I can just reload the page.
UPDATE:
This is the style.css file:
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}
a {text-decoration: none; color: black;}
a:hover {color: black;}
.header {
position: relative;
box-sizing: inherit;
z-index: 10;
padding: 1rem 1rem;
}
.header-navbar {
position: relative;
display: flex;
justify-content: space-between;
}
.header-navbar-start {
padding-right: 1rem;
margin-right: 0;
flex: 1;
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.header-navbar-logo {
box-sizing: inherit;
display: block;
}
.logo{
display: block;
max-width: 100%;
height: auto;
}
.header-navbar-middle {
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.header-menu {
justify-content: center;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
margin-block-start: 1rem;
margin-block-end: 1rem;
padding-inline-start: 40px;
gap: 70px;
font-size: 20px;
}
.header-navbar-end {
padding-left: 1 rem;
flex: 1;
position: relative;
z-index: 2;
justify-content: flex-end;
display: flex;
align-items: center;
font-size: 20px;
}
.background {
position: absolute;
right: 0; left: 0; top: 0;
overflow: hidden;
width: 100%; height: 800px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.wrapper {
justify-content: flex-start;
box-sizing: border-box;
display: flex;
width: 100%;
max-width: 1200px;
padding-left: 6vw;
padding-right: 6vw;
position: relative;
}
.wrapper-content {padding-top: 400px;}
.title {
font-size: 40px;
font-weight: normal;
pointer-events: none;
}
.subtitle {
font-size: 25px;
font-weight: normal;
pointer-events: none;
padding-bottom: 10px;
}
.wrapper-button {
padding: 10px 15px 10px 15px;
white-space: nowrap;
text-align: center;
display: inline-block;
cursor: pointer;
border: none;
position: relative;
align-items: flex-start;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18px;
background-color: #eef138b6;
border-radius: 20px;
justify-content: flex-start;
margin-left: 20px;
box-sizing: content-box;
}
.home-page {
background-color: #f4f4f4;
display: block;
margin-top: 9.8rem;
}
.section-one {
background-color: white;
width: 85%; height: 390px;
margin: auto; display: block; position: relative;
align-content: center;
padding: 4rem;
}
.section-columns {
margin-bottom: 2rem;
flex-wrap: nowrap;
display: flex;
box-sizing: border-box;
justify-content: center;
}
.section-one-content {
flex-basis: 0;
flex-grow: 1;
}
.section-two-content {
flex-basis: 0;
flex-grow: 1;
}
.section-three-content {
flex-basis: 0;
flex-grow: 1;
}
.section-one-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.section-two-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.section-three-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.one-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.two-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.three-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.section-h {
margin-bottom: 1rem;
font-weight: 400;
font-style: normal;
text-align: center;
}
.stamp-list {
padding-top: 2rem;
margin: auto;
display: block;
position: relative;
width: 85%;
align-content: center;
box-sizing: border-box;
}
.stamp-list-row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
justify-content: space-between;
}
.list-row-element {
margin-bottom: 2rem;
}
.element-block {
border-radius: 5px;
box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
background-color: white;
transition: transform 0.25s;
}
.element-header {
margin-bottom: 0;
position: relative;
}
.element-img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: block;
width: 100%;
height: auto;
}
.element-content {
margin-bottom: 0;
padding: 1.5rem;
position: relative;
z-index: 1;
}
.content-topbar {
border-radius: 5px;
box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
background-color: white;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin: -3.25rem 0 1.25rem;
padding: 0.625rem 1rem;
}
.vendor-info {
display: flex;
align-items: center;
}
.vendor-info-img {
flex: 0 0 2.1875rem;
margin-right: 0.75rem;
}
.vendor-img {
display: block;
width: 100%;
height: auto;
border-radius: 50%;
}
.vendor-name {
font-size: 0.875rem;
white-space: nowrap;
margin: 0;
word-wrap: break-word;
}
.content-middle {
margin: 0;
word-wrap: break-word;
}
.content-footer {
padding: 1rem 1.5rem;
border-top: 1px solid rgba(7, 36, 86, 0.075rem);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-attributes-primary {
margin-right: 1rem;
min-width: 0;
display: flex;
align-items: center;
}
.attribute-provincia {
font-size: 1.25rem;
min-width: 0;
word-wrap: break-word;
}
.footer-attributes-secondary {
display: flex;
align-items: center;
}
.attribute-message {
display: none;
width: 380px;
}
.section-newsletter {
background-color: rgb(204, 204, 204);
width: 85%; height: 320px;
display: block;
position: relative;
align-content: center;
margin: auto;
margin-top: 2rem;
}
.newsletter-container {
padding-top: 3rem;
padding-bottom: 3rem;
box-sizing: inherit;
padding-left: 3rem;
padding-right: 3rem;
}
.newsletter-columns {
margin-bottom: 0;
flex-wrap: nowrap;
display: flex;
box-sizing: border-box;
}
.newsletter-column1 {
flex-basis: 0;
flex-grow: 1;
}
.newsletter-column2 {
flex-basis: 0;
flex-grow: 1;
}
.column-h {
margin-bottom: 1rem;
margin-top: 0;
text-align: center;
font-size: 30px;
}
.column-p {
padding-top: 1rem;
text-align: center;
font-weight: 400;
}
.newsletter-form {
padding: 0.3rem 0.5rem;
border-radius: 5px;
border: thin;
}
.checkmark-form {
margin-right: 0.7rem;
width: 15px; height: 15px;
}
.button-form {
background-color: orange;
border-radius: 20px;
padding: 0.3rem 0.5rem;
width: 7rem;
border-style: groove;
}
.footer {
flex-wrap: nowrap;
padding: 1.5rem 0;
box-sizing: inherit;
display: flex;
position: relative;
padding-right: 2rem;
padding-left: 2rem;
width: 100%;
}
.footer-navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 70px;
width: 100%;
}
.footer-navbar-logo {
box-sizing: inherit;
display: block;
}
.footer-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 50px;
}
.social-icons {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 30px;
}
Aight now we know that it's a css problem.
First you should try to make your css file clearer... It's not easy to read a 500 lines css file so try to organize it by creating many css files that matches with a html component.
Exemple: a css file named header.css for your header, a css file named modal.css to custumize your modal, a css file named hero.css to custumize your hero section etc.
Second you should try to understand what is bootstrap doing by inspecting elements. You'll see that Bootstrap creates a div element with "modal-backdrop" class to create a "background" to your modal. The problem is you made something that changed the z-index and hide your modal.
So you can try to organize your css code and try to find the specific css line or just add this line to your css that will specify a correct z-index.
.modal-backdrop {
z-index: 1;
}
your code is working well here. I think you should show us these files content: "script.js" and "style.css"
Related
Hello my current issue is that when the page initially loads the navigation works and appears properly when the browser is enlarged, however when readjusting the browser window to a smaller size, toggling the nav menu icon works but however will either
a) readjust the layout in the larger web browser screen if the mobile menu was left open
or
b) navigation items will entirely disappear if the mobile menu was closed
when readjusting the browser window back to the larger screen size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chispot_Blog</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/a23422f356.js" crossorigin="anonymous"></script>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
// Trying to figure out toggling visibility issue with navigation when going back to large screen
// let navi = document.getElementById("nav-list");
// navi.addEventListener(onresize, toggle_visibility){
// display = "block";
// };
</script>
</head>
<!-- Hamburger Icon from font awesome -->
<!-- <i class="fas fa-bars"></i> -->
<body>
<header>
<nav>
<a href="index.html"><img class="logo" src="images/Component 1.png" alt="blog spot logo">
<ul id="nav-list">
<li class="nav-list-item">home</li>
<li class="nav-list-item">cafes</li>
<li class="nav-list-item">views</li>
<li class="nav-list-item">posts</li>
</ul>
</nav>
<div class="hide">
<i class="fas fa-bars fa-lg hamburger ham-toggle"></i>
</div>
</header>
I have tried to put display:block property under the appropriate class selector inside the larger media query. Which didn't populate any nav-list-items, I kept the display:flex property because thats how I want the nav-list-items to be formatted in the larger layout.
/* general */
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
img{
width: 100%;
}
a:hover, a:focus{
color: black;
}
a .icon:hover{
color: yellow;
}
.logo{
width: 12em;
margin-top: .5em;
margin-bottom: .5em;
}
.main-image{
height: 80%;
width: 95%;
object-fit: cover;
border: 1em;
border-color: #111111;
border-style: solid;
}
.featured-img{
height: 90%;
width: 100%;
object-fit: cover;
order: 1;
padding: 1em;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
.secondary-featured-article-img{
height: 75%;
width: 90%;
object-fit: cover;
order: 1;
padding: .75em;
background-color: lightgray;
}
/* Typography */
h1{
font-size: 8rem;
text-align: center;
}
h3{
font-size: 3rem;
margin-bottom: 0;
}
h4{
font-size: 2rem;
font-weight: 700;
margin-bottom: 0;
margin-top: 0;
}
h5{
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0;
}
.site-intro-body{
font-size: 1.15rem;
font-weight: lighter;
justify-content: center;
align-items: center;
order: 2;
}
.secondary-featured-article-body{
font-size: .9rem;
font-weight: lighter;
}
footer{
background-color: black;
color: white;
}
.side-page-post-title{
margin-top: .5em;
margin-bottom: 0;
padding-top: .25em;
padding-bottom: .25em;
background-color: black;
color: white;
}
.side-page-post-body{
margin-left: 6em;
margin-right: 6em;
margin-top: 2em;
margin-bottom: 2em;
}
/* Layout Mobile Screen*/
header{
background-color: #f8f8f8;
width: 100%;
margin-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 999;
}
header .hamburger{
margin-top: 1em;
margin-right: 1em;
align-content: flex-start;
/* visibility: hidden; HIDE WHEN IN MEDIA QUERY */
}
nav{
display: flex;
width: 100%;
flex-direction: column;
padding-left: 2em;
align-items: center;
justify-content: center;
}
#nav-list{
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: row;
list-style: none;
margin-bottom: 0;
display: none;
}
.nav-list-item{
margin: .1em;
font-size: 1.5rem;
font-weight: 700;
}
a{
text-decoration: none;
color: darkgray;
}
main{
display: flex;
flex-direction: column;
width: 100%;
}
.main-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 4em;
background-color: black;
color: white;
margin-top: 0;
padding-bottom: 3em;
padding-top: 4em;
}
.site-intro{
width: 90%;
padding: 0 5em;
}
.site-intro p{
column-count: 2;
}
.site-photo{
height: 100%;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
order: 1;
}
.article-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 5em;
margin-top: 0;
}
.featured-article{
width: 90%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
padding-right: 2em;
padding-top: 2.5em;
}
.featured-article-body{
width: 100%;
order: 2;
margin-top: 0;
text-align: center;
}
.secondary-featured-article-section{
width: 100%;
display: flex;
flex-direction: column;
}
.secondary-featured-article{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 2em;
padding-top: 2em;
margin-bottom: 0;
}
.secondary-featured-article-body{
width: 95%;
order: 2;
margin-top: 0;
text-align: center;
}
.secondary-featured-article-border{
border-bottom: .15em lightgray solid;
}
footer{
padding-top: 3em;
padding-bottom: 3em;
}
.footer-body{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1em;
}
.social-media-icons{
display: flex;
justify-content: center;
align-items: center;
}
.icon{
margin-right: .5em;
}
.hide{
height: 100%;
align-self: flex-start;
}
.side-page-post-body{
margin-top: 4em;
margin-bottom: 4em;
}
.article-listings{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.article-listing{
display: flex;
height: 45vh;
justify-content: space-around;
align-items: center;
margin-bottom: 2em;
background-color: whitesmoke;
padding-top: 2em;
padding-bottom: 2em;
}
.article-blog-description{
display: flex;
width: 50%;
height: 90%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
order: 2;
}
.article-listing-image{
order: 1;
width: 40%;
height: 90%;
object-fit: cover;
align-items: center;
}
.article-listing-title{
font-size: 1.75em;
margin-bottom: .5em;
}
.article-listing-body{
margin-top: 0;
font-size: .9em;
}
/* Layout Large Screen*/
#media screen and (min-width: 760px){
.main-image{
height: 75vh;
width: 90%;
object-fit: cover;
border: 1em;
border-color: #111111;
border-style: solid;
}
.featured-img{
height: 70vh;
width: 45%;
object-fit: cover;
order: 1;
padding: 1em;
background-color: lightgray;
}
.secondary-featured-article-img{
height: 40vh;
width: 45%;
object-fit: cover;
order: 1;
padding: .75em;
background-color: lightgray;
}
header{
background-color: #f8f8f8;
width:100%;
margin-bottom:0;
display:flex;
justify-content:space-between;
align-items:center;
position: fixed;
}
header .hamburger{
margin-top: auto;
margin-bottom: auto;
margin-right: 1em;
visibility: hidden; /*HIDE WHEN IN MEDIA QUERY */
}
nav{
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: 2em;
align-items: center;
}
#nav-list{
margin-top: 0;
display: flex;
flex-direction: row;
justify-content: row;
list-style: none;
margin-bottom: 0;
visibility: visible;
}
.nav-list-item{
margin: 1em;
font-size: 1.5rem;
font-weight: 700;
}
I'm currently using a simple script I had found on css-tricks but am open to alternative suggestions to resolve the problem of wanting to simply hide and show the nav menu without any issues affecting the other layout in the large media query.
You need set the display property of #nav-list back to flex when switching to larger viewport, since it's already overrided when mobile navigation is toggled.
#media screen and (min-width: 760px){
#nav-list {
display: flex!important;
}
}
I want to use a .js script in my html file, but unfortunately my script does not work the right way :(. I build a responsive Navbar for my website with a "hamburger Menu" on small screensizes.
I managed it to show the "Hamburger Menu" on a smaller screensize but my navbarlinks don't show up if I click on it. Here my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
here my css:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
and the important part I guess, my javascript:
const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
Sry for the lot of code, but I want to find the mistake with your help so I post all of my code. Thanks
it will be toggle-button not toggleButton in
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
console.log(toggleButton);
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
I've been working on this for almost the entire day. I'm almost there. Just need the finishing touches that I don't know how to implement.
My navigation should look like this:
This is how the desktop version should look:
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
As you can see, all page titles are horizontal and evenly spaced.
I now have this code:
body,
html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
#media only screen and (max-width: 500px) {
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
nav.active {
display: block;
}
}
.logo {
height: 8vh;
max-width: 80vw;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 4vh;
display: block;
object-fit: contain;
}
img {
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
button {
display: none;
}
#media (max-width: 500px) {
nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active {
display: inline;
}
button {
display: block;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<button>☰</button>
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
</div>
</div>
</div>
</header>
<script>
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
</script>
The button now appears and is functional on mobile.
Fixes:
1) Show the page names horizontally on desktop.
2) Allow the button to toggle between ☰ and ✘
May be able to implement using: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> just now sure how to though.
3) Format the drop-down so that the text is within its own box on top of the page and right aligned.
I've reached a dead end. I'm just not sure how to fully make this work. Any suggestions may help. You can also edit my code as an answer to get it fully functional if possible.
Thanks in advance :)
Update 1
menu = document.querySelector('nav');
document.querySelector('i')
.addEventListener('click', e => {
menu.classList.toggle('active')
document.querySelector('header i').classList.toggle('fa-bars')
document.querySelector('header i').classList.toggle('fa-times')
})
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
display: flex;
justify-content: space-between;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 2vh;
margin-bottom: auto;
color: #000000;
padding-left: 2vh;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
nav{
display: flex;
width: 100%;
justify-content: space-evenly;
margin-right: auto;
text-align: right;
}
nav a{
display:block;
padding: 10px;
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: left;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
i{
display: none !important;
}
#media (max-width: 500px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
font-family: 'Roboto', serif;
font-size: 2.5vw;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
nav.active{
display: block;
}
i{
display: block!important;
margin:5px;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</header>
I'm most of the way there now. I've got the switching icons and most of the functionality. There's just a slight issue with text size when resizing the browser window.
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: left;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
button {
display: none;
}
nav {
display: flex;
flex: 1;
justify-content: space-evenly;
}
#media (max-width: 500px) {
nav {
position: relative;
text-align: left;
padding:10px;
display: none;
}
nav.active {
display: inline;
}
button {
display: block;
position: absolute;
top: -27px;
right: 10px;
width: 25px;
height: 25px;
}
button:before {
font-family: FontAwesome;
content: "\f0c9";
}
.header-container {
flex-flow: row wrap;
}
.logo-container, .navigation-container {
width: 100%;
}
.navigation-container {
justify-content: flex-end;
padding-right: 10px;
position:relative;
}
.navigation-container.active {
}
.navigation-container.active button:before {
font-family: FontAwesome;
content: "\f00d";
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<button></button>
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
</div>
</div>
</div>
<script>
let container = document.querySelector('.navigation-container');
let menu = document.querySelector('nav');
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active');
container.classList.toggle('active')
})
</script>
</body>
</html>
https://jsfiddle.net/Sampath_Madhuranga/1cdu745t/39/
This works for you. I have added new styles for mobile and updated layout.
Try my code. Thanks.
So it looks like my javascript onclick events are only functioning with ID's but when i call the class "listButton" only the first list item (All Rewards) closes the dropdown div.
When i click on any other list item (Food Rewards, Beverage Rewards, Holiday Rewards, Classes Rewards, TBA) it does not close my dropdown div.
I'm unsure why this is so. Is there another method to complete this? I must use vanilla JS.
var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");
document.getElementById("dropdownButton").onclick = function() {
dropdown.classList.add("open");
overlay2.classList.add("open");
};
function removeOpenRewards() {
dropdown.classList.remove("open");
overlay2.classList.remove("open");
};
for (i = 0; i < listButton.length; i++) {
listButton[i].addEventListener("click", removeOpenRewards);
}
overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);
#container #activeRewards #mobileDropdown #overlay2 {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#container #activeRewards #mobileDropdown #overlay2.open {
display: block;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont {
width: 100%;
height: 59px;
margin: 15px 0 20px 0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
background-color: #F0F0F0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #C7C7C7;
position: absolute;
right: 40px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown {
width: 100%;
display: none;
}
#container #activeRewards #mobileDropdown #rewardsDropdown.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 1000;
background-color: #FFFFFF;
left: 0;
bottom: 0;
padding-bottom: 30px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close {
color: #D63A5E;
background-color: #FFFFFF;
border-radius: 20px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
font-size: 20px;
position: absolute;
left: 20px;
top: -45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 5px 5px 7px 6px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-color: #AF2B49;
}
#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
color: #505050;
text-align: center;
font-size: 18px;
font-weight: bolder;
margin: 30px 0;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
height: 360px;
overflow: scroll;
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
background-color: transparent;
width: 5px;
margin-left: 5px;
padding-left: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
background-color: #E0E0E0;
border-radius: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
width: 95%;
height: 59px;
margin-top: 5px;
padding-right: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
<div id="container">
<div id="activeRewards">
<div id="mobileDropdown">
<div id="dropdownButtonCont">
<button id="dropdownButton">All Rewards
<span>(5)</span>
</button>
</div>
<div id="overlay2"></div>
<div id="rewardsDropdown">
<span id="close">×</span>
<h4>Reward Categories</h4>
<div id="dropdownList">
<div>
<button class="listButton">All Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Food Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Beverage Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Holiday Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Classes Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">TBA
<span>(5)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So replace:
document.querySelector(".listButton").addEventListener("click", removeOpenRewards);
with:
var listButtons= document.querySelectorAll(".listbutton");
listButtons.forEach(function(listButton) {
listButton.addEventListener("click", removeOpenRewards);
});
I'm trying to do a project which consists on some buttons and when you click them a value is pushed into an array (custo). I need to add all the values of that array and store them in a variable, which I can't do properly… I tried joining with (" * "). after having that value in a variable I would need to multiply it by the value the user would give on the input……… furthermore, the final result would be displayed when the button Calcular is clicked, and when the reset button is clicked, the div with the result (resultado), would be cleaned and the array reset. Here is the code for what I got:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner-cont">
<div id="resultado"></div>
<div class="bloco-estilo" id="penteado">
<p>Penteado</p>
</div>
<div class="bloco-estilo" id="pintar">
<p>Pintar</p>
</div>
<div class="bloco-estilo" id="pintar-opt">
<ul class="cores">
<li id="cor_verm">Vermelho</li>
<li id="cor_loiro">Loiro</li>
<li id="cor_cast" cast>Castanho</li>
</ul>
</div>
<div class="bloco-estilo" id="acabamento">
<p>Acabamento</p>
</div>
<div class="lucro">
<div class="lucro-dir">
<p>Introduza o valor percentual de lucro</p>
<input type="text" maxlength="2">
<p>%</p>
</div>
<div class="lucro-esq">
<button id="reset">Reset</button>
<button id="calc">Calcular</button>
</div>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="function.js"></script>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
ul {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
ul li {
display: inline;
padding: 0 40px;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner-cont {
width: 50%;
height: 80%;
background-color: #f2ce9e;
position: relative;
}
#resultado {
width: 100%;
height: 100px;
background-color: snow;
box-sizing: border-box;
border: 2px dashed #e39835;
}
.bloco-estilo {
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20pt;
color: navy;
font-family: Arial;
margin-bottom: 10px;
box-sizing: border-box;
cursor: pointer;
transition: all 500ms ease;
}
ul li:hover {
background-color: #8b1555;
color: white;
}
.bloco-estilo:hover {
background-color: deeppink;
color: white;
}
.lucro {
width: 100%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.lucro-dir {
width: 50%;
height: 100px;
font-size: 16pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}
.lucro-esq {
width: 50%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}
#reset {
width: 50%;
height: 50%;
background-color: red;
border: none;
color: white;
font-size: 15pt;
float: left;
}
#calc {
width: 50%;
height: 50%;
background-color: green;
border: none;
color: white;
font-size: 15pt;
float: left;
}
input {
width: 40px;
height: 30px;
margin: 0 10px;
font-size: 12pt;
text-align: center;
font-weight: bolder;
}
#pintar-opt {
display: none;
}
The JS (i'm also using jquery):
$('#pintar').click(function () {
$('#pintar-opt').slideToggle(0);
});
var p1, p2, p2_1, p2_2, p2_3, a;
p1 = 10; //penteado
p2 = 0; // pintar
p2_1 = 3; //opt cor 1
p2_2 = 5; //opt cor 2
p2_3 = 7; //opt cor 3
a = 6; //acabamento
var custo = [];
$('#penteado').click(function () {
custo.push(p1);
});
$('#pintar').click(function () {
custo.push(p2);
});
$('#cor_verm').click(function () {
custo.push(p2_1);
});
$('#cor_loiro').click(function () {
custo.push(p2_2);
});
$('#cor_cast').click(function () {
custo.push(p2_3);
});
$('#acabamento').click(function () {
custo.push(p2_3);
});
var preco = custo.join(" * ");
Very much appreciated to anyone who tries to help me! also, it would be awesome if you could see what's wrong with the design, as it is not properly responsive…
This snippet performs the calculations. By cycling through the array elements using $.each and adding each one to a variable num (commented within the script) we can perform the addition. I've commented out the element joining line as I'm not sure why this is necessary.
n.b. The same outcome could be achieved without an array by simply incrementing and then multiplying the num variable, so it is assumed you'll be performing other tasks with the array elsewhere.
$('#pintar').click(function() {
$('#pintar-opt').slideToggle(0);
});
var p1 = 10, //penteado
p2 = 0, // pintar
p2_1 = 3, //opt cor 1
p2_2 = 5, //opt cor 2
p2_3 = 7, //opt cor 3
a = 6; //acabamento
var custo = [];
function totals() {
var num = 0, // define num
percen = parseFloat($('#perc').val()) || 0, // get the input number or enter 0 if no user input
percen = percen * 0.01, //convert the percentage
sum = 0; // the total
$.each(custo, function() { // cycle through custo
num += parseFloat(this); // increase num by element value
});
sum = (num * percen).toFixed(2); // calculate and round to two decimal places
return sum; // return aumrray sum times percentage
}
$('#penteado').click(function() {
custo.push(p1);
});
$('#pintar').click(function() {
custo.push(p2);
});
$('#cor_verm').click(function() {
custo.push(p2_1);
});
$('#cor_loiro').click(function() {
custo.push(p2_2);
});
$('#cor_cast').click(function() {
custo.push(p2_3);
});
$('#acabamento').click(function() {
custo.push(p2_3);
});
$('#calc').click(function() {
$('#resultado').text(totals()); // call on the totals() function
});
$('#reset').click(function() {
custo = []; // reset custo and num
$('#resultado').text(0);
});
// var preco = custo.join(" * "); <- not sure why you're joining them here?
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
ul {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
ul li {
display: inline;
padding: 0 40px;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner-cont {
width: 50%;
height: 80%;
background-color: #f2ce9e;
position: relative;
}
#resultado {
width: 100%;
height: 100px;
background-color: snow;
box-sizing: border-box;
border: 2px dashed #e39835;
}
.bloco-estilo {
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20pt;
color: navy;
font-family: Arial;
margin-bottom: 10px;
box-sizing: border-box;
cursor: pointer;
transition: all 500ms ease;
}
ul li:hover {
background-color: #8b1555;
color: white;
}
.bloco-estilo:hover {
background-color: deeppink;
color: white;
}
.lucro {
width: 100%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.lucro-dir {
width: 50%;
height: 100px;
font-size: 16pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}
.lucro-esq {
width: 50%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}
#reset {
width: 50%;
height: 50%;
background-color: red;
border: none;
color: white;
font-size: 15pt;
float: left;
}
#calc {
width: 50%;
height: 50%;
background-color: green;
border: none;
color: white;
font-size: 15pt;
float: left;
}
input {
width: 40px;
height: 30px;
margin: 0 10px;
font-size: 12pt;
text-align: center;
font-weight: bolder;
}
#pintar-opt {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner-cont">
<div id="resultado"></div>
<div class="bloco-estilo" id="penteado">
<p>Penteado</p>
</div>
<div class="bloco-estilo" id="pintar">
<p>Pintar</p>
</div>
<div class="bloco-estilo" id="pintar-opt">
<ul class="cores">
<li id="cor_verm">Vermelho</li>
<li id="cor_loiro">Loiro</li>
<li id="cor_cast" cast>Castanho</li>
</ul>
</div>
<div class="bloco-estilo" id="acabamento">
<p>Acabamento</p>
</div>
<div class="lucro">
<div class="lucro-dir">
<p>Introduza o valor percentual de lucro</p>
<input id="perc" type="text" maxlength="2">
<p>%</p>
</div>
<div class="lucro-esq">
<button id="reset">Reset</button>
<button id="calc">Calcular</button>
</div>
</div>
</div>
</div>
</body>
</html>