I have 2 div elements, and I want to add something on the Div 2 that when I Click on that Div, it will Display Div 1, so both DIV's will be visible when clicking Div 2!
Div 2 should remain visible all the time, but when I click on DIV 2, it should display Div 1!
I want a JS script!
.box1 {
display: none;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid #ea1538;
width: 200px;
max-height: 300px;
overflow: scroll;
margin-left: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 10px 10px;
box-sizing: border-box;
box-shadow: 0px 0px 10px gainsboro;
}
.box1::-webkit-scrollbar {
display: none;
}
.box1:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover1 {
width: 100%;
height: 40%;
}
.box2 {
display: inline-block;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid #ea1538;
width: 200px;
max-height: 300px;
overflow: scroll;
margin-left: 1%;
margin-top: 40px;
transition: ease 0.5s;
padding: 10px 10px;
box-sizing: border-box;
box-shadow: 0px 0px 10px gainsboro;
}
.box2::-webkit-scrollbar {
display: none;
}
.box2:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover2 {
width: 100%;
height: 40%;
}
<div class="box1">
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" />
<h3 class="desc1">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et iste ipsum harum beatae dolor fugit repudiandae a quaerat doloremque pariatur, suscipit molestias ipsa minus. Non explicabo quam quasi illo accusamus aliquid, reiciendis autem? Quas odio hic
pariatur necessitatibus nobis nisi fugiat ab voluptate. Perferendis maiores quisquam cumque quod aspernatur ipsa?
</h3>
</div>
<div class="box2">
<button type="button" id="box2btn" onclick="href='window.location.https://www.facebook.com'">
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover2" />
<h3>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi
natus quidem perferendis architecto sapiente, eius, praesentium, odio
illo provident quos nostrum quaerat! Placeat saepe, blanditiis id
assumenda ab autem in unde maxime alias, obcaecati distinctio expedita
veritatis deserunt atque exercitationem quasi dolorum eum quas. Voluptas
consequatur nisi sint porro quos?
</h3>
</div>
Here we go https://jsfiddle.net/byr0kqL5/
The simple function
function addNewDiv() {
const box1 = document.getElementById("box1-content") //find element with id `box1-content`
box1.classList.remove("display-none"); //make box 1 visible by `display-none` removal
}
but you need to add this style
.display-none {
display: none;
}
Your box 1 will be like this
<div class="box1 display-none" id="box1-content"></div>
Lastly, your box 2 needs to have onclick event
<div class="box2" onclick="addNewDiv()"></div>
Firstly add this attribute to Div2 :
onclick="showDiv()"
and add the id and class to Div1
id="div1"
class="hide"
JavaScript :
function showDiv() {
div1=document.getElementById("div1");
div1.classList.remove("hide");
}
CSS:
.hide{
display: none;
}
Related
I have pieced together a portfolio website using several tutorials and I can't figure out why the hamburger menu is not visible as it downsizes. It works fine when I take out the main content in the HTML with the sections, but if there is any main content then the burger menu does not appear.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Portfolio</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<main>
<div class="about-area" id="about">
<div class="text-part">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="portfolio-area" id="portfolio">
<div class="text-part">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="contact-area" id="contact">
<div class="text-part">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>
CSS:
* {
margin: 0px; /* Remove unwanted inherent sizing */
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav {
display: flex; /*icons are next to each other */
justify-content: space-around; /* */
align-items: center; /* Center items vertically */
min-height: 8vh;
background-color: #0e9763;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex; /* spreads out text */
justify-content: space-around; /* using flex adds more space around the items using width */
width: 30%;
}
.nav-links li {
list-style: none; /* Removes bullet points */
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none; /* Removes default link colors */
letter-spacing: 3px;
font-size: 14px;
}
.burger {
display: none; /* Hides the burger menu */
cursor: pointer;
}
.burger div { /*the details of the burger menu bars design */
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
/* Main Area Content */
.about-area, .portfolio-area, .contact-area {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 700px;
}
.text-part {
width: 65%;
height: 80%;
}
h1 {
font-size: 50px;
font-family: 'Audiowide', cursive;
}
p {
font-size: 24px;
line-height: 50px;
}
.about-area {
background: #fefefe;
}
.portfolio-area {
background: #0e9763;
color: #fff;
}
.contact-area {
background: #fefefe;
}
html {
scroll-behavior: smooth;
}
a:hover {
color: #000;
}
/* Quick fix breakpoint between max size and hamburger menu trigger */
#media screen and (max-width:1024px){
.nav-links {
width: 60%;
}
}
#media screen and (max-width:768px){
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0e9763;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /* Moves content off screen */
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%); /* When button is clicked the nav gets the transform */
}
/* Nav animation */
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JS:
const navSlide = () => { //navSlide is = to an anonymous function
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',() => { //on click run a function
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation){
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
//Invoke function
navSlide();
Here is a link to the codepen:
https://codepen.io/justadirtgrub/pen/NWGJrde
You need to add z-index css property to class .nav-active to show up in front of main content
const navSlide = () => {
//navSlide is = to an anonymous function
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
//on click run a function
//Toggle Nav
nav.classList.toggle("nav-active");
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
};
//Invoke function
navSlide();
* {
margin: 0px; /* Remove unwanted inherent sizing */
padding: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex; /*icons are next to each other */
justify-content: space-around; /* */
align-items: center; /* Center items vertically */
min-height: 8vh;
background-color: #0e9763;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex; /* spreads out text */
justify-content: space-around; /* using flex adds more space around the items using width */
width: 30%;
}
.nav-links li {
list-style: none; /* Removes bullet points */
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none; /* Removes default link colors */
letter-spacing: 3px;
font-size: 14px;
}
.burger {
display: none; /* Hides the burger menu */
cursor: pointer;
}
.burger div {
/*the details of the burger menu bars design */
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
/* Main Area Content */
.about-area,
.portfolio-area,
.contact-area {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 700px;
}
.text-part {
width: 65%;
height: 80%;
}
h1 {
font-size: 50px;
font-family: "Audiowide", cursive;
}
p {
font-size: 24px;
line-height: 50px;
}
.about-area {
background: #fefefe;
}
.portfolio-area {
background: #0e9763;
color: #fff;
}
.contact-area {
background: #fefefe;
}
html {
scroll-behavior: smooth;
}
a:hover {
color: #000;
}
/* Quick fix breakpoint between max size and hamburger menu trigger */
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0e9763;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /* Moves content off screen */
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
z-index: 100; /* When button is clicked the nav gets the transform */
}
/* Nav animation */
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Portfolio</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<main>
<div class="about-area" id="about">
<div class="text-part">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="portfolio-area" id="portfolio">
<div class="text-part">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="contact-area" id="contact">
<div class="text-part">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
</main>
</body>
</html>
I've got two different pricing cards:
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to AM</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited TMs</li>
</ul>
</div>
When clicked, each should bring up a different modal:
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
All of the ID's are unique. With this JS I am able to bring up the first modal but not the second:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
I added unique IDs for the second card and modal, but when I pull them into the JS by adding this:
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
I am not getting the same effect.
Here is the relevant CSS:Added relevant CSS
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
there was some error on your codepen, double body open and close tag, the second modal was inside the first one's container, Ids were duplicated and on the JS side the listeners for the second modal were missing, try this:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4efed;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
cursor: crosshair;
}
.card {
background-color: #fff;
border-radius: 10px;
padding: 60px 30px;
text-align: center;
max-width: 450px;
min-width: 275px;
margin: 1em;
transition: .2s ease all;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 10px 20px rgba(0,0,0,.3);
cursor: pointer;
}
.card1 {
background-image: linear-gradient(to bottom right, #41464d, #2d3137);
color: white;
}
.card2 {
background-image: linear-gradient(to bottom right, #dbb898, #b98351);
color: white;
}
.card .title {
font-size: .8em;
}
.card1 .title{
font-weight: bold;
background-color: #444950;
border-radius: 10px;
padding: 12px 10px;
}
.card2 .title{
font-weight: bold;
background-color: white;
border-radius: 10px;
padding: 12px 10px;
color: #2d3137;
}
h1 {
margin: 30px 0 30px 0;
}
h4 {
font-weight: 100;
font-size: .75em;
}
h2 {
margin: 25px;
font-size: .8em;
}
ul {
font-size: .75em;
line-height: 1.75em;
list-style: none;
}
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
.modal {
background-color: white;
border-radius: 10px;
width: 800px;
max-width: 100%;
padding: 30px 50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-align: center;
}
.modal h1 {
margin: .5em;
}
.modal p {
font-size: 14px;
opacity: 0.7;
}
.modal-container button {
background-color: #444950;
color: white;
border: 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
font-size: 14px;
padding: 10px 25px;
margin: 15px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pricing Cards</title>
</head>
<body>
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to Asset-Map</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited Target-Maps</li>
</ul>
</div>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
</div>
</body>
</html>
Im doing a web project to learn js,html and css. This web page has a front page (which i couldnt post here because it only allows 1 html file) and one section called "private events" which has its own html file but it shares the same css file with the entire web page. When i resize the page, the top menu should stay hidden and a hamburguer button should appear with the menu displayed properly for smaller windows. It does work on the fron page, but on this sheet doesnt work.
It says:
"Uncaught TypeError: Cannot read property 'addEventListener' of null
at main.js:35"
I'm using the same classes and IDs, it doesnt seem to be a spelling error, i dont know what it could be.
To make it clear, when i open the page in a smaller window, the menu dissapears (as it should), the hamburguer button appears (as it should), but when i click on it, it doesnt transform to the X shape that i want, and the menu doesnt appear either.
let sliderImages=document.querySelectorAll(".slide");
let flechaIzq= document.querySelector("#flecha-izq");
let flechaDer= document.querySelector("#flecha-der");
let current=0;
//resetea todas las imagenes
function reset(){
for(let i=0; i < sliderImages.length;i++){
sliderImages[i].style.display='none';
}
}
//inicia el slider
function startSlide(){
reset();
sliderImages[current].style.display="block";
if(current < sliderImages.length - 1)
{
current++;
}else{
current = 0;
}
setTimeout("startSlide()",5000);
}
//mostrar anterior
function slideLeft(){
reset();
sliderImages[current -1].style.display="block";
current--;
}
//flecha izq al clickear
flechaIzq.addEventListener('click', function(){
if (current === 0){
current=sliderImages.length;
}
slideLeft();
})
//mostrar siguiente
function slideRight(){
reset();
sliderImages[current+1].style.display="block";
current++;
}
//flecha der al clickear
flechaDer.addEventListener('click', function(){
if (current === sliderImages.length -1){
current=- 1;
}
slideRight();
});
startSlide();
/* this is the code for the hamburguer button */
var header = document.querySelector(".btn-header-container");
var btn_header= document.querySelectorAll(".btn_header");
function myFunction(x) {
header.classList.toggle("btn-header-toggle");
for (let i = 0; i < btn_header.length; i++) {
btn_header[i].classList.toggle("btn_toggle");
}
x.classList.toggle("change");
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var botones = document.getElementsByClassName("btn_barra")
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
for (let k = 0; k < botones.length; k++) {
botones[k].addEventListener('click', function() {
switch (k) {
case 0:
document.getElementById("titulo_0").innerHTML = "Desayuno & Merienda";
document.getElementById("titulo_1").innerHTML = "Licuados";
document.getElementById("titulo_2").innerHTML = "Facturas";
document.getElementById("titulo_3").innerHTML = "Tostados";
document.getElementById("titulo_4").innerHTML = "Pancakes";
modal.style.display = "block";
break;
case 1:
document.getElementById("titulo_0").innerHTML = "Almuerzo & Cena";
document.getElementById("titulo_1").innerHTML = "Entradas";
document.getElementById("titulo_2").innerHTML = "Carnes";
document.getElementById("titulo_3").innerHTML = "Pastas";
document.getElementById("titulo_4").innerHTML = "Menú Vegano";
modal.style.display = "block";
break;
case 2:
document.getElementById("titulo_0").innerHTML = "Postres";
document.getElementById("titulo_1").innerHTML = "Helados";
document.getElementById("titulo_2").innerHTML = "Tortas";
document.getElementById("titulo_3").innerHTML = "Copas Heladas";
document.getElementById("titulo_4").innerHTML = "Especiales";
modal.style.display = "block";
break;
}
})
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.top_bar{
overflow: hidden; /* para que los botones no salgan del container al usar float*/
}
body{
background-image: linear-gradient(#FEFFFE, floralwhite);
}
a {
text-decoration: none;
}
.logo{
height:10%;
width:10%;
display: block;
margin-left: auto;
margin-right: auto;
padding:10px;
margin-top:10px;
}
.btn_header{
color:#931621;
background: transparent;
float:right;
padding:10px;
margin-right:5px;
bottom:80px;
font-family: 'Ubuntu', sans-serif;
font-size:13px;
text-transform: uppercase;
border:none;
opacity:80%;
position:relative; /* para mover a los botones */
border-right: 2px ridge #FF1B1C;
}
.btn_header:hover{
color: black;
font-size:15px;
transition-duration: 0.5s;
cursor:pointer;
}
/* PRESENTACION (SLIDER)*/
#slider, .wrap, .slide-contenido{
margin:0;
padding:0;
width:100%;
height:60vh;
overflow-x:hidden; /* saca las barras horizontales*/
}
.wrap{
position: relative;
}
.slide{
background-size: cover;
background-position:center;
background-repeat:no-repeat;
}
.slide1{background-image:url(/imagenes/slider/img5.jpg)}
.slide2{background-image:url(/imagenes/slider/img2.jpg)}
.slide3{background-image:url(/imagenes/slider/img3.jpg)}
.slide4{background-image:url(/imagenes/slider/img4.jpg)}
.slide5{background-image:url(/imagenes/slider/img1.jpg)}
.slide-contenido{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
.reservas{
font-size:20px;
padding:15px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
background-color: #FFECCC;
border:none;
opacity:80%;
}
.reservas:hover{
cursor:pointer;
border: 2px solid #A4303F;
transition-duration: 0.5s;
}
.flecha{
cursor:pointer;
position:absolute;
top:60%;
margin-top:-50px;
width:0;
height:0;
border-style:solid;
opacity:70%;
}
#flecha-izq{
border-width: 30px 40px 30px 0;
left:0;
margin-left:30px;
border-color: transparent #FFF8F0 transparent transparent;
}
#flecha-izq:hover{
border-color: transparent #616163 transparent transparent;
transition-duration: 0.3s;
}
#flecha-der{
border-width: 30px 0px 30px 40px;
right:0;
margin-right:30px;
border-color: transparent transparent transparent #FFF8F0;
}
#flecha-der:hover{
border-color: transparent transparent transparent #616163;
transition-duration: 0.3s;
}
.descripcion h1{
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0em;
line-height: 1em;
font-size: 32px;
padding:10px;
}
.descripcion {
color: #363732;
text-align: center;
margin:80px 180px 5px 180px;
font-size:17px;
}
.barra{
text-align: center;
}
.btn_barra{
letter-spacing: 0.3em;
font-family: 'Playfair Display', serif;
font-weight: 700;
padding:20px 40px;
text-transform: uppercase;
border:2px solid black;
position:relative;
margin:30px;
cursor:pointer;
background-color:#EEF8FF;
}
.btn_barra:hover{
background-color: #08090A;
color:white;
transition-duration: 0.5s;
}
.informacion{
display:flex;
justify-content:space-evenly;
}
.flex-item{
text-align:center;
font-family: 'Montserrat', sans-serif;
}
.flex-item p{
line-height: 0.5em;
color:#363732;
}
.flex-item h4{
color: #C14953;
font-weight: 1000;
border-bottom:1px solid black;
}
.grid-container{
display:grid;
grid-template-columns: repeat(auto-fit,minmax(240px,550px));/*3fr 3fr*/
grid-template-rows: repeat(3,600px);
grid-column-gap: 3em;
grid-row-gap: 3em;
justify-content:center; /* para que quede todo centrado*/
margin-top:50px;
}
.item-a{
background-image: url(imagenes/grid/burguer.jpg);
background-size:cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
/*grid-column:1/1;
grid-row: 1/1;*/
text-align: center;
}
.item-a:hover{
cursor:pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity:70%;
transition-duration: 0.3s;
}
.item-b{
background-image: url(imagenes/grid/cerveza.jpg);
background-size:cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
/*grid-column:1/1;
grid-row: 2/2;*/
text-align: center;
}
.item-b:hover{
cursor:pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity:70%;
}
.item-c{
background-image: url(imagenes/grid/pancake.jpg);
background-size:cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
/*grid-column:1/1;
grid-row: 3/3;*/
text-align: center;
}
.item-c:hover{
cursor:pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity:70%;
}
.titulo-img{
font-size: 10vh;
margin-top:250px;
color:#FEFFEA;
font-family: 'Monoton', cursive;
}
.item-a-text{
background-color:#FCFC62;
/*grid-column: 2/2;
grid-row:1/1;*/
text-align:center;
}
.item-b-text{
background-color:#F06543;
/*grid-column: 2/2;
grid-row:2/2;*/
text-align:center;
}
.item-c-text{
background-color:#8FF7A7;
/*grid-column: 2/2;
grid-row:3/3;*/
text-align:center;
}
.titulo-grid{
margin-top:100px;
font-size:60px;
font-family: 'Amatic SC', cursive;
}
.parrafo-grid{
margin-left:30px;
margin-right:30px;
font-family: 'Kalam', cursive;
font-size:20px;
}
.btn-grid{
margin-top:20px;
padding:30px;
font-family: 'Montserrat', sans-serif;
font-size:15px;
color:white;
background-color: #F21B3F;
border:none;
cursor:pointer;
}
.btn-grid:hover{
font-size:18px;
transition-duration: 0.3s;
}
.grid-feed{
display:grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 500px;
margin:50px 50px 50px 50px;
grid-gap:4em;
overflow:hidden;
}
#mapa{
grid-column: 1/1;
grid-row:1/1;
}
#instagram-feed{
width:50%;
height:50%;
grid-column:2/2;
grid-row:1/1;
}
.footer{
margin-top:150px;
text-align:center;
color: #596157;
font-family: 'Montserrat', sans-serif;
}
.footer span{
color:#E3655B;
font-weight:700;
}
.footer div p:nth-child(3){
font-weight: bold;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
position: relative;
background-color: #22223B;
color:white;
opacity: 90%;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
}
/* Modal Header */
.modal-header {
padding: 5px 16px;
color: white;
border-bottom: 2px solid lightblue;
letter-spacing: 0.3em;
font-family: 'Playfair Display', serif;
font-weight: 400;
text-transform: uppercase;
background-color:black;
opacity:70%;
}
/* Modal Body */
.modal-body {
padding:20px;
column-count: 2;
column-gap: 40px;
column-rule: 1px solid lightblue;
}
.modal-body div{
padding:20px 50px;
}
.modal-body h4{
font-family: 'Montserrat', sans-serif;
letter-spacing:0.3em;
text-transform:uppercase;
font-weight: lighter;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: lightblue;
text-decoration: none;
cursor: pointer;
}
/* Add Animation */
#keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
/*CSS DE PAGINA DE EVENTOS PRIVADOS*/
#body_eventos{
background-image: url(imagenes/fondo_evento.jpg);
background-repeat: repeat;
background-size:cover;
}
.grid-eventos{
display:grid;
grid-template-columns: repeat(auto-fit,minmax(240px,550px));
grid-template-rows: repeat(3,600px);
grid-column-gap: 3em;
grid-row-gap: 3em;
justify-content:center; /* para que quede todo centrado*/
margin-top:50px;
}
#foto-ev-1{
background-image: url(imagenes/eventos/img1.jpg);
border-radius:400px;
}
#foto-ev-2{
background-image: url(imagenes/eventos/img2.jpg);
border-radius:400px;
}
#foto-ev-3{
background-image: url(imagenes/eventos/img3.jpg);
border-radius:400px;
}
.foto-ev{
background-size:cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
text-align: center;
}
.info-ev{
text-align:center;
margin-top:80px;
font-size:2.7vh;
font-family: 'Montserrat', sans-serif;
}
.info-ev h2{
font-family: 'Playfair Display', serif;
letter-spacing:0.2em;
}
/* de acuerdo a la pantalla*/
#media only screen and (max-width: 1200px) {
.logo{
height:20%;
width:20%;
}
.btn-container {
display: inline-block;
cursor: pointer;
position:absolute;
margin-top:60px;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.btn-header-container{
display:none;
margin-top:100px;
}
.btn_header{
display:none;
padding:10px;
background-color:floralwhite;
color:#931621;
font-family: 'Ubuntu', sans-serif;
font-size:13px;
text-transform: uppercase;
border:none;
opacity:80%;
}
.btn-header-toggle{
display:grid;
margin-top:100px;
}
.btn_toggle{
display:block;
padding:10px;
background-color:floralwhite;
color:#931621;
font-family: 'Ubuntu', sans-serif;
font-size:13px;
text-transform: uppercase;
border:none;
opacity:80%;
text-align:center;
border-bottom:1px ridge #931621;
}
.descripcion h1{
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0em;
line-height: 1em;
font-size: 32px;
padding:5px;
}
.descripcion {
color: #363732;
text-align: center;
margin:80px 5px 5px 5px;
font-size:17px;
}
.informacion{
display:flex;
justify-content:space-evenly;
flex-direction: column;
}
.grid-container{
grid-template-rows: repeat(6,700px);
}
.titulo-img{
font-size: 6vh;
}
.grid-feed{
display:grid;
grid-template-columns: 2fr;
grid-template-rows: 500px 500px;
margin:50px 50px 50px 50px;
grid-gap:4em;
overflow:hidden;
}
#mapa{
grid-column: 1/1;
grid-row:1/1;
}
#instagram-feed{
width:50%;
height:50%;
grid-column:1/1;
grid-row:2/2;
}
}
#media only screen and (max-width: 800px) {
.titulo-img{
font-size: 8vh;
}
.grid-eventos{
grid-template-rows: repeat(6,600px);
}
}
#media only screen and (max-width: 375px) {
.titulo-img{
font-size: 7vh;
}
.grid-container{
grid-template-rows: repeat(6,800px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Kalam|Monoton|Montserrat|Playfair+Display|Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
<title>Eventos Privados</title>
</head>
<body id="body-eventos">
<header class="top_bar">
<div class="btn-container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src="imagenes/logo.png" class="logo">
<div class="btn-header-container">
<button id="delivery" class="btn_header">Delivery</button>
<button id="btn_trabajo" class="btn_header">Trabajá con nosotros</button>
<button id="btn_contacto" class="btn_header">Contacto</button>
Home
</div>
</header>
<div class="grid-eventos">
<div id="foto-ev-1" class="foto-ev"> </div>
<div class="info-ev">
<h2>Tu comodidad nos importa</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat omnis hic magnam excepturi ducimus ut deserunt at itaque amet ullam cum saepe aperiam, consequatur quidem porro eaque ex. Accusantium consectetur ipsum, hic beatae nisi itaque, aperiam est ratione exercitationem veniam delectus quae earum amet dignissimos repellendus tempore sequi alias omnis magnam quibusdam error odio sint. Sint nesciunt expedita delectus vitae porro voluptatem non, inventore enim, quaerat nihil sequi? Perspiciatis maxime quasi ex iure repudiandae amet nemo tempora est corporis iusto, optio suscipit natus fugiat voluptas velit hic sint voluptatem delectus necessitatibus error neque quibusdam facilis deserunt. Magnam, alias perspiciatis. Minus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga minima maiores, necessitatibus ducimus porro praesentium vero impedit illo nisi repudiandae numquam omnis quasi adipisci excepturi et nulla consequatur, recusandae molestias.</p>
</div>
<div id="foto-ev-2" class="foto-ev"> </div>
<div class="info-ev">
<h2>Tragos libres</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit pariatur voluptatibus in, perferendis corrupti earum iure sed ipsum adipisci eum praesentium, unde quo mollitia laborum officiis ea. Optio, ipsam accusantium distinctio magni iure soluta quaerat sequi quidem ullam nesciunt? Sunt eos illum nam dolores maiores. Vitae soluta laudantium fugit accusantium voluptatum. Et voluptatibus ducimus facere rem tenetur exercitationem voluptatem consequuntur quaerat. Unde placeat dolore corporis error, omnis eum quidem nihil voluptatum odit velit quo quisquam quam modi aperiam fugit non tempore inventore esse dolor officia? Eaque, vel deleniti magnam soluta at cum reiciendis nihil itaque laudantium fugiat laboriosam ex molestias? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo nobis aperiam non in minima inventore. Ratione deleniti quis rem itaque officiis quod neque tempore, impedit, ex delectus reprehenderit, numquam reiciendis.</p>
</div>
<div id="foto-ev-3" class="foto-ev"> </div>
<div class="info-ev">
<h2>Servicio de catering</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem soluta corrupti sapiente vitae distinctio deserunt odit animi nemo laborum quaerat, explicabo velit suscipit modi consequatur. Vitae, voluptate. Hic, iusto. Necessitatibus nemo unde molestiae error eos facilis quae ex. Dolor, repudiandae eos earum odit nesciunt quisquam, ea officiis consequuntur impedit exercitationem adipisci ad expedita illo iste nostrum laborum eius fuga, quis neque deleniti doloremque natus assumenda cum? Explicabo voluptate nihil dolorum reiciendis ratione totam temporibus atque, est harum quibusdam nostrum eaque saepe nobis dicta quidem similique repellendus aut cumque culpa dolorem! Error id quidem earum. Mollitia incidunt nam quasi maxime optio. Lorem ipsum dolor sit amet consectetur adipisicing elit. A similique explicabo iste, reprehenderit modi odit minima debitis rem? Dolores dolorem adipisci explicabo error deserunt labore pariatur impedit quas enim corrupti!</p>
</div>
</div>
<footer class="footer">
<div>
<p> Sprout Burger Co. <span> Av. Alem 400, BAHIA BLANCA, BS. AS, 8000, ARGENTINA (154) 385-3689 INFO#Sproutburger.com</span></p><br>
<p> © 2019 SPROUT BURGER</p>
</div>
</footer>
</body>
</html>
I was looking to trigger different buttons/modals for each of my sections.
I want on click hit, a modal popup appears with all the article details.
Everything works fine so far but my problem is that my modal is open just once for click.
I was wondering what I have to modify in my Javascript code to make my modal work always open systematically on-click.
Any ideas?
Here my fiddle: https://jsfiddle.net/CAT999/48rd76mp/5/
Snippet code here:
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
Replace "onclick="document.getElementById('YourModalBox').style.display='none'"" with closeModal() in all close buttons
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
document.body.classList.add('hidden');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
document.body.classList.remove('hidden');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
body.hidden{
overflow: hidden;
}
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: red;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: fixed!important;
right: 20px;
top: 20px;
}
*{ z-index: 999999;
margin:0;
padding:0;
}
body, html{
font-size: 16px;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.img-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding:20px;
background-color: white;
justify-content: center;
z-index:0;
}
#media only screen and (max-width:800px){
.img-container {
padding:20px;
height: 80vh;
}
}
#media only screen and (max-width:450px){
.img-container {
padding:20px;
height: 82vh;
}
}
#uno{background:purple;}
#due{background: yellow;}
#tre{background:black;}
img {
position:absolute;
border-radius: 20px;
height:100%;
z-index:0;
}
#media only screen and (max-width:800px){
img {
width:95%;
height:80%;
object-fit: cover;
}
}
#media only screen and (max-width:450px){
img {
width:95%;
height:100%;
object-fit: cover;
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 20px;
right:20px;
justify-content: space-between;
align-self: flex-end;
margin-left: auto;
}
.sticky-button {
background: none;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
box-shadow:0 0px 7px rgba(0,0,0,0.4);
/*padding: 6px 10px;*/
color:white;
font-family:helvetica;
font-weight:600;
font-size: 1rem;
border-radius: 24px;
width: auto;
}
#media only screen and (max-width:800px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
#media only screen and (max-width:450px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
.sticky-button-description {
color: hsla(0,0%,100%,.75);
font-size: 12px;
line-height: 1.4em;
letter-spacing: normal;
font-size: 12px;
line-height: 1.4em;
font-weight:400;
font-family:helvetica;
display:inline;
letter-spacing: normal;
}
#media only screen and (max-width:450px){
.sticky-button-description{
}
}
.sticky-button-break {
padding:0.3rem;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.break{height:200px;
width:100%;
background:black;
margin:0;
padding:0;}
.break-2{height:900px;
width:100%;
background:red;
margin:0;
padding:0;}
.btn-1 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:100;
}
.btn-1:active {
transform: scale(10.9);
opacity:0;
z-index:20;
transition: transform .3s ease;
z-index:100;
}
.btn-2 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:50;
}
.btn-2:active {
position:sticky;
transform: scale(10.9);
z-index:50;
}
.btn-3 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:30;
}
.btn-3:active {
transform: scale(10.9);
z-index:30;
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: fixed;
width: 100%;
margin: 15vh auto 0;
background: black;
color:#fff;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 26px;
font-weight:400;
}
/*MODAL TRIGGER*/
/*MODAL TRIGGER*/
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--SECTION-1-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="uno">
<img src="https://assets.vogue.com/photos/5cd30b6bd2f46d2eca29ab09/master/w_2560%2Cc_limit/virgil-abloh-vogue-june-2019-issue.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<!--MODAL-1-->
<button class='btn-1 modal-btn'>Open Modal</button><div class="overlay" id="YourModalBox">
<span onclick="closeModal()" class="close-button topright">×</span><div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-1-->
</div></div></div>
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--SECTION-2-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="due">
<img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<!--MODAL-2-->
<button class='btn-2 modal-btn'>Karl info</button><div class="overlay" id="YourModalBox2">
<span onclick="closeModal()" class="close-button topright">×</span><div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-2-->
</div></div></div>
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="tre">
<img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg" alt="Smiley face">
<div class="sticky"><div class="sticky-button">
<!--MODAL-3-->
<button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
<div class="overlay" id="YourModalBox3">
<span onclick="closeModal()" class="close-button topright">×</span>
<div class="modal"><span>Title Description-3 👋 🌎<br>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-3-->
</div></div></div>
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- REMOVE!! -->
<div class="break-2"></div>
<!-- REMOVE!! -->
I'm pretty new to CSS and JavaScript and I was wondering if you could make a script that allows you to change what stylesheet the site uses.
Say: you had a green theme where everything is shades of green. What would you do so the user can change it to red with the press of a button?
Has anyone any idea how to do this?
You can set an Id to the link tag and switch the css at runtime.
HTML
<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />
JS
document.getElementById('buttonID').onclick = function () {
document.getElementById('theme_css').href = '../red.css';
};
Quick Demo:
$( "#datepicker" ).datepicker();
$('button').button().on('click', function () {
let linkHref = 'https://code.jquery.com/ui/1.11.4/themes/{THEME}/jquery-ui.css';
if ($('#swapTheme').prop('href').indexOf('pepper-grinder') >= 0) {
$('#swapTheme').prop('href', linkHref.replace('{THEME}', 'black-tie'));
} else {
$('#swapTheme').prop('href', linkHref.replace('{THEME}', 'pepper-grinder'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" id="swapTheme" rel="stylesheet">
<div id="datepicker"></div>
<button style="padding: 5px 15px;"> Switch Theme </button>
You could use CSS Variables (also known as Custom Properties) for such changes, given that they are supported by all modern browsers.
So, let's say you have a green/white theme, where green being the primary color, and white complementing it. The site might look like the following:
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid green;
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: green;
height: 50px;
color: white;
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: green;
background-color: white;
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: green;
color: white;
}
.footer-note {
color: green;
background-color: white;
padding: 3px 0;
display: block;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
So the first step to move to CSS Variables would be to refactor out the theme colors into variables --primary-color and --secondary-color. Here's how your stylesheet looks after the change.
You could begin by setting the default theme colors into the :root element style declaration:
:root {
--primary-color: green;
--secondary-color: white;
}
Then, you can replace all instances of hardcoded "green" in the stylesheet with a call to the primary color variable: var(--primary-color). So the styles for your logo might look like the following:
.header-logo {
...
background-color: var(--primary-color);
color: var(--secondary-color);
...
}
:root {
--primary-color: green;
--secondary-color: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
Now, if you intend to change the color from "green" to "red", all you need to do is change the value of --primary-color to "red". And, you can do that using Javascript!
With plain JS, you can set the color to red using:
document.body.style.setProperty("--primary-color", "red");
Or, with jQuery you could do:
$(document.body).css("--primary-color", "red");
$(document.body).css("--primary-color", "red");
:root {
--primary-color: green;
--secondary-color: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
I went one step further and created some buttons to show how you could allow the user to choose a set of theme colors - and change the values CSS Variables using jQuery.
Here's how the snippet below looks on Chrome 64 - in case you are still using a browser that doesn't support CSS Variables:
$(".header--theme-button").on("click", function() {
var primaryColor = $(this).css("--theme-primary");
var secondaryColor = $(this).css("--theme-secondary");
$(".header--theme-button").removeClass("active");
$(this).addClass("active");
$(document.body).css("--primary-color", primaryColor);
$(document.body).css("--secondary-color", secondaryColor);
});
:root {
--primary-color: orange;
--secondary-color: white;
--theme-primary: black;
--theme-secondary: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.header-settings {
float: right;
height: 50px;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
.header--theme-button {
height: 30px;
width: 30px;
margin: 10px 5px 0 0;
display: inline-block;
border-top: 15px solid var(--theme-primary);
border-bottom: 15px solid var(--theme-secondary);
border-right: 0;
border-left: 0;
padding: 0;
box-shadow: 0 0 3px gray;
}
.header--theme-button:hover {
box-shadow: 2px 2px 2px gray;
}
.header--theme-button.active {
box-shadow: 3px 3px 3px gray;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
<div class="header-settings">
<button type="button" class="header--theme-button active" style="--theme-primary:orange; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#2196F3; --theme-secondary:#eee;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:purple; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#F44336; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:green; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#FFEB3B; --theme-secondary:#222;">
</button>
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Yes, you can change CSS with Javascript. See this tutorial for more info. It basically links multiple stylesheets like this:
<link rel="stylesheet" type="text/css" title="blue"
href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
href="http://example.com/css/pink.css">
And then uses Javascript to change it:
<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>
The switch_style() function is written in that tutorial.
You don't even need any Javascript:
input[type=radio][value=light]:checked ~ article {
color: #222;
background-color: #FFEEAA;
}
input[type=radio][value=dark]:checked ~ article {
color: #EEE;
background-color: grey;
}
<body>
<input type="radio" name="theme" value="light" checked="checked">Light<br>
<input type="radio" name="theme" value="dark">Dark<br>
<article>
<h1>My super page!</h1>
<p>
Quibusdam sit repudiandae consequuntur doloremque illum ut ex quo. Esse temporibus est id suscipit repellat. Distinctio voluptatem voluptates asperiores dolorem dolorem placeat corporis quae. Quaerat voluptatem magni dignissimos rerum distinctio odio id.
</p>
</article>
</body>
Or just put your theme css in a css file and pass it to the function, On page load the if (localStorage.getItem("theme") != "") checks if theme has been set.. Here you have an example:
if (localStorage.getItem("theme") != "") {
loadcssfile(localStorage.getItem("theme"));
}
function loadcssfile(filename) {
if (filename != "") {
localStorage.setItem("theme", filename);
}
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
<div onclick="loadcssfile('css/pink.css')" id="pink">
Pink
</div>
<div
onclick="loadcssfile('css/blue.css')" id="blue">
Blue
</div>