I am only attempting to do a simple modal, and nothing is working right accept the HTML and CSS,
Javascript acts like it is not connected to the HTML sheet at all.
It has a button that i am supposed to click and the event handler should make the popup open but instead, the popup shows up immediately after the page loads, which is totally contrary to my script. Here is the code:
const pop = document.getElementById('pop')
const x = document.getElementById('x')
const overlay = document.getElementById('overlay')
const modal = document.getElementById('modal')
const open = function() {
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
}
const close = function() {
modal.classList.add('hidden');
overlay.classList.add('hidden');
}
pop.addEventListener('click', open, false);
x.addEventListener('click', close, false);
overlay.addEventListener('click', close, false);
.pop {
padding: 10px 15px;
background: #4e8b8f;
border: none;
border-radius: 1.2px;
font-family: Impact;
color: black;
margin-top: 10px;
cursor: pointer;
}
.modal {
background-color: #4e8b8f;
border-radius: 1.3px;
padding: 1rem;
width: 15rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
font-family: Impact;
}
.x {
position: absolute;
top: 0;
right: 0;
background-color: transparent;
border: none;
border-radius: 1px;
color: red;
font-size: 10px;
cursor: pointer;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(3px);
border-radius: 2px;
height: 100%;
width: 100%;
z-index: 5;
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<!-----tab header---------------->
<head>
<title>Jalloh Web Construction Home</title>
<link href=Afri-culture.css rel="stylesheet">
<script src="Afri-culture.js"></script>
<link rel="shortcut icon" type="image/jpg" href="jalloh white.jpg">
<meta charset="utf-8" />
</head>
<header name="container">
<!-----nav bar------>
<div class="container">
<img id="clarkweb" src="jalloh.jpg" alt="jalloh web construction">
<nav>
<ul>
<!----- <li>Home</li>----->
<li>About Me</li>
<li>My Hobbies</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
</header>
<h1>Welcome To My Portfolio</h1>
<button class="pop" id="pop">Enter</button>
<div class="modal hidden">
<br>
<button class="x" id="x">x</button>
<img src="smokegif.gif" id="smoke">
<h3>Under Construction</h3>
</div>
<div class="overlay hidden"></div>
<body id=body>
<br>
</body>
</div>
</div>
</div>
<hr>
<div class="container2">
<footer>
<img id="clarktwo" src="jalloh white.jpg" alt="clark web">
</footer>
</div>
</html>
You use document.getElementById('modal'):
const pop = document.getElementById('pop')
...
const modal = document.getElementById('modal')
const open = function() {
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
}
...
pop.addEventListener('click', open, false);
But you don't have id="modal" inside set for it:
<div class="modal hidden">
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Using Javascript to open and close a navbar but it's not working in my new project
When i use devtools i can see the function active but my nav bar does not open or close. So funny because i've used it for an old project which is working fine. I have no idea why this time it's frustrating. I need your help please if any
This is the js code
let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
Menupopupup.classList.add("Openmenudrops");
document.body.style.overflow = "hidden";
}
function closedropdownheadernav() {
Menupopupup.classList.remove("Openmenudrops");
document.body.style.overflow = "auto";
}
This is my HTML
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="opendropdownheadernav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt=""
/></div></button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<button id="Closescroll" type="button" class="closemenubutton" onclick="closedropdownheadernav()"><span class="closemenuspan">✕</span></button>
This is my Css
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
The element UL must be closed with /ul. As for javascript, you need to find the element by id and then use style.display and make it equal to the desired value. I attached the neatified code below. It does what you need and is made shorter.
<!DOCTYPE html>
<html>
<head>
<style>
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="openNav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt="">
</div>
</button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<li>Code</li>
<li>Goes</li>
<li>Here</li>
</ul>
<button id="Closescroll" type="button" class="closemenubutton" onclick="openNav()">
<span class="closemenuspan">✕</span>
</button>
<script>
let navOpened = false;
function openNav() {
if (navOpened) {
navOpened = false;
document.getElementById("dropdownheadernav").style.display = 'none';
} else {
navOpened = true;
document.getElementById("dropdownheadernav").style.display = 'initial';
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: blue;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: red;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #04AA6D;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>
<div class="mobile-container">
<div class="topnav">
Navbar
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
</div>
</body>
<html>
So i don't have a clue how to work this out.
I want to have it work like so: If you click on one paw the modal opens and if you click on the second paw the modal of paw 1 closes. What do i have to add to the script to make it work? Right now the modal opens in th ebackground of the curretn active modal.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.infobox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
z-index: 200;
background-color: #D0D0CE;
width: 500px;
max-width: 80%;
}
.infobox.active {
transform: translate(-50%, -50%) scale(1);
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .7);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
.title {
padding: 0 10px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.infoheadline {
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
padding-left: 5px;
}
.infotext {
padding: 10px 15px;
font-family: 'Roboto', sans-serif;
}
.linesmall {
width: 20%;
height: 5px;
margin-left: 10px;
background-color: #FABB00;
}
.paw {
width: 42px;
height: 42px;
padding: 16px;
z-index: 1;
filter: drop-shadow(0px 0px 5px #ffffff);
}
</style>
</head>
<body>
<!--Pfote 1 Start-->
<div class="item one">
<div id="overlay"></div>
<input type="image" data-modal-target="#info1" src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png" alt="Pfote" class="paw">
<div id="info1" class="infobox eins">
<div class="title">
<h3 class="infoheadline">3.500 mal tierischer</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel, Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...</p>
</div>
</div>
<!--Pfote 1 Ende-->
<!--Pfote 2 Start-->
<div class="item two">
<div id="overlay"></div>
<input type="image" data-modal-target="#info2" src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png" alt="Pfote" class="paw">
<div id="info2" class="infobox zwei">
<div class="title">
<h3 class="infoheadline">588 Mrd. mal klimafreundlicher</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen CO<sub>2</sub> – und entziehen sie damit der Atmosphäre. (Zum Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).</p>
</div>
</div>
<!--Pfote 2 Ende-->
<script type="text/javascript">
//Start Modal One
const openModalButtonOne = document.querySelectorAll('[data-modal-target]')
const closeModalButtonOne = document.querySelectorAll('[data-close-button]')
const overlayOne = document.getElementById('overlay')
openModalButtonOne.forEach(button => {
button.addEventListener('click', () => {
const info1 = document.querySelector(button.dataset.modalTarget)
openModal(info1)
})
})
overlayOne.addEventListener('click', () => {
const info1 = document.querySelectorAll('.infobox.active')
info1.forEach(info1 => {
closeModal(info1)
})
})
closeModalButtonOne.forEach(button => {
button.addEventListener('click', () => {
const info1 = button.closest('.infobox')
closeModal(info1)
})
})
function openModal(info1) {
if (info1 == null) return
info1.classList.add('active')
overlayOne.classList.add('active')
}
function closeModal(info1) {
if (info1 == null) return
info1.classList.remove('active')
overlayOne.classList.remove('active')
}
//Start Modal Two
const openModalButtonTwo = document.querySelectorAll('[data-modal-target]')
const closeModalButtonTwo = document.querySelectorAll('[data-close-button]')
const overlayTwo = document.getElementById('overlay')
openModalButtonTwo.forEach(button => {
button.addEventListener('click', () => {
const info2 = document.querySelector(button.dataset.modalTarget)
openModal(info2)
})
})
overlayTwo.addEventListener('click', () => {
const info2 = document.querySelectorAll('.infobox.active')
info2.forEach(info2 => {
closeModal(info2)
})
})
closeModalButtonTwo.forEach(button => {
button.addEventListener('click', () => {
const info2 = button.closest('.infobox')
closeModal(info2)
})
})
function openModal(info2) {
if (info2 == null) return
info2.classList.add('active')
overlayTwo.classList.add('active')
}
function closeModal(info2) {
if (info2 == null) return
info2.classList.remove('active')
overlayTwo.classList.remove('active')
}
</script>
</body>
</html>```
I think you tried to overcomplicate the stuff. Here's a modified version of your code that behaves as expected:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
.infobox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
z-index: 200;
background-color: #d0d0ce;
width: 500px;
max-width: 80%;
}
.infobox.active {
transform: translate(-50%, -50%) scale(1);
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
.title {
padding: 0 10px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.infoheadline {
text-transform: uppercase;
font-family: "Roboto Condensed", sans-serif;
padding-left: 5px;
}
.infotext {
padding: 10px 15px;
font-family: "Roboto", sans-serif;
}
.linesmall {
width: 20%;
height: 5px;
margin-left: 10px;
background-color: #fabb00;
}
.paw {
width: 42px;
height: 42px;
padding: 16px;
z-index: 1;
filter: drop-shadow(0px 0px 5px #ffffff);
}
</style>
</head>
<body>
<div id="overlay"></div>
<!--Pfote 1 Start-->
<div class="item one">
<input
type="image"
data-modal-target="#info1"
src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png"
alt="Pfote"
class="paw"
/>
<div id="info1" class="infobox eins">
<div class="title">
<h3 class="infoheadline">3.500 mal tierischer</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">
Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel,
Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...
</p>
</div>
</div>
<!--Pfote 1 Ende-->
<!--Pfote 2 Start-->
<div class="item two">
<input
type="image"
data-modal-target="#info2"
src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png"
alt="Pfote"
class="paw"
/>
<div id="info2" class="infobox zwei">
<div class="title">
<h3 class="infoheadline">588 Mrd. mal klimafreundlicher</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">
Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen
CO<sub>2</sub> – und entziehen sie damit der Atmosphäre. (Zum
Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).
</p>
</div>
</div>
<!--Pfote 2 Ende-->
<script type="text/javascript">
//Start Modal One
const openModalButtons = document.querySelectorAll("[data-modal-target]");
const closeModalButtons = document.querySelectorAll(
"[data-close-button]"
);
const overlay = document.querySelector("#overlay");
const closeActiveModals = () => {
const info = document.querySelectorAll(".infobox.active");
info.forEach((info) => {
closeModal(info);
});
};
openModalButtons.forEach((button) => {
button.addEventListener("click", () => {
closeActiveModals();
const info = document.querySelector(button.dataset.modalTarget);
openModal(info);
});
});
overlay.addEventListener("click", closeActiveModals);
closeModalButtons.forEach((button) => {
button.addEventListener("click", () => {
const info = button.closest(".infobox");
closeModal(info);
});
});
function openModal(info) {
if (info == null) return;
info.classList.add("active");
overlay.classList.add("active");
}
function closeModal(info) {
if (info == null) return;
info.classList.remove("active");
overlay.classList.remove("active");
}
</script>
</body>
</html>
Note that you don't need to add event listeners twice as you're querying the DOM with querySelectorAll and then iterating through them to add event listeners. Also, for the same exact reason, you don't need to add all of the functions such as openModal twice neither.
Just don't try to make it complicated. It's very simple.
easy solution handle the click event on overlay, and stop click event propagation from the modal itself
I am creating a Kanban Board in HTML/JS/CSS and am close to finishing my MVP here. Everything is working as expected, except for one thing. When I create a new task, I am able to drag it (seemingly) but not DROP it into any other columns. The sample tasks I have do not have this problem and I am ripping my hair out trying to figure out what the issue is. When I attempt to drag and drop newly created tasks into other columns, I get this error:
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at drop (/script.js:31:13)
at HTMLDivElement.ondrop (/:45:112)
I am using basic drag and drop API stuff for HTML and JS and literally only need to make this work in order to finish my MVP. Any help is appreciated. NOTE: The line numbers in the above error change based on what column I try to drop the new task into but the error itself stays the same.
Here is my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Christopher's Kanban Board</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="new-task-window" id="new_task_form">
<div class="header">
<div class="title">New Task</div>
<button class="btn-close-window" data-target="#new_task_form">X</button>
</div>
<div class="body">
<input type="text" id="new-task-name" />
<input type="submit" value="New Task" id="new-task-submit" />
</div>
</div>
<!--Kanban Board-->
<div class="kanban-container">
<div class="kanban-container-section" id="todo" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>To Do</strong>
<div class="task-button-block">
<button class="task-button" id="task-button" data-target="#new_task_form">+ New Task</button>
</div>
<div class="task" id="task1" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #1</span>
<!--<button class="edit_button" id="edit_button">Edit</button>-->
</div>
<div class="task" id="task2" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #2</span>
</div>
<div class="task" id="task3" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #3</span>
</div>
<div class="task" id="task4" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #4</span>
</div>
</div>
<div class="kanban-container-section" id="inprogress" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>In Progress</strong>
</div>
<div class="kanban-container-section" id="done" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>Done</strong>
</div>
<div class="kanban-container-section" id=" blocked" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>Blocked</strong>
</div>
</div>
<div id="overlay"></div>
<script src="script.js"></script>
</body>
</html>
script.js:
const task = document.querySelector('.task');
const buttons = document.querySelectorAll("[data-target]");
const close_buttons = document.querySelectorAll(".btn-close-window");
//Allow the New Task Button to open the New Task Creation Window.
buttons.forEach(btn => {
btn.addEventListener('click', () => {
document.querySelector(btn.dataset.target).classList.add("active");
overlay.classList.add("active");
});
});
close_buttons.forEach((btn) => {
btn.addEventListener('click', () => {
document.querySelector(btn.dataset.target).classList.remove("active");
overlay.classList.remove("active");
});
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
const new_task_submit = document.getElementById("new-task-submit");
if(new_task_submit) {
new_task_submit.addEventListener('click', createTask);
}
function createTask() {
const task_div = document.createElement("div");
const input_value = document.getElementById("new-task-name").value;
//Take the text from the above input and create a task with that text.
const text = document.createTextNode(input_value);
task_div.appendChild(text);
//Add the proper class (task in this case) to the newly created task.
task_div.classList.add("task");
//Add the draggable attribute to the newly created task and set it to true to allow drag and drop.
if(task_div){
task_div.setAttribute("draggable", "true");
task_div.setAttribute("contenteditable", "true");
}
//task_div.innerHTML += `
//<div class="task" id="${input_value.toLowerCase().split(" ").join("")}"
//draggable="true" ondragstart="drag(event)>
//<span contenteditable="true">${input_value}</span>
//</div>
//`
//Add the new task to the To Do section of the Kanban Board.
const todo = document.getElementById("todo");
todo.appendChild(task_div);
document.getElementById("new-task-name").value = "";
new_task_form.classList.remove("active");
overlay.classList.remove("active");
}
style.css (the error would indicate that this file is not the problem):
.kanban-container {
display: grid;
grid-auto-columns: 250px;
grid-auto-flow: column;
grid-gap: 8px;
height: 100vh;
overflow: auto;
}
.kanban-container-section {
background: #EBEBEB;
border-radius: 3px;
display: grid;
grid-auto-rows: max-content;
grid-gap: 10px;
padding: 10px;
}
.kanban-container-section strong {
background: #2C89BF;
font-size: 16px;
margin: 0 0 12px 0;
padding: 10px;
}
.task {
background: #FFFFFF;
box-shadow: 0 1px 0 rgba(9,30,66,.25);
border-radius: 3px;
padding: 10px;
}
.task-button {
width: 40%;
background: #FFFFFF;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(9,30,66,.25);
border: 0.1rem;
cursor: pointer;
}
.task.button:active {
transform: scale(0.9);
}
.btn-close-window {
padding: 0.5rem 1rem;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
.new-task-window {
width: 450px;
position: fixed;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
z-index: 2;
background-color:#FFFFFF;
}
.new-task-window.active {
top: 15%;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid #ccc;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
#overlay.active {
display: block;
}
#new-task-name, #new-task-submit {
padding: 1rem 1rem;
width: 90%;
margin: 0.25rem;
align-items: center;
}
#new-task-submit {
background-color: #2C89BF;
border: none;
color: #FFFFFF;
align-items: center;
}
Again, if anyone knows what my issue is here, the help is greatly appreciated. Thanks!
LTLFTP here.
I finally have a problem seemingly only you can solve. I'm trying to create an accordion style menu and I would like a transition effect. The problem is, whenever I change the max-height property, the transitions happen in the wrong order, the transition durations are not the same, and a mysterious delay shows up.
Any insight into this little problem would be wonderful. Thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
.content {
margin-top: 50px;
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #fefefe;
border: 1px solid #888;
padding: 1em;
}
.title {
text-align: center;
}
.dresser {
border: 1px solid #888;
padding: auto 1em;
}
.dresser h2 {
margin: 0px;
padding: 2px;
background-color: #888;
color: #fefefe;
cursor: pointer;
}
.drawer {
padding: 0em 1em;
overflow-y: hidden;
max-height: 0px;
transition-property: max-height;
transition-duration: 2s;
}
</style>
</head>
<body onload="enableDresser();">
<div class="content">
<div class="title">
<h1>Dashboard</h1>
</div>
<div class="dresser">
<h2 class="drawerLabel"> <span>▸</span> Contact</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Links</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Documents</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<!-- <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>-->
</div>
</div>
<script type="text/javascript">
var drawerLabels = document.getElementsByClassName("drawerLabel");
//console.log(drawerLabels);
function enableDresser() {
for (var i = 0; i < drawerLabels.length; i++) {
drawerLabels[i].onclick = function() {
openDrawer(this);
}
}
openDrawer(drawerLabels[1]);
}
function closeDresser() {
for (i=0; i<drawerLabels.length; i++) {
drawerLabels[i].firstElementChild.innerHTML = "▸";
drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
}
}
function openDrawer(labelElement) {
closeDresser();
labelElement.firstElementChild.innerHTML = "▾";
labelElement.nextElementSibling.style.maxHeight = "1000px";
}
</script>
</body>
</html>