I have a form with a button that when clicked adds a new input to the form.
While the input is added, the form does not expand so that any contend below the added form is no longer visible, however the form resizes and all content is viewable if a user resizes their window.
See below
Is this a CSS issue? If so what elements could it possibly be?
The HTML
<div id="single-form-next-prev" class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
<h3 class="text-center multisteps-form__title">Skills</h3>
<div id="form-content-1" class="multisteps-form__content">
<div id="input-grp-single-1" class="form-row mt-4">
<div class="col-12"><input class="form-control multisteps-form__input" type="text" placeholder="Skill 1"></div>
</div>
<br>
<button id='addButton' class="btn btn-outline-primary text-truncate float-none float-sm-none add-another-btn" data-bss-hover-animate="pulse" type="button">Add Skill<i class="fas fa-plus-circle edit-icon"></i></button>
<div id="next-prev-buttons" class="button-row d-flex mt-4"><button class="btn btn btn-primary js-btn-prev" type="button" title="Prev">Prev</button><button class="btn btn btn-primary ml-auto js-btn-next" type="button" title="Next">Find Results</button></div>
</div>
</div>
The JQUERY
$(document).ready(function(){
let id = 1;
$('#addButton').click(function() {
$('#input-grp-single-'+id).after('<div id="input-grp-single-'+(id+1)+'" class="form-row mt-4"> <div class="col-12"><input class="form-control multisteps-form__input" type="text" placeholder="Skill '+(id+1)+'"></div></div>');
id++;
});
});
The CSS
.multisteps-form__form {
position: relative;
}
.multisteps-form__panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
opacity: 0;
visibility: hidden;
}
.multisteps-form__panel.js-active {
height: auto;
opacity: 1;
visibility: visible;
}
.multisteps-form__panel[data-animation="scaleIn"] {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.multisteps-form__panel[data-animation="scaleIn"].js-active {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
-webkit-transform: scale(1);
transform: scale(1);
}
Codepen link added
https://codepen.io/jdog6652/pen/ExZJvaQ
Remove the overflow-hidden class on your #multple-step-form-n element:
$(document).ready(function() {
let id = 1;
$('[data-bss-hover-animate]')
.mouseenter(function() {
var elem = $(this);
elem.addClass('animated ' + elem.attr('data-bss-hover-animate'))
})
.mouseleave(function() {
var elem = $(this);
elem.removeClass('animated ' + elem.attr('data-bss-hover-animate'))
});
$('#addButton').click(function() {
$('#input-grp-single-' + id).after('<div id="input-grp-single-' + (id + 1) + '" class="form-row mt-4"> <div class="col-12"><input class="form-control multisteps-form__input" type="text" placeholder="Skill ' + (id + 1) + '"></div></div>');
id++;
});
});
//DOM elements
const DOMstrings = {
stepsBtnClass: 'multisteps-form__progress-btn',
stepsBtns: document.querySelectorAll(`.multisteps-form__progress-btn`),
stepsBar: document.querySelector('.multisteps-form__progress'),
stepsForm: document.querySelector('.multisteps-form__form'),
stepsFormTextareas: document.querySelectorAll('.multisteps-form__textarea'),
stepFormPanelClass: 'multisteps-form__panel',
stepFormPanels: document.querySelectorAll('.multisteps-form__panel'),
stepPrevBtnClass: 'js-btn-prev',
stepNextBtnClass: 'js-btn-next'
};
//remove class from a set of items
const removeClasses = (elemSet, className) => {
elemSet.forEach(elem => {
elem.classList.remove(className);
});
};
//return exect parent node of the element
const findParent = (elem, parentClass) => {
let currentNode = elem;
while (!currentNode.classList.contains(parentClass)) {
currentNode = currentNode.parentNode;
}
return currentNode;
};
//get active button step number
const getActiveStep = elem => {
return Array.from(DOMstrings.stepsBtns).indexOf(elem);
};
//set all steps before clicked (and clicked too) to active
const setActiveStep = activeStepNum => {
//remove active state from all the state
removeClasses(DOMstrings.stepsBtns, 'js-active');
//set picked items to active
DOMstrings.stepsBtns.forEach((elem, index) => {
if (index <= activeStepNum) {
elem.classList.add('js-active');
}
});
};
//get active panel
const getActivePanel = () => {
let activePanel;
DOMstrings.stepFormPanels.forEach(elem => {
if (elem.classList.contains('js-active')) {
activePanel = elem;
}
});
return activePanel;
};
//open active panel (and close unactive panels)
const setActivePanel = activePanelNum => {
//remove active class from all the panels
removeClasses(DOMstrings.stepFormPanels, 'js-active');
//show active panel
DOMstrings.stepFormPanels.forEach((elem, index) => {
if (index === activePanelNum) {
elem.classList.add('js-active');
setFormHeight(elem);
}
});
};
//set form height equal to current panel height
const formHeight = activePanel => {
const activePanelHeight = activePanel.offsetHeight;
DOMstrings.stepsForm.style.height = `${activePanelHeight}px`;
};
const setFormHeight = () => {
const activePanel = getActivePanel();
formHeight(activePanel);
};
//STEPS BAR CLICK FUNCTION
DOMstrings.stepsBar.addEventListener('click', e => {
//check if click target is a step button
const eventTarget = e.target;
if (!eventTarget.classList.contains(`${DOMstrings.stepsBtnClass}`)) {
return;
}
//get active button step number
const activeStep = getActiveStep(eventTarget);
//set all steps before clicked (and clicked too) to active
setActiveStep(activeStep);
//open active panel
setActivePanel(activeStep);
});
//PREV/NEXT BTNS CLICK
DOMstrings.stepsForm.addEventListener('click', e => {
const eventTarget = e.target;
//check if we clicked on `PREV` or NEXT` buttons
if (!(eventTarget.classList.contains(`${DOMstrings.stepPrevBtnClass}`) || eventTarget.classList.contains(`${DOMstrings.stepNextBtnClass}`))) {
return;
}
//find active panel
const activePanel = findParent(eventTarget, `${DOMstrings.stepFormPanelClass}`);
let activePanelNum = Array.from(DOMstrings.stepFormPanels).indexOf(activePanel);
//set active step and active panel onclick
if (eventTarget.classList.contains(`${DOMstrings.stepPrevBtnClass}`)) {
activePanelNum--;
} else {
activePanelNum++;
}
setActiveStep(activePanelNum);
setActivePanel(activePanelNum);
});
//SETTING PROPER FORM HEIGHT ONLOAD
window.addEventListener('load', setFormHeight, false);
//SETTING PROPER FORM HEIGHT ONRESIZE
window.addEventListener('resize', setFormHeight, false);
//changing animation via animation select !!!YOU DON'T NEED THIS CODE (if you want to change animation type, just change form panels data-attr)
const setAnimationType = newType => {
DOMstrings.stepFormPanels.forEach(elem => {
elem.dataset.animation = newType;
});
};
//selector onchange - changing animation
const animationSelect = document.querySelector('.pick-animation__select');
/*
====NOTICE====
The block of code below was giving an error not related to the question, so it was commented out
animationSelect.addEventListener('change', () => {
const newAnimationType = animationSelect.value;
setAnimationType(newAnimationType);
});
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body a {
color: inherit;
text-decoration: none;
}
.multisteps-form__progress {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.multisteps-form__progress-btn {
transition-property: all;
transition-duration: 0.15s;
transition-timing-function: linear;
transition-delay: 0s;
position: relative;
padding-top: 20px;
color: rgba(108, 117, 125, 0.7);
text-indent: -9999px;
border: none;
background-color: transparent;
outline: none !important;
cursor: pointer;
}
#media (min-width: 500px) {
.multisteps-form__progress-btn {
text-indent: 0;
}
}
.multisteps-form__progress-btn:before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 13px;
height: 13px;
content: '';
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
border: 2px solid currentColor;
border-radius: 50%;
background-color: #fff;
box-sizing: border-box;
z-index: 3;
}
.multisteps-form__progress-btn:after {
position: absolute;
top: 5px;
left: calc(-50% - 13px / 2);
transition-property: all;
transition-duration: 0.15s;
transition-timing-function: linear;
transition-delay: 0s;
display: block;
width: 100%;
height: 2px;
content: '';
background-color: currentColor;
z-index: 1;
}
.multisteps-form__progress-btn:first-child:after {
display: none;
}
.multisteps-form__progress-btn.js-active {
color: #007bff;
}
.multisteps-form__progress-btn.js-active:before {
-webkit-transform: translateX(-50%) scale(1.2);
transform: translateX(-50%) scale(1.2);
background-color: currentColor;
}
.multisteps-form__form {
position: relative;
}
.multisteps-form__panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
opacity: 0;
visibility: hidden;
}
.multisteps-form__panel.js-active {
height: auto;
opacity: 1;
visibility: visible;
}
.multisteps-form__panel[data-animation="scaleIn"] {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.multisteps-form__panel[data-animation="scaleIn"].js-active {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
-webkit-transform: scale(1);
transform: scale(1);
}
.edit-icon {
margin-left: 10px;
font-size: 15px;
}
.add-another-btn {
border: 2px solid #5C99C7;
color: #5C99C7;
font-size: 14px;
line-height: 1.8em;
}
.add-another-btn:hover {
border: 2px solid #5C99C7;
background: #5C99C7;
color: white;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<body style="background: var(--gray-dark);">
<h1 class="text-center" style="color: var(--light);">Skill Finder</h1>
<section>
<div id="multple-step-form-n" class="container" style="margin-top: 0px;margin-bottom: 10px;padding-top: 57px;">
<div id="progress-bar-button" class="multisteps-form">
<div class="row">
<div class="col-12 col-lg-8 ml-auto mr-auto mb-4">
<div class="multisteps-form__progress"><a class="btn multisteps-form__progress-btn js-active" role="button" title="User Info">City</a><a class="btn multisteps-form__progress-btn" role="button" title="User Info">Skills</a><a class="btn multisteps-form__progress-btn" role="button"
title="User Info">Results</a></div>
</div>
</div>
</div>
<div id="multistep-start-row" class="row">
<div id="multistep-start-column" class="col-12 col-lg-8 m-auto">
<form id="main-form" class="multisteps-form__form">
<div id="single-form-next" class="multisteps-form__panel shadow p-4 rounded bg-white js-active" data-animation="scaleIn">
<h3 class="text-center multisteps-form__title">Enter your City</h3>
<div id="form-content" class="multisteps-form__content">
<div id="input-grp-single" class="form-row mt-4">
<div class="col-12"><input class="form-control multisteps-form__input" type="text" placeholder="City"></div>
</div>
<div id="next-button" class="button-row d-flex mt-4"><button class="btn btn btn-primary ml-auto js-btn-next" type="button" title="Next">Next</button></div>
</div>
</div>
<div id="single-form-next-prev" class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
<h3 class="text-center multisteps-form__title">Skills</h3>
<div id="form-content-1" class="multisteps-form__content">
<div id="input-grp-single-1" class="form-row mt-4">
<div class="col-12"><input class="form-control multisteps-form__input" type="text" placeholder="Skill 1"></div>
</div>
<br>
<button id='addButton' class="btn btn-outline-primary text-truncate float-none float-sm-none add-another-btn" data-bss-hover-animate="pulse" type="button">Add Skill<i class="fas fa-plus-circle edit-icon"></i></button>
<div id="next-prev-buttons" class="button-row d-flex mt-4"><button class="btn btn btn-primary js-btn-prev" type="button" title="Prev">Prev</button><button class="btn btn btn-primary ml-auto js-btn-next" type="button" title="Next">Find Results</button></div>
</div>
</div>
<div id="single-form-next-prev-1" class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
<h3 class="text-center multisteps-form__title">Map</h3>
<div id="form-content-2" class="multisteps-form__content">
<div id="mapid"></div>
<div id="next-prev-buttons-1" class="button-row d-flex mt-4"><button class="btn btn btn-primary js-btn-prev" type="button" title="Prev">Prev</button><button class="btn btn btn-primary ml-auto js-btn-next" type="button" title="Next">Next</button></div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
Related
Trying to close the offcanvas with the close button inside the offcanvas. Right now, I can only close it with the button I opened it with. What did I do wrong? See attached code.
(function mainScript() {
"use strict";
const offcanvasToggle = document.querySelector('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
const offcanvasCollapse = document.querySelector(".offcanvas-collapse");
offcanvasToggle.addEventListener("click", function () {
offcanvasCollapse.classList.toggle("open");
});
})();
.offcanvas-collapse {
position: fixed;
top: 0;
/* Height of navbar */
bottom: 0;
left: 100%;
width: 30%;
padding: 8px 8px;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
<div id="navbar" class="flex-wrap center">
<div id="nav-toggler-wrapper">
<button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Menu</span>
</button>
</div>
</div>
<div id="sidenav" class="offcanvas offcanvas-collapse">
<div class="offcanvas-header flex-wrap center between">
<button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Close</span>
</button>
</div>
</div>
You need to use querySelectorAll instead of querySelector, because you try to select more then one element and use forEach for apply eventListner to each one like:
(function mainScript() {
"use strict";
const offcanvasToggle = document.querySelectorAll('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
const offcanvasCollapse = document.querySelector(".offcanvas-collapse");
offcanvasToggle.forEach(el => {
el.addEventListener("click", function() {
offcanvasCollapse.classList.toggle("open");
});
});
})();
.offcanvas-collapse {
position: fixed;
top: 0;
/* Height of navbar */
bottom: 0;
left: 100%;
width: 30%;
padding: 8px 8px;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
<div id="navbar" class="flex-wrap center">
<div id="nav-toggler-wrapper">
<button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Menu</span>
</button>
</div>
</div>
<div id="sidenav" class="offcanvas offcanvas-collapse">
<div class="offcanvas-header flex-wrap center between">
<button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Close</span>
</button>
</div>
</div>
so I have this program I am trying to type and I found different ways to write the code but the same popup screen comes how do I call the same function but show different headers when clicked? I have tried to use the same function with different classes called but IDK why everything disappears but I haven't coded javascript very much and still new to me. Please help me the way I am trying to am at is when Wedding button is clicked I want to show "you clicked wedding button" when the birthday is clicked "birthday button"..etc, problem is that the wedding functions is only showing how do I fix it?
/*wedding popup to fill */
const modal = document.querySelector(".modal");
const wedding_POPUP = document.querySelector(".wedding_POPUP");
const closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
wedding_POPUP.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
/* Popup screen for each modal when pressed
buttons when pressed background changes
setup for when clicked*/
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
/*center of page with padding and borders*/
.modal-content {
position: absolute;
top: 359px;
left: 624px;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 34%;
border-radius: 0.5rem;
height: 122%;
}
/*close button layout with hover background*/
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/*style of modal when its open */
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<div id="occasion">
<button id="occassion_layout" class="wedding_POPUP">Wedding</button>
<button id="occassion_layout" class="Birthday_POPUP">Birthday</button>
<button id="occassion_layout" class="Party_POPUP">Holiday</button>
</div>
<div id="Wed_fill">
<span class="close">×</span>
<!--when the wedding button is pusehed what it will show show div boderline-->
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<p>Wedding button clicked</p>
</div>
</div>
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
</div>
Add an attribute to the button that relates it to the corresponding modal, so you can toggle that modal.
/*wedding popup to fill */
const modal = document.querySelector(".modal");
const wedding_POPUP = document.querySelector(".wedding_POPUP");
const closeButton = document.querySelector(".close-button");
function closeModal() {
document.querySelectorAll(".modal").forEach(el => el.classList.remove("show-modal"));
}
function toggleModal(e) {
let modal = document.getElementById(e.target.dataset.rel);
if (modal) {
document.querySelectorAll(".modal").forEach(el => {
if (el == modal) {
el.classList.toggle("show-modal");
} else {
el.classList.remove("show-modal");
}
});
}
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal(event);
}
}
wedding_POPUP.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeModal);
window.addEventListener("click", windowOnClick);
/* Popup screen for each modal when pressed
buttons when pressed background changes
setup for when clicked*/
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
/*center of page with padding and borders*/
.modal-content {
position: absolute;
top: 359px;
left: 624px;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 34%;
border-radius: 0.5rem;
height: 122%;
}
/*close button layout with hover background*/
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/*style of modal when its open */
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<div id="occasion">
<button id="occassion_layout" class="wedding_POPUP" data-rel="wedding_modal">Wedding</button>
<button id="occassion_layout" class="Birthday_POPUP" data-rel="birthday_modal">Birthday</button>
<button id="occassion_layout" class="Party_POPUP" data-rel="holiday_modal">Holiday</button>
</div>
<div id="Wed_fill">
<span class="close">×</span>
<!--when the wedding button is pusehed what it will show show div boderline-->
<div id="wedding_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<p>Wedding button clicked</p>
</div>
</div>
</div>
<div id="birthday_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
</div>
<div id="party_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
</div>
This code isn't fully working, but I have to leave now.
I took liberty to format a bit using flex.
I suggest a "toggle" for display using data attribute so you only have to "change" it not add/remove it - and you can use that in the CSS (I used "show" and "hide" values.
To open a modal, I used a "target" data as a class and selected by that - it could be a number of values/combinations.
I set up a "close" event for the X and then triggered them all to close when a button was clicked so if one is already open we only have one at a time open.
I did away with all the "position" css and used flex instead of px this way and that etc. which is hard to maintain from my experience.
Something you can build upon I think.
const modals = document.querySelectorAll(".modal");
const actionButtons = document.querySelectorAll(".modal-activator");
const closeButtons = document.querySelectorAll(".close-button");
/* not used but could trigger the closeEvent etc. */
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
// create close event
const closeEvent = new Event('close-modal');
// Listen for the event.
closeButtons.forEach(btn => btn.addEventListener('close-modal', function(event) {
let myModal = event.target.closest(".modal");
myModal.dataset.showToggle = "hide";
}, false));
actionButtons.forEach(btn => btn.addEventListener('click', event => {
// console.log(event.target.getAttribute("data-target-modal"));
const dataAttrMap = event.target.dataset;
const modalSelector = ".modal." + dataAttrMap.targetModal;
// console.log(modalSelector);
closeAllModals(closeButtons);
const modalTarget = document.querySelector(modalSelector);
modalTarget.dataset.showToggle = "show";
}));
closeButtons.forEach(btn => btn.addEventListener('click', function(event) {
let myModal = event.target.closest(".modal");
myModal.dataset.showToggle = "hide";
}, false));
function closeAllModals(buttons) {
buttons.forEach(btn => btn.dispatchEvent(closeEvent));
}
.contaner {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: start;
}
.occasion.contaner {
flex-direction: row;
column-gap: 0.5em;
align-self: flex-start;
margin-bottom: 1rem;
}
.modal {
display: flex;
align-items: flex-start;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
}
.modal-content {
border-radius: 0.5rem;
background-color: white;
padding: 1rem 1.5rem;
margin-top: 1rem;
margin-left: 0.5rem;
margin-bottom: 1rem;
}
.close-button {
align-self: flex-start;
margin-left: auto;
width: 1.5rem;
line-height: 1.5rem;
cursor: pointer;
text-align: center;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/* not used
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
*/
.modal[data-show-toggle="show"] {
opacity: 1;
display: flex;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.modal[data-show-toggle="hide"] {
display: none;
}
[data-target-modal]{padding: 0.5rem;border-radius: 0.5rem;}
[data-target-modal="wedding"]{background-color:pink;border-color:#ff8888;}
[data-target-modal="holiday"]{background-color:#AAAAFF;}
<div class="page container">
<div id="occasion" class="occasion contaner">
<button class="wedding_POPUP modal-activator" data-target-modal="wedding" type="button">Wedding</button>
<button class="Birthday_POPUP modal-activator" data-target-modal="birthday" type="button">Birthday</button>
<button class="Party_POPUP modal-activator" data-target-modal="holiday" type="button">Holiday</button>
</div>
<div class="container">
<div class="modal wedding" data-show-toggle="hide">
<div class="modal-content">
<p>Wedding button clicked</p>
</div>
<span class="close-button">×</span>
</div>
<div class="modal birthday" data-show-toggle="hide">
<div class="modal-content">
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
<span class="close-button">×</span>
</div>
<div class="modal holiday" data-show-toggle="hide">
<div class="modal-content">
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
<span class="close-button">×</span>
</div>
</div>
</div>
I am building a quiz which will consist of a number of slides, while going between the slides using I want to apply a transition similar to this site where the next card slides in slightly.
I have tried applying the transition on my .active classes but this doesn't appear to have any affect.
CodePen
HTML:
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
CSS:
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
display: block;
margin-left: 0px;
transition: 2s;
/*transform:translate(0);*/
}
JS:
$(document).ready(function() {
$( ".first-btn" ).click(function() {
console.log( "Handler for .click() called." );
$(".card1").toggleClass('active');
$(".card2").toggleClass('active');
});
});
It's because your active card was not showing, I've tried to show your card2 first and call setTimeout to toggleClass, and it works:
$(document).ready(function() {
$( ".first-btn" ).on('click', function() {
$(".card1").toggleClass('active');
$(".card2").show();
setTimeout(() => {
$(".card2").toggleClass('active');
}, 10)
});
});
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
transition: all 1s ease-in-out;
display: block;
margin-left: 0px;
/*transform:translate(0);*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
You're using the wrong property, you want
transition-duration: 2s;
But this belongs under .card so it looks more like this:
.card {
display: none;
margin-left: 50px;
transition-duration: 2s;
}
.card.active {
display: block;
margin-left: 0px;
/*transform:translate(0);*/
//more .active css...
}
here's some more info
https://www.w3schools.com/csSref/css3_pr_transition-duration.asp
I believe this is what you are missing:
.card.active {
display: block;
margin-left: 0px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
You could check the following fiddle or check codepen fork:
$(document).ready(function() {
$( ".first-btn" ).click(function() {
console.log( "Handler for .click() called." );
$(".card1").toggleClass('active');
$(".card2").toggleClass('active');
});
});
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
display: block;
margin-left: 0px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
/*transform:translate(0);*/
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
See link for more details regarding CSS Animations and Transitions
I need to make a task board website for a school project and need to have a function to delete only one of the notes that was clicked on. A little overview of the code below - user inputs a value, a function puts the values in an object that is pushed into an array and then saved in local storage (using it is required for the project, just mentioning). After the value is saved, the function runs a For loop on the array and prints the notes with the values on them. That works just fine for me. What's the direction I should take with making the delete function? Any help or general direction would be really appreciated, as I feel like I'm really struggling over something that should be rather simple.
// local storage function
var taskArray = [];
$(document).ready(function loadNotes() {
if (localStorage.getItem("user tasks") === null) {
console.log("local storage is empty");
var alertDiv = document.getElementById("addAlert")
alertDiv.innerHTML +=
`
<div class="alert alert-success alert-dismissable show hide">
<strong>Welcome to our task board!</strong> Enter your task, and the app will keep track of it for you, even if you leave the page!
</div>
`
} else {
var mainDiv = document.getElementById("maindiv");
var arrayFromStorage = localStorage.getItem('user tasks');
arrayFromStorage = JSON.parse(arrayFromStorage);
$("#maindiv").empty();
for (var index = 0; index < arrayFromStorage.length; index++) {
mainDiv.innerHTML +=
`
<span class="relative">
<img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
<span class="centerOnNote" id="textspan" onclick="deleteNote(this)">
<span class="fas fa-times-circle"></span>
<br>
Your task = ${arrayFromStorage[index].name}
Complete by = ${arrayFromStorage[index].date}
</span>
`
}
}
})
function saveToLocalStorage() {
debugger;
var taskName = document.getElementById("task").value;
var taskDate = document.getElementById("date").value;
var task = {
name: taskName,
date: taskDate
}
taskArray.push(task);
var arrayToString = JSON.stringify(taskArray);
localStorage.setItem("user tasks", arrayToString);
var mainDiv = document.getElementById("maindiv");
var arrayFromStorage = localStorage.getItem('user tasks');
arrayFromStorage = JSON.parse(arrayFromStorage);
$("#maindiv").empty();
for (var index = 0; index < arrayFromStorage.length; index++) {
mainDiv.innerHTML +=
`
<span class="relative">
<img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
<span class="centerOnNote" id="textspan" onclick="deleteNote(this)">
<span class="fas fa-times-circle"></span>
<br>
Your task = ${arrayFromStorage[index].name}
Complete by = ${arrayFromStorage[index].date}
</span>
`
}
}
function deleteNote(note) {
}
.background-image {
background-image: url("../assets/images/wallpaper/chalkboard.jpg");
background-size: 100%;
}
.pageheader {
color: white;
text-align: center;
padding: 30px;
font-size: 80px;
}
.centerInput {
margin: 10px 25px 30px 25px;
}
.imgContainer {
width: 70%;
margin: auto;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
.fade-in.start {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
.imgSpacing {
padding: 2% 2% 2% 35px;
margin: auto;
position: relative;
}
.relative {
position: relative;
}
.centerOnNote {
position: absolute;
top: 50%;
left: 45%;
transform: translate(-50%, -45%);
overflow-y: scroll;
overflow-x: hidden;
}
#textspan {
width: 150px;
height: 160px;
overflow-y: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<title></title>
</head>
<body class="background-image">
<h1 class="pageheader">My Task Board</h1>
<form class="" action="index.html" method="post">
<div class="container">
<div class="row">
<input type="text" class="form-control col-sm centerInput" id="task" placeholder="Enter a Task">
<input type="date" class="form-control col-sm centerInput" id="date" value="">
</div>
<div class="form-group">
<input type="button" class="form-control btn btn-success" id="submit" value="Submit Task" onclick="saveToLocalStorage()">
</div>
<div class="form-group">
<input type="reset" class="form-control btn btn-success " id="reset" value="Reset Form">
</div>
<div id="addAlert">
</div>
</div>
</form>
<!-- style="width: 70%; margin: auto; position: relative;" -->
<div class="imgContainer" id="maindiv">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>
Instead of passing this to deleteNote which doesn't really help you, pass the current index:
onclick="deleteNote(${index})"
that way you can .splice() out that index from the array and rerender / save to localStorage.
PS: That string building is not the most elegant version though, instead you could use the DOM API and .addEventListener.
I have this simple set of CSS animations that I want to run indefinitely. But for some reason, it only runs twice and stops.
Here's a CodePen example.
Here is how I implement it using Jquery (this is also seen on the code)
$('#slide1').one(animationEnd, () => {
$('#slide1').css('display', 'none').removeClass('animate-1')
$('#slide2').css('display', '').addClass('animate-2')
})
$('#slide2').one(animationEnd, () => {
$('#slide2').css('display', 'none').removeClass('animate-2')
$('#slide3').css('display', '').addClass('animate-3')
})
$('#slide3').one(animationEnd, () => {
$('#slide3').css('display', 'none').removeClass('animate-3')
$('#slide1').css('display', '').addClass('animate-1')
})
See that #slide3 should revert to #slide1 for animation. It did, but it stops after 2 cycles.
You have defined counter variable as const, but it needs to be let to allow later reassignment.
let counter = 0;
Also you need to use $.on instead of $.one when binding to the animation end. $.on is used to bind handler to some event (every time it occurres), while $.one is used for one time binding only (run the handler first time the event occurres, but no more that that).
Here is your updated example:
https://codepen.io/anon/pen/WXNOKQ
answer already given and accepted, this is only for infos since the javaScript takes only three boxes into account.
animation-delay can be used to keep animation looping infinitly:
body {
color: #FFFFFF;
background-color: #27292d;
overflow: hidden;
background: #27292d url('bg.jpg') no-repeat fixed center;
font-family: 'Roboto', sans-serif;
}
.slider-container {
position: absolute;
right: 0;
top: 40%;
}
.slider-content {
position: relative;
font-size: 32px;
text-transform: uppercase;
}
.boxes {
float: left;
padding: 10px 20px;
margin: 5px;
position: relative;
}
.sub-box {
clear: both;
margin-left: 60px;
}
.sub-box span {
color: #000000;
padding: 10px 20px;
background-color: #FFFFFF;
}
.box1 {
background-color: #FF4F80;
}
.box2 {
background-color: #4CA2F0;
}
.box3 {
background-color: #53CEC8;
}
#keyframes heartbeat {
0% {
transform: translate(100px, 200px) scale(0)
}
50% {
transform: translate(100px, 200px) scale(0)
}
60% {
transform: translate(-100px) scale(1.5)
}
70% {
transform: translate(-100px) scale(1.5)
}
80% {
transform: translate(-100px) scale(1.5)
}
100% {
transform: translate(100px, -200px) scale(0)
}
}
.slider-single {
position: absolute;
right: 0;
width: 400px;
height: 50px;
margin: 20px;
transform: scale(0);
}
.animate-1 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -3s infinite;
}
.animate-2 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -1s infinite;
}
.animate-3 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s 1s infinite;
}
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single animate-2">
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single animate-3">
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single" style='display:none;'>
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single" style='display:none;'>
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>