I have two divs whose role is the one of a burger menu. One of them has the property display:block, and the other one has display:none;.
After I click one one div the nav opens and the div's display property turns to none, however when I use the similar block of code to make the other div visible the code doesn't work (by applying display: block throught JavaScript).
When I check the console, it shows the the div's property has changed from none to block, but I can't locate the div with my mouse or see it.
code below:
HTML
<div class="burger">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="secondBurger">
<div class="line3"></div>
<div class="line4"></div>
</div>
CSS
.burger div {
width: 26px;
height: 2px;
background-color: white;
margin: 5px;
transition: all 0.5s ease;
}
.burger {
position: absolute;
right: 0px;
margin: 10px;
display: block;
cursor: pointer;
}
.secondBurger div {
width: 26px;
height: 2px;
background-color: black;
margin: 5px;
transition: all 0.5s ease;
}
.secondBurger {
position: absolute;
right: 10px;
top: 10px;
margin: 10px;
display: none;
cursor: pointer;
}
.burger .line {
transform: rotate(-45deg) translate(0px, 5px);
}
.burger .line2 {
transform: rotate(45deg) translate(0px, -5.5px);
}
#secondBurger .line3 {
transform: rotate(0deg) translate(0px, 1px);
}
#secondBurger .line4 {
transform: rotate(0deg) translate(0px, 1px);
}
JavaScript
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".bubbles");
const bubbles = document.querySelectorAll(".bubbles p");
const mainNav = document.querySelector(".mainNav");
const main = document.querySelector(".main");
burger.addEventListener("click", () => {
nav.classList.toggle("bubbles-active");
bubbles.forEach((link, index) => {
if (nav.classList.contains("bubbles-active")) {
document.querySelector(".line").style.display = "none";
document.querySelector(".line2").style.display = "none";
document.querySelector(".line3").style.display = "block";
document.querySelector(".line4").style.display = "block";
} else if (main.classList.contains("main")) {
document.querySelector(".line").style.backgroundColor = "";
document.querySelector(".line2").style.backgroundColor = "";
}
});
});
};
Codepen
codepen.io/jelaaxo/pen/JjGQMPM
Related
I have this cool html css card below, where I now need to have that if you click it, it shows a lightbox with multiple photos. I have tried multiple things before, but the problem is everything gets messed up when you do light box.
this is the code for the picture card alone. and this is the link to see it with me trying the light box. https://codepen.io/gianlucaas/pen/rNzBKVz
what am i doing wrong?
function myFunction() {
var modelName = "Angela"
var height = 'My name is Angela'
var myImage = "https://images.unsplash.com/photo-1633594708103-e6e41891b679?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1040&q=80"
document.getElementById("myText").innerHTML = modelName;
document.getElementById("myHeight").innerHTML = height;
document.getElementById("myImg").src = myImage;
}
.card-content {
position: relative;
overflow: hidden;
}
.card-content-details {
padding: 10px;
}
.card-content-details {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 15px;
}
.card-content-details,
.card-content-overlay {
box-sizing: border-box;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.card-content-details {
transform: translateX(1000px);
transition-duration: 800ms;
z-index: 1;
}
.card-content-overlay {
background-color: #02010100;
transition-duration: 800ms;
transition-property: transform, opacity, background-color;
transform: translateX(-1000px);
z-index: 1;
}
.card-content-image {
transition-duration: 800ms;
width: 100%;
max-width: 100%;
}
.card-content:hover .card-content-image {
transform: scale(1.1);
}
.card-content:hover .card-content-overlay,
.card-content:hover .card-content-details {
transform: translateY(0) translateX(0);
opacity: 1;
}
.card-content:hover .card-content-overlay {
background-color: transparent;
background-image: linear-gradient(200deg, #00000000 81%, #000000ba 14%);
}
.card-content-title {
color: #fff;
font-size: 20px;
text-transform: uppercase;
margin: 0 0 10px;
}
.card-content-text {
color: #fff;
font-size: 16px;
margin: 0;
}
<body onload="myFunction()">
<div class="card-content">
<a href="#" target="_blank">
<div class="card-content-overlay"></div>
<img class="card-content-image" src="" id="myImg">
<div class="card-content-details">
<h4 class="card-content-title" id="myText"></h4>
<p class="card-content-text" id="myHeight"></p>
</div>
</a>
</div>
</body>
You can begin by creating a html container on your file of your lightbox (which will be hidden) with inside the buttons (prev, next, close) and the (empty for now).
When you launch the lightbox (with a js function that you'll have to create) you'll be display:block this html container (position: fixed; in CSS and with the highest z-index)
I am trying to trigger the menu icon off when clicked, and trigger on an 'x' icon. Likewise, I need the reverse of this to happen. Trigger the 'x' icon off when clicked, and the menu icon back on.
When nav-button-menuOpen is clicked, the three divs inside go from opacity: 1; to opacity: 0; and the button fades away like it's supposed to. Then the span inside nav-button-menuClose is supposed to go from opacity: 0; to opacity: 1;. I can see the class being added in the browser, but the animation on the span doesn't change the opacity property.
const mobileMenuOpenAndClose = () => {
const menuOpenButton = document.querySelector('.nav-button-menuOpen');
const menuCloseButton= document.querySelector('.nav-button-menuClose');
const navMobileMenu = document.querySelector('.nav-mobileMenu');
const navMobileMenuLinks = document.querySelectorAll('.nav-mobileMenu-links');
menuOpenButton.addEventListener('click', () => {
console.log('menuButtonOpen clicked');
menuOpenButton.classList.toggle('nav-button-toggle');
menuCloseButton.classList.toggle('nav-button-toggle');
});
menuCloseButton.addEventListener('click', () => {
console.log('menuButtonClose clicked')
menuCloseButton.classList.toggle('nav-button-toggle');
menuOpenButton.classList.toggle('nav-button-toggle');
});
};
mobileMenuOpenAndClose();
/* Hamburger Menu */
nav .nav-button-menuOpen {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 1;
}
nav .nav-button-menuOpen div {
width: 30px;
height: 30px;
height: 3px;
margin: 5px 0;
background-color: var(--color-black);
transition: all;
}
nav .nav-button-menuClose {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 0;
}
nav .nav-button-menuClose span {
color: var(--color-black);
font-size: 1rem;
transition: all;
}
nav .nav-button-toggle .menuOpen-line {
opacity: 0;
}
nav .nav-button-toggle .nav-button-menuClose {
opacity: 1;
}
<nav>
<div class="nav-button-menuOpen">
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
</div>
<div class="nav-button-menuClose">
<span>x</span>
</div>
</nav>
Writing the css with the space in the middle like this: .nav-button-toggle .nav-button-menuClose applys the style to the elements children. Write .nav-button-toggle.nav-button-menuClose without the space in the middle to apply it to itself.
const mobileMenuOpenAndClose = () => {
const menuOpenButton = document.querySelector('.nav-button-menuOpen');
const menuCloseButton= document.querySelector('.nav-button-menuClose');
const navMobileMenu = document.querySelector('.nav-mobileMenu');
const navMobileMenuLinks = document.querySelectorAll('.nav-mobileMenu-links');
menuOpenButton.addEventListener('click', () => {
console.log('menuButtonOpen clicked');
menuOpenButton.classList.toggle('nav-button-toggle');
menuCloseButton.classList.toggle('nav-button-toggle');
});
menuCloseButton.addEventListener('click', () => {
console.log('menuButtonClose clicked')
menuCloseButton.classList.toggle('nav-button-toggle');
menuOpenButton.classList.toggle('nav-button-toggle');
});
};
mobileMenuOpenAndClose();
/* Hamburger Menu */
nav .nav-button-menuOpen {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 1;
}
nav .nav-button-menuOpen div {
width: 30px;
height: 30px;
height: 3px;
margin: 5px 0;
background-color: black;
transition: all;
}
nav .nav-button-menuClose {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 0;
}
nav .nav-button-menuClose span {
color: black;
font-size: 1rem;
transition: all;
}
nav .nav-button-toggle .menuOpen-line {
opacity: 0;
}
nav .nav-button-toggle.nav-button-menuClose {
opacity: 1;
}
<nav>
<div class="nav-button-menuOpen">
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
</div>
<div class="nav-button-menuClose">
<span>x</span>
</div>
</nav>
For the animation part I would recommand you to use the CSS #keyframes Rule (https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp) instead of transiton. This way you can easily apply a hide class with display: none; to the hidden elements, and if you remove the class, the animation gets triggered.
const mobileMenuOpenAndClose = () => {
const menuOpenButton = document.querySelector('.nav-button-menuOpen');
const menuCloseButton= document.querySelector('.nav-button-menuClose');
const navMobileMenu = document.querySelector('.nav-mobileMenu');
const navMobileMenuLinks = document.querySelectorAll('.nav-mobileMenu-links');
menuOpenButton.addEventListener('click', () => {
console.log('menuButtonOpen clicked');
menuOpenButton.classList.toggle('hidden');
menuCloseButton.classList.toggle('hidden');
});
menuCloseButton.addEventListener('click', () => {
console.log('menuButtonClose clicked')
menuCloseButton.classList.toggle('hidden');
menuOpenButton.classList.toggle('hidden');
});
};
mobileMenuOpenAndClose();
/* Hamburger Menu */
.nav-button-menuOpen {
cursor: pointer;
display: inline-block;
animation: fadeIn 0.2s;
}
.nav-button-menuOpen div {
width: 30px;
height: 30px;
height: 3px;
margin: 5px 0;
background-color: black;
}
.nav-button-menuClose {
cursor: pointer;
display: inline-block;
animation: fadeIn 0.2s;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#keyframes fadeIn {
from { opacity: 0 }
to { opacity: 100 }
}
.nav-button-menuClose span {
color: black;
font-size: 2rem;
}
.hidden {
display: none
}
<div class="nav-button-menuOpen">
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
</div>
<div class="nav-button-menuClose hidden">
<span>x</span>
</div>
This is because you are adding nav-button-toggle class to the .nav-button-menuClose element, but in your css selector you trying apply opacity if this element's parent has nav-button-toggle class:
nav .nav-button-toggle .nav-button-menuClose {
(basically you have an extra space between classes in this selector)
const mobileMenuOpenAndClose = () => {
const menuOpenButton = document.querySelector('.nav-button-menuOpen');
const menuCloseButton= document.querySelector('.nav-button-menuClose');
const navMobileMenu = document.querySelector('.nav-mobileMenu');
const navMobileMenuLinks = document.querySelectorAll('.nav-mobileMenu-links');
menuOpenButton.addEventListener('click', () => {
console.log('menuButtonOpen clicked');
menuOpenButton.classList.toggle('nav-button-toggle');
menuCloseButton.classList.toggle('nav-button-toggle');
});
menuCloseButton.addEventListener('click', () => {
console.log('menuButtonClose clicked')
menuCloseButton.classList.toggle('nav-button-toggle');
menuOpenButton.classList.toggle('nav-button-toggle');
});
};
mobileMenuOpenAndClose();
/* Hamburger Menu */
nav .nav-button-menuOpen {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 1;
}
nav .nav-button-menuOpen div {
width: 30px;
height: 30px;
height: 3px;
margin: 5px 0;
background-color: var(--color-black);
transition: all;
}
nav .nav-button-menuClose {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 0;
}
nav .nav-button-menuClose span {
color: var(--color-black);
font-size: 1rem;
transition: all;
}
nav .nav-button-toggle .menuOpen-line {
opacity: 0;
}
nav .nav-button-toggle.nav-button-menuClose {
opacity: 1;
}
<nav>
<div class="nav-button-menuOpen">
<div class="menuOpen-line">menu1</div>
<div class="menuOpen-line">menu2</div>
<div class="menuOpen-line">menu3</div>
</div>
<div class="nav-button-menuClose">
<span>x</span>
</div>
</nav>
As of animation, since you are only changing opacity, there nothing else to animate as there are no other changes applied to the style between the states.
You can achieve with single .nav-menu-toggle element to open and close menu with single click event of JavaScript.
document.querySelector('.nav-menu-toggle').addEventListener('click', (t) => {
t.target.classList.toggle('active');
});
/* Hamburger Menu */
:root{
--color-black : #000
}
nav{
background-color: #f2f2f2;
padding: 20px;
}
nav .nav-menu-toggle {
width: 30px;
height: 30px;
display: block;
cursor: pointer;
overflow: hidden;
}
nav .nav-menu-toggle div{
width: 100%;
height: 3px;
margin-bottom: 10px;
background-color: #000;
transition: 0.5s transform cubic-bezier(0.075, 0.82, 0.165, 1);
pointer-events: none;
}
nav .nav-menu-toggle.active div{
background-color: #ff0000;
}
nav .nav-menu-toggle.active div:nth-child(1){
transform: rotate(-45deg);
transform-origin: 110% 9px;
}
nav .nav-menu-toggle.active div:nth-child(2){
transform: scale(0);
}
nav .nav-menu-toggle.active div:nth-child(3){
transform: rotate(45deg);
transform-origin: 95% -4.5px;
}
<nav>
<div class="nav-menu-toggle">
<div></div>
<div></div>
<div></div>
</div>
</nav>
Ultimately, for each click of a button, I want to display an element that contains new content. In other words...
You read content contained within a parent container
To see the next item click the button
When the button is clicked, the old content shifts downward. The new content flows down from the top of the container. It pauses in order to read the new content.
To get new content, press the button again.
I'm unclear as to how to accomplish this, and if it's even possible with a CSS Animation. With what I have posted, it just takes both elements and translates them down the vertical axis at once. How can this be refactored so that one element pauses and displays it's content using just vanilla JavaScript?
var div1 = document.querySelector(".first");
var div2 = document.querySelector(".second");
var button = document.querySelector("button");
var divs = [div1, div2];
button.addEventListener("click", function(event) {
event.preventDefault();
for (var i = divs.length - 1; i > -1; i--) {
var div = divs[i];
div.classList.remove("down_shift");
void div.offsetWidth;
div.classList.add("down_shift");
}
});
body {
background: #222;
}
section {
width: 50vw;
height: 300px;
border: 5px solid red;
margin: 50px auto;
overflow: hidden;
}
.first, .second {
width: inherit;
height: 300px;
background: red;
transform: translateY(-300px);
}
.second {
background: pink;
}
h1 {
margin: 0;
padding-top: 50px;
text-align: center;
}
.down_shift {
animation: down 1s ease-out;
}
#keyframes down{
from {
transform: translateY(0);
}
to {
transform: translateY(300px);
}
}
<section>
<div class="first"><h1>1</h1></div>
<div class="second"><h1>2</h1></div>
</section>
<button type="button">Click</button>
You can add a wrapper to the elements, and animate the wrapper
var wrapper = document.querySelector(".wrapper");
var button = document.querySelector("button");
button.addEventListener("click", function(event) {
event.preventDefault();
wrapper.style.transform = 'translateY(-300px)'
});
body {
background: #222;
}
section {
width: 50vw;
height: 300px;
border: 5px solid red;
margin: 50px auto;
overflow: hidden;
}
.first, .second {
width: inherit;
height: 300px;
background: red;
/* transform: translateY(-300px); */
}
.second {
background: pink;
}
.wrapper {
transition: all 1s ease-out;
}
h1 {
margin: 0;
padding-top: 50px;
text-align: center;
}
.down_shift {
animation: down 1s ease-out;
}
#keyframes down{
from {
transform: translateY(0);
}
to {
transform: translateY(300px);
}
}
<section>
<div class="wrapper">
<div class="first"><h1>1</h1></div>
<div class="second"><h1>2</h1></div>
</div>
</section>
<button type="button">Click</button>
I just got off support with ActiveCampaign and they said they couldn't provide me with code examples on how to add their modal pop-up forms to be triggered by wordpress buttons.
I found a few resources online but they are all slightly different than the functionality I'm looking for.
I already added the ActiveCampaign plugin to my wordpress site and there are two options of embedding the form within the site.
shortcode "[activeCampaign formId=1]" or
<script src="https://exampledomain.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>
I'm currently using the divi theme, and the buttons have sections for CSS ID's and CSS Classes.
so to summarize, I would like to be able to click a button and have the activecampaign modal form popup.
If you could show me how I can add code to the button and my site to trigger the modal popup that'd be amazing.
Let me know if you have any other information.
Thanks!
Sugesstion:
This involves DOM manipulation. create a css class called active which should be set to the form container to show. Here's an example:
var formToggle = document.getElementById("form-toggler");
var formContainer = document.querySelector(".form-container");
formToggle.addEventListener('click', function(){
// When you click the button, first check if the form is open
// so that you know if you should close or open
if(formContainer.classList.contains("active")){
// Form is currently open, because it has active as one of it's classes
// so remove active to hide it.
formContainer.classList.remove("active");
}else{
// Form is currently closed, because it does not have active as one of it's classes
// so add active to show it.
formContainer.classList.add("active");
}
});
.form-container{
width: 100%;
height: 100%;
min-height: 200px;
background-color: rgba(0,0,0,0.2);
display: none;
}
/* When form has active class, set display to block */
.form-container.active{
display: block !important;
}
<div class="form-container">
<!-- your Form Here -->
<h1>Yey, form is active!!</h1>
</div>
<button id="form-toggler">OpenForm<button>
This is just at the basic level of approaching your scenario. So you've got to work on your css to make your Modal cover the entire window and add a close button on it in case someone decides to close it.
Hey this should work for you also. Bear in mind there is some extra code you probably wont need all of it such as the animations but I will leave these in as they make the modal look a little slicker. You won't need bootstrap or any additional libraries for this code.
HTML:
<a id="gdx-lighbox-modal-unique-1" data-hover="true" type="button" class="gdx-lightbox-tooltip-open-modal lightbox-link gdx-lightbox-button" data-open="gdx-lighbox-modal-1">
Click Here
</a>
<div class="gdx-modal" id="gdx-lighbox-modal-1" data-animation="slideInOutLeft">
<div class="gdx-modal-dialog">
<header class="gdx-modal-header">
<a class="gdx-close-modal" aria-label="close modal" data-close="">✕</a>
</header>
<section class="gdx-modal-content">
//Form would go here instead of the image (image just an example)
<img src="https://gdxdesigns.com/wp-content/uploads/2020/11/little-frog.jpg"> </section>
<footer class="gdx-modal-footer"> <h3 class="gdx-modal-image-title"></h3></footer>
</div>
</div>
CSS:
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--lightgray: #efefef;
--blue: steelblue;
--white: #fff;
--black: rgba(0, 0, 0, 0.8);
--bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
* {
padding: 0;
margin: 0;
}
.gdx-body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font: 16px/1.5 sans-serif;
}
.lightbox-link, a.lightbox-link {
cursor: pointer;
margin-left: 2.5%;
}
.gdx-lightbox-tooltip-open-modal img {
width: 20px;
height: 20px;
}
.gdx-lightbox-button {
padding: 10px 20px;
background: #000;
padding: 10px 20px;
font-weight: normal;
border: 2px solid #000;
color: #94c93b;
}
.gdx-lightbox-button:hover {
background: #FFF;
color: #000;
}
/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.gdx-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: var(--black);
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: all 0.35s ease-in;
z-index: 9999 !important;
}
.gdx-modal.is-visible {
visibility: visible;
opacity: 1;
}
.gdx-modal-dialog {
position: relative;
max-width: 100vw;
max-height: 100vh;
border-radius: 5px;
background: var(--white);
overflow: auto;
cursor: default;
margin-top: 5%;
}
.gdx-modal-dialog > * {
padding: 1rem;
}
.gdx-modal-header,
.gdx-modal-footer {
background: #FFF;
}
.gdx-modal-header .gdx-close-modal {
font-size: 1.5rem;
}
.gdx-modal-header a {
font-size: 2em;
}
.gdx-modal-content {
text-align: center;
}
.gdx-modal-content img {
margin: 0 !important;
}
.gdx-close-modal {
float: right;
cursor: pointer;
}
.gdx-modal p + p {
margin-top: 1rem;
}
.gdx-modal-image-title {
text-align: center;
font-size: 1em;
margin: 0;
}
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .gdx-modal-dialog {
opacity: 0;
transition: all 0.5s var(--bounceEasing);
}
[data-animation].is-visible .gdx-modal-dialog {
opacity: 1;
transition-delay: 0.2s;
}
[data-animation="slideInOutDown"] .gdx-modal-dialog {
transform: translateY(100%);
}
[data-animation="slideInOutTop"] .gdx-modal-dialog {
transform: translateY(-100%);
}
[data-animation="slideInOutLeft"] .gdx-modal-dialog {
transform: translateX(-100%);
}
[data-animation="slideInOutRight"] .gdx-modal-dialog {
transform: translateX(100%);
}
[data-animation="zoomInOut"] .gdx-modal-dialog {
transform: scale(0.2);
}
[data-animation="rotateInOutDown"] .gdx-modal-dialog {
transform-origin: top left;
transform: rotate(-1turn);
}
[data-animation="mixInAnimations"].is-visible .gdx-modal-dialog {
animation: mixInAnimations 2s 0.2s linear forwards;
}
[data-animation="slideInOutDown"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutTop"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutLeft"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutRight"].is-visible .gdx-modal-dialog,
[data-animation="zoomInOut"].is-visible .gdx-modal-dialog,
[data-animation="rotateInOutDown"].is-visible .gdx-modal-dialog {
transform: none;
}
#keyframes mixInAnimations {
0% {
transform: translateX(-100%);
}
10% {
transform: translateX(0);
}
20% {
transform: rotate(20deg);
}
30% {
transform: rotate(-20deg);
}
40% {
transform: rotate(15deg);
}
50% {
transform: rotate(-15deg);
}
60% {
transform: rotate(10deg);
}
70% {
transform: rotate(-10deg);
}
80% {
transform: rotate(5deg);
}
90% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
/* Backend Instructions
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-instructions-heading {
font-size: 1.8em !important;
}
.lightbox-instructions strong {
font-size: 1.2em !important;
}
.gdx-lightbox-tooltip-open-modal img {
margin: -0.3em;
margin-left: 0.25em;
}
xmp {
white-space: normal;
}
.lightbox-tooltip-instructions-content xmp{
margin-bottom: 2em;
}
Javascript
const openEls = document.querySelectorAll("[data-open]");
const closeEls = document.querySelectorAll("[data-close]");
const isVisible = "is-visible";
for (const el of openEls) {
el.addEventListener("click", function() {
const modalId = this.dataset.open;
document.getElementById(modalId).classList.add(isVisible);
});
}
for (const el of closeEls) {
el.addEventListener("click", function() {
this.parentElement.parentElement.parentElement.classList.remove(isVisible);
});
}
document.addEventListener("click", e => {
if (e.target == document.querySelector(".gdx-modal.is-visible")) {
document.querySelector(".gdx-modal.is-visible").classList.remove(isVisible);
}
});
document.addEventListener("keyup", e => {
// if we press the ESC
if (e.key == "Escape" && document.querySelector(".gdx-modal.is-visible")) {
document.querySelector(".gdx-modal.is-visible").classList.remove(isVisible);
}
});
JSFiddle Example can be seen here.
If you want to download this as a Wordpress Plugin (free of course) you can do so here
If you want to see the a demo of the plugin in action with the button modal popup you see this here
I need to create an animation which will make a menu appear from the left side of the screen. This animation should be started on a click on a button.
The content of the menu should recover 55% of the width of the main page.
JSFiddle Demo
In the previous link you can the the menu and the button to move left. At the beginning the menu (with the "link" elements) should be hidden and the button .glyhicon should be at the very left of the page.
On click on this button the menu and the button should move to the right and recover 55% of the main page.
The problem is I don't know how to do this. (I managed to move the menu by changing the structure but I couldn't move the button.)
Here is my HTML code
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
<div id="icon-menu" class="test">
<button id="button_menu" class="js-menu menu" type="button">
<span class="glyphicon glyphicon-map-marker"></span>
</button>
</div>
</div>
CSS :
#left-menu {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#map-menu, #icon-menu {
display: inline-block;
vertical-align: middle;
}
.menu {
background: 0;
float: left;
margin: 2rem;
height: 2.7rem;
width: 3.5rem;
z-index: 2;
outline: 0;
padding: 0;
border: 0;
}
.menu_content{
width: 60%;
height: 100%;
background: #eaeaea;
position: fixed;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
padding-top: 6.2rem;
z-index: 1;
}
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
javascript :
var isActive = false;
$('.js-menu').on('click', function() {
if (isActive) {
$(this).removeClass('active');
$('#left_menu').removeClass('menu-open');
/*$('#button_menu').removeClass('move-right');
$('#button_menu').addClass('move-left');*/
} else {
$(this).addClass('active');
$('#left_menu').addClass('menu-open');
/*$('#button_menu').removeClass('move-left');
$('#button_menu').addClass('move-right');*/
}
isActive = !isActive;
});
Could you help me to adapt or redo the animation please ?
Here's a pure CSS solution without any javascript by making use of the :checked status of a hidden checkbox with display:none, the label for that checkbox should be outside the #left-menu element so it is possible to target it using ~:
JS Fiddle 1
#button_menu {
display: none;
}
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: fixed;
left: 5px;
top: 50%;
transition: all 1s;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -100%;
width: 55%;
top: 50%;
transition: all 1s;
}
#button_menu:checked + .glyphicon {
left: 55%;
transition: all 1s;
}
#button_menu:checked ~ #left-menu {
left: 0;
transition: all 1s;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<input type="checkbox" id="button_menu" class="js-menu">
<label for="button_menu" class="glyphicon"></label>
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
and here's a simple jQuery solution, where basically we have a variable as a triggering flag toggleFlag, if its value is true the left value is 0, while if the triggering flag value is false then the left value is -55% -which is the menu width as the op said it takes 55% of the screen-, then we animate the .left-menu dependign on the left value, and we need to negate the value of the triggering flag.
JS Fiddle 2
var menuIcon = $('.glyphicon'),
leftMenu = $('#left-menu'),
toggleFlag = true;
menuIcon.on('click', function() {
var leftVal = (toggleFlag) ? '0' : '-55%';
$('#left-menu').animate({'left': leftVal }, 700);
toggleFlag = !toggleFlag;
});
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: absolute;
right: -45px;
top: 5px;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -55%;
width: 55%;
top: 50%;
}
.slideIt {
color: red;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="left-menu">
<span class="glyphicon"></span>
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
There a couple things with your example and fiddle, to start it helps to have jquery loaded in the fiddle to mess around.
Next isActive is not only not defined but unnecessary
if (isActive) {
should be replaced by
if ($(this).hasClass('active')) {
and
isActive = !isActive;
can be removed completely
next you becareful with your underscores and hyphens
$('#left-menu') != $('#left_menu')
Please also wrap it all in a document ready so it can be attached when the page loads
$(document).ready(function () {
// code
});
so with the fixes you can have something like:
$(document).ready(function () {
$('.js-menu').on('click', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#left-menu').removeClass('menu-open');
} else {
$(this).addClass('active');
$('#left-menu').addClass('menu-open');
}
});
});
Now to move your button, the problem is you're adding the transform to the <nav> in the menu-open class with :
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
So one way to fix that would be to also add it to your button
.menu-open #icon-menu {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
OR
.menu-open .active {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
I'll leave you to do the slide animation and so on.
There's a couple ways to make it better than this but with what you have for now this'll probably help you get a start on it? Maybe?