We Keep Coding

Hide elements using drag and drop

i was wandering how i can hide elements in a div, which has the same class name as another div. i do not want to change the class name, because it will effect my JavaScript. So i want one div acting as like a folder, it is kinda like a drag and drop system. I used a tutorial from Web Dev Simplified. Here is the tutorial if anyone is interested. https://www.youtube.com/watch?v=jfYWwQrtzzY&ab_channel=WebDevSimplified
const draggables = document.querySelectorAll('.draggable')
// create const with class draggable what you can drag
const containers = document.querySelectorAll('.container')
const containerx =document.querySelector('.containerx')
// containers where to drop.
// loop through each pages
draggables.forEach(draggable => {
//DRAGSTRT EVENT
draggable.addEventListener('dragstart',()=> {
draggable.classList.add('dragging')
})//what happends when we start draghging element
// DRAGEND EVENT
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging')
})
})
// Allow elements to be dropped in containers
containers.forEach(container=>{
container.addEventListener('dragover', e =>{
e.preventDefault() // enable dropping remove default
const draggable = document.querySelector('.dragging')
//1 element willl have 'dragging' bc one selected
container.appendChild(draggable)
//SORT
const afterElement = getDragAfterElement(container, e.clientY)
if(afterElement ==null){
container.appendChild(draggable)
}else{
container.insertBefore(draggable,afterElement)
}
})
})
//sorting mouse position
function getDragAfterElement(container, y)
{ //every draggable that we are not dragging
const draggableelements = [...container.querySelectorAll('.draggable:not(.dragging)')]
return draggableelements.reduce((closest,child)=> {
const box = child.getBoundingClientRect()
const offset =(( y - box.top) - box.height) / 2 //mouse position between center boxes
if (offset < 0 && offset > closest.offset)
{
return{offset: offset,element: child}
}else{
return closest
}
},{offset: Number.NEGATIVE_INFINITY}).element
}
body{
margin:0;
background-color: rgb(29, 29, 29);
;
}
/* NAV */
/* NAV STRT */
nav {
list-style-type: none;
font-family:sans-serif;
margin: 0;
padding: 0;
width: 240px;
background-color: #3a3a3a;
height: 100%; /*full height */
position:absolute; /* Make it stick, even on scroll */
overflow: auto; /* enable scrolling if the sidenav has too much content */
left: 0;
font-size: 16px;
}
li a {
display: block; /* links as block elements, whole link area click */
color:white;
padding: 8px 1px; /*padding between pages*/
padding-top:20px;
text-decoration: none;
text-align: center;
background-color: #3a3a3a;
}
li h1,h3{
background-color: #3a3a3a;
}
ul{
list-style-type: none;
background-color: #3a3a3a;
}
/* change link color on hover */
li a:hover {
background-color:#555;
color: #F3ECEC;
}
li:hover {
background-color: aqua;
}
.title {
text-align: center;
color:white;
}
.title1
{
text-align: center;
color:white;
background-color: #3C3939;
padding-top: 20px;
}
.divider{
border-top: 3px solid #bbb;
}
/* NAV END */
/* Nav end */
/* FOLDER CONTAINER */
.container {
background-color: #333;
padding: 1rem;
margin-top: 1rem;
position: relative;
left:0;
min-height: 274px;
max-height: 800px;
min-width:1000px;
display: grid;
grid-template-columns: auto auto auto auto;
overflow-y: scroll;
overflow-x: hidden;
}
.draggable{
background-color:rgba(255, 245, 245, 0.945);
padding: 1rem;
margin-top: 1rem;
border:solid black;
cursor: move; /* change cursor */
width:128px;
height: 174px;
display: grid;
}
.draggable.dragging{
opacity: 0.5;
}
.containerx{
background-color: #3a3a3a;
position: absolute;
left:35%;
top: 30%;
height:600px;
}
.containery{
background-color: #3a3a3a;
width: 1032px;
position: relative;
left:35%;
height:400px;
}
/* END FOLDERS */
/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* SCrollbar end */
<!DOCTYPE html>
<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>
<link rel="stylesheet" href="test.css">
<script src="test.js" defer></script>
</head>
<body>
<nav>
<ul>
<li><div class="title"><h1>Organize</h1></div></li>
<li>Folders</li>
<li>Timeline</li>
<li>Pages</li>
<li>Meetings</li>
<li><div class="title1"><h3>documents</h3></div></li>
<li></li>
</ul>
</nav>
<div class="containery">
<div class="container" id="hidden" name="test">
</div>
</div>
<div class="containerx">
<div class="container">
<p class="draggable" draggable="true">3</p>
<p class="draggable" draggable="true">4</p>
<p class="draggable" draggable="true">1</p>
<p class="draggable" draggable="true">2</p>
<p class="draggable" draggable="true">3</p>
<p class="draggable" draggable="true">4</p>
<p class="draggable" draggable="true">1</p>
<p class="draggable" draggable="true">2</p>
</div>
</div>
</body>
</html>

how to close popup by clicking outside popup and how to remove class on clicking outside popup

I used some random tutorial to add popup to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one.
I've tried adding an id close to a div outside popup but it closes the popup when clicked inside the popup also, Can i get some help
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align:center">
<h2>Popup</h2>
<a class="show-cta" id="open" href="javascript:void(0)">Show</a>
<!-- model popup start -->
<div class="modal-container" id="modalContainer">
<div class="modal">
</div>
</div>
</body>
</html>
basic model popup css
<style>
a.show-cta{
background-color: #ea1420;
color: #fff;
padding: 6px 15px;
display: inline-block;
border-radius: 0;
text-transform: uppercase;
font-weight: 550;
font-size: 16px;
margin-top: 15px;
text-decoration: none;
}
.modal-container{
background-color: rgba(0, 0, 0, .3);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
pointer-events: none;
opacity: 0;
}
.modal-container.show{
pointer-events: auto;
opacity: 1;
}
.modal{
background-color: #fff;
width: 85rem;
height: 470px;
box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .2);
}
</style>
How to remove class 'show' by clicking outside popup.
<script>
window.onclick=function(){
const open = document.getElementById('open');
const modalContainer = document.getElementById('modalContainer');
const close = document.getElementById('close');
```
open.addEventListener('click', () => {
modalContainer.classList.add('show');
});
close.addEventListener('click', () => {
modalContainer.classList.remove('show');
});
}
</script>

You can add addEventListener on the modal-container
and raise the z-index of the modal

$('#modalContainer').on('click', function(e) {
if (e.target !== this)
return;
$('#modalContainer').remove()
});

when click on the one dropdown other dropdown will be close

I created a dropdown list Javascript Toggle method. I face a problem a problem. The problem is - After clicking one dropdown, another dropdown still opens. I want others dropdown Will to be closed when I click on dropdown. This happen will be each dropdown. How do I do it?
<html>
<head>
<style>
nav{
width:100%;
height:50px;
background-color:#000;
}
button{
height:50px;
margin-left: 10px;
border:0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
div{
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1{
background-color: rgb(0,0,255);
color: #fff;
}
#myDIV2{
background-color: rgb(0,255,0);
color: #000;
}
.show{
display:block;
}
</style>
</head>
<body>
<nav>
<button onclick="myFunction1()">Dropdown1</button>
<button onclick="myFunction2()">Dropdown2</button>
</nav>
<div id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div id="myDIV2">
This Dropdown for dropdown 2
</div>
<script>
function myFunction1() {
var element = document.getElementById("myDIV1");
element.classList.toggle("show");
}
function myFunction2() {
var element = document.getElementById("myDIV2");
element.classList.toggle("show");
}
</script>
</body>
</html>

here is the solution, all the code is commented.
div1 and div2 are hidden by default...
so with .toggle(): https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
I will add the class .show if there isn't
else I will remove the class from it.
so if the user clicks the first time on the button it will show the div1 then if he reclicked will hide, and this is looped (if he reclick)...
with classList.remove, we will hide the other element (always):
if clicked the button N1 will hide div2
if clicked the button N2 will hide div1
let div1 = document.getElementById("myDIV1");
let div2 = document.getElementById("myDIV2");
function myFunction1() {
div1.classList.toggle("show");
// remove the class for the second div
div2.classList.remove("show");
}
function myFunction2() {
div2.classList.toggle("show");
// remove the class for the first div
div1.classList.remove("show");
}
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
div {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
/* this is the class we add and remove or toggle with javascript*/
.show {
display: block;
}
<!DOCTYPE html>
<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>
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<!-- navbar -->
<nav>
<button onclick="myFunction1()">Dropdown1</button>
<button onclick="myFunction2()">Dropdown2</button>
</nav>
<!-- 1 -->
<div id="myDIV1">
This Dropdown for Dropdown 1
</div>
<!-- 2 -->
<div id="myDIV2">
This Dropdown for dropdown 2
</div>
</body>
</html>

You can make this a little easier to scale by using one function for all dropdown menus. This function closes all open drop-downs and toggles the target one.
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
.show {
display: block;
}
<nav>
<button onclick="toggleDropDown('myDIV1')">Dropdown1</button>
<button onclick="toggleDropDown('myDIV2')">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
This Dropdown for dropdown 2
</div>
Here is the same thing, but instead of hard-coding click events, it's better practice to use eventListeners, which get applied through the script after the page loads, like:
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', e => {
let id = e.target.dataset.dropdown
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
})
})
})
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', e => {
let id = e.target.dataset.dropdown
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
})
})
})
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
.show {
display: block;
}
<nav>
<button data-dropdown="myDIV1">Dropdown1</button>
<button data-dropdown="myDIV2">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
This Dropdown for dropdown 2
</div>

Error: How to toggle between hiding and showing [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
body {
margin: 0;
}
a{
text-decoration: none;
color: lightseagreen;
}
a:hover {
color: lightgray;
}
/* whole bar*/
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 9px 12px;
}
/* Menu*/
.navbar_menu {
display: flex;
list-style:none;
padding-left:0;
font-size: 33px;
font-family: initial;
}
.navbar_menu li {
padding: 8px 30px;
display: inline;
}
.navbar_icons {
letter-spacing:30px;
list-style: none;
display: flex;
flex-direction: row;
width: 200px;
color: lightgray;
font-size: 2em;
padding-left:0;
}
/* Icons */
.navbar__icons li {
padding: 8px 12px;
display: none;
}
/* Toggle button */
.navbar_toogleBtn{
position: absolute;
/*화면이 작아졌을때만 나타남*/
display: none;
right: 32px;
font-size: 24px;
}
/*For small screen */
#media screen and (max-width: 768px){
/* Nav container */
.navbar{
flex-direction: column;
align-items: center;
padding: 8px 24px;
}
/* Menu */
.navbar_menu{
display: none;
flex-direction: column;
align-items: center;
padding: 5px 10px;
justify-content: center;
}
.navbar_menu li{
width: 100%;
text-align: center;
display: block;
}
.navbar__menu a {
/* Fill in an entire line so that user can click on any space */
display: block;
}
/* Icons */
.navbar_icons {
justify-content: center;
display: none;
flex-direction: row;
width: 100%;
font-size: 1.5em;
}
/* Toggle button */
.navbar_toogleBtn{
display: block;
}
/* When toggle button is clicked - active state */
.navbar_menu.active,
.navbar_icons.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bar.css" />
<title>first page</title>
<script src="https://kit.fontawesome.com/265fcd9b69.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<img src="logo.png" width="300" height="200">
</div>
<!-- Menu -->
<ul class="navbar_menu">
<!-- info.html, partner.html, free.html를 임의로 적어둠 -->
<li>Home</li>
<li>Information</li>
<li>Partner</li>
<li>Freelencer</li>
<li>Comunity</li>
</ul>
<!-- Icons -->
<ul class="navbar_icons">
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i></li>
<li><a href="register.html"><i class="far fa-registered"></i></li>
</ul>
<!-- Toggle button -->
<a href="#" class="navbar_toogleBtn">
<i class="fas fa-bars"> </i>
</a>
</nav>
<script type="text/javascript" src="bar.js" charset="utf-8" defer></script>
</body>
</html>
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});
Im learning html/css/js from a Youtube video tutorial. Im learning how to write js code but i can't help to solve a problem. I hope you give me the solution guys.
The problem is about add.EventListener. i saw the code in chrome, in console it shows:
"bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null"
I would like to use toggle hide and show with JS.

You are getting this error ( "bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null" ) because you are specifying invalid element classes in js.
Use this:
const toggleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
Since your elements in html are:
<a href="#" class="navbar_toogleBtn">
...
<ul class="navbar_menu">
...
<ul class="navbar_icons">

Without seeing your code, it's hard to be specific as to what your issue is. Null is the absence of a value or object. When we call on a selector that does not exist, we can trigger the same error of null. Check if you are targeting an id that exists or that you are targeting the correct element using it's class.
Cross-reference your code to the following example to see if you may have missed something. This is the most basic of examples.
var box = document.getElementById('box');
document.getElementById('button').addEventListener('click', function(){
if( box.classList.contains('active') ){
box.classList.remove('active');
} else {
box.classList.add('active') ;
}
});
#button {
background-color: orange;
border: 1px solid #000;
color: #000;
padding: 0.5rem 1rem;
cursor: pointer;
}
#box {
margin-top: 2rem;
display: none;
padding: 1rem;
border: 1px solid #000;
}
#box.active {
display: block;
}
<button id="button">CLICK ME</button>
<div id="box">I am a box. Watch me.</div>

Javascript querySelector not working even with my script at the end of the html file

I'm learning javascript and used this youtube video as an example:
https://www.youtube.com/watch?v=RLc8NB2JyxE&
He does not include source code but I have made sure that my code is exactly how it is in the video.
The tutorial walks through how to use html, css, and javascript to make a navbar that changes as you scroll down the screen. Any example of this error I could find had a solution of "put the script at the end of the html body" but mine is already there and I'm not sure why the script is not loading.
this is the error:
app.js:28 Uncaught TypeError: Cannot read property 'style' of null
at app.js:28
at Array.forEach (<anonymous>)
at IntersectionObserver.navCheck (app.js:16)
(anonymous) # app.js:28
navCheck # app.js:16
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>PhotoGem | slogan here</title>
</head>
<body>
<header>
<nav>
<h1>PhotoGem</h1>
<ul>
<li><a data-page="home" href="#">Home</a></li>
<li><a data-page="project" href="#">Project</a></li>
<li><a data-page="contact" href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section data-index="0" class="home">
<h2>Home</h2>
</section>
<section data-index="1" class="project">
<h2>Projects</h2>
</section>
<section data-index="2" class="contact">
<h2>Contact</h2>
</section>
</main>
<script src="./app.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
header {
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
position: sticky;
top: 0px;
background: white;
}
nav {
min-height: 10vh;
margin: auto;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h1,
nav ul {
font-size: 1.5rem;
flex: 1;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
}
nav a {
color: black;
text-decoration: none;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section h2 {
font-size: 5rem;
color: white;
}
.home {
background: linear-gradient(to right top, #f46b45, #eea849);
}
.project {
background: linear-gradient(to right top, #005c97, #363795);
}
.contact {
background: linear-gradient(to right top, #e53935, #e35d5b);
}
.bubble {
position: absolute;
z-index: -2;
background: linear-gradient(to right top orange, yellow);
}
app.js
const sections = document.querySelectorAll("section");
const bubble = document.querySelector(".bubble");
const gradients = [
"linear-gradients(to right top, #f46b45, #eea849)",
"linear-gradients(to right top, #005c97, #363795)",
"linear-gradients(to right top, #e53935, #e35d5b)"
];
const options = {
threshold: 0.7
};
let observer = new IntersectionObserver(navCheck, options);
function navCheck(entries) {
entries.forEach(entry => {
const className = entry.target.className;
const activeAnchor = document.querySelector(`[data-page=${className}]`);
const gradientIndex = entry.target.getAttribute("data-index");
const coords = activeAnchor.getBoundingClientRect();
const directions = {
height: coords.height,
width: coords.width,
top: coords.top,
left: coords.left
};
if (entry.isIntersecting) {
bubble.style.setProperty("left", `${directions.left}px`);
bubble.style.setProperty("top", `${directions.top}px`);
bubble.style.setProperty("width", `${directions.width}px`);
bubble.style.setProperty("height", `${directions.height}px`);
}
});
}
sections.forEach(section => {
observer.observe(section);
});