I work with categorys at web page, an i build next view to show categories. And i create one solution how to categorize all data in app.
But i have issues which i cant resolve.
So problem is, when i first time open my web page, all categories from list visible, and i want, categories need only visible after category items press.
My code:
$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');
$('.category_item').click(function () {
var catProduct = $(this).attr('category');
console.log(catProduct);
$('.category_item').removeClass('ct_item-active');
$(this).addClass('ct_item-active');
$('.product-item').css('transform', 'scale(0)');
function hideProduct() {
$('.product-item').hide();
} setTimeout(hideProduct, 400);
function showProduct() {
$('.product-item[category="' + catProduct + '"]').show();
$('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
} setTimeout(showProduct, 400);
});
});
.wrap {
max-width: 1100px;
width: 90%;
margin: auto;
}
.wrap > h1 {
color: #494B4D;
font-weight: 400;
display: flex;
flex-direction: column;
text-align: center;
margin: 15px 0px;
}
.wrap > h1:after {
content: '';
width: 100%;
height: 1px;
background: #C7C7C7;
margin: 20px 0;
}
.store-wrapper {
display: flex;
flex-wrap: wrap;
}
.category_list {
display: flex;
flex-direction: column;
width: 30%;
}
.category_list .category_item {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 20px;
background: #E84C3D;
text-align: center;
text-decoration: none;
color: #fff;
}
.category_list .ct_item-active {
background: #2D3E50;
}
.products-list {
width: 70%;
display: flex;
flex-wrap: wrap;
}
.products-list .product-item {
width: 35%;
margin-left: 3%;
margin-bottom: 25px;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-start;
transition: all .4s;
}
.products-list .product-item img {
width: 100%;
}
.products-list .product-item a {
display: block;
width: 100%;
padding: 8px 0;
background: #2D3E50;
color: #fff;
text-align: center;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="store-wrapper">
<div class="category_list">
Technical
Organizational
</div>
<section class="products-list">
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Equipment
</div>
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Tool
</div>
<div class="product-item" category="Organizational">
<img src="~/images/100004-200.png" alt="">
Material
</div>
</section>
</div>
</div>
So as u can see i don't have func which show all categorys at main page.
But when i reload page all categorys is visible, at this moment i'ts 3, but i have more then 3, and i want to show this categorys after pressing category items.
You only need add .products-list .product-item { display:none} to your css.
$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');
$('.category_item').click(function () {
var catProduct = $(this).attr('category');
console.log(catProduct);
$('.category_item').removeClass('ct_item-active');
$(this).addClass('ct_item-active');
$('.product-item').css('transform', 'scale(0)');
function hideProduct() {
$('.product-item').hide();
} setTimeout(hideProduct, 400);
function showProduct() {
$('.product-item[category="' + catProduct + '"]').show();
$('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
} setTimeout(showProduct, 400);
});
});
.wrap {
max-width: 1100px;
width: 90%;
margin: auto;
}
.wrap > h1 {
color: #494B4D;
font-weight: 400;
display: flex;
flex-direction: column;
text-align: center;
margin: 15px 0px;
}
.wrap > h1:after {
content: '';
width: 100%;
height: 1px;
background: #C7C7C7;
margin: 20px 0;
}
.store-wrapper {
display: flex;
flex-wrap: wrap;
}
.category_list {
display: flex;
flex-direction: column;
width: 30%;
}
.category_list .category_item {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 20px;
background: #E84C3D;
text-align: center;
text-decoration: none;
color: #fff;
}
.category_list .ct_item-active {
background: #2D3E50;
}
.products-list {
width: 70%;
display: flex;
flex-wrap: wrap;
}
.products-list .product-item {
width: 35%;
margin-left: 3%;
margin-bottom: 25px;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-start;
transition: all .4s;
display:none;
}
.products-list .product-item img {
width: 100%;
}
.products-list .product-item a {
display: block;
width: 100%;
padding: 8px 0;
background: #2D3E50;
color: #fff;
text-align: center;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="store-wrapper">
<div class="category_list">
Technical
Organizational
</div>
<section class="products-list">
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Equipment
</div>
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Tool
</div>
<div class="product-item" category="Organizational">
<img src="~/images/100004-200.png" alt="">
Material
</div>
</section>
</div>
</div>
Related
function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(
try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})
In my case, dropdown cannot show over the card cause the overflow is hidden, any solution ? Pls find bellow the css and html and js for the hover effect of a section. the idea of this card is a card with some text details and a dropdown list and in the right a banner with hover effect to have some options, as on the phone when we swipe to the left to get delete or ...
$(window).resize(function() {
var $window = $(window);
var windowsize = $window.width();
if (windowsize > 767) {
$('.section2').hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);
}
});
$(window).trigger('resize');
$('.section2').bind('swiperight', function() {
$('.section2').removeClass('hover');
});
$('.section2').bind('swipeleft', function() {
$('.section2').removeClass('hover');
$(this).addClass('hover');
});
.card {
display: flex;
width: 100%;
background-color: white;
border: 1px solid lightgray;
border-radius: 8px;
justify-content: space-between;
align-items: center;
padding: 20px;
overflow: hidden;
position: relative;
transition: all ease .4s;
height: 90px;
margin-bottom: 100px;
}
.section1 {
width: 95%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.section2 {
position: absolute;
top: 0;
right: 0;
height: 100%;
z-index: 1;
display: flex;
transition: all ease .4s;
transform: translateX(90%);
background-color: purple;
color: whitesmoke;
}
.section2.hover {
transform: translateX(0%);
}
.section2 a {
color: var(--white);
text-decoration: none;
display: inline-flex;
width: 60px;
height: 100%;
margin-right: 0%;
align-items: center;
justify-content: center;
transition: all ease .4s;
}
.section2 a:hover {
color: var(--gray2);
background-color: var(--gray1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="section1">
<div>Ipsus lupem ipsus lupem</div>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
</div>
</div>
<div class="section2">
option1
option2
option3
option4
</div>
</div>
You need to remove position: relative from the ancestors. The combination of that and overflow: hidden is the cause of your problem.
$(window).resize(function() {
var $window = $(window);
var windowsize = $window.width();
if (windowsize > 767) {
$('.section2').hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);
}
});
$(window).trigger('resize');
$('.section2').bind('swiperight', function() {
$('.section2').removeClass('hover');
});
$('.section2').bind('swipeleft', function() {
$('.section2').removeClass('hover');
$(this).addClass('hover');
});
.card {
box-sizing: border-box;
display: flex;
width: 100%;
background-color: white;
border: 1px solid lightgray;
border-radius: 8px;
justify-content: space-between;
align-items: center;
padding: 20px;
overflow: hidden;
transition: all ease .4s;
height: 90px;
margin-bottom: 100px;
}
.section1 {
width: 95%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="section1">
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
</div>
</div>
</div>
I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...
The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
when I click the add button, a 'li' should be added to container2, this li has a class named 'obj' which I have styled in CSS, the list elements with the same class and which are already added in HTML code is styled well, but the new elements added shows without any styling although they have the same class.
this is my js code:
var bla;
$("#addButton").click(function() {
if ($('#task').val() == '') {
// alert('empty');
$('#task').css("border-color", "#e40017");
var msg = $("<div class='message'></div>").text('You should enter a task.');
$(".container1").append(msg);
} else {
bla = document.getElementById('task').value;
addDiv();
}
});
function addDiv() {
var task = $("<li class='obj'></li>").text(bla);
$(".container2").append(task);
}
.main-container {
background-color: #c7cfb7;
border-radius: 20px;
display: flex;
flex-direction: column;
}
.container1 {
height: 110px;
background-color: #f7f7e8;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
margin: 10px;
}
.container2 {
display: flex;
background-color: #f7f7e8;
flex-direction: column;
align-items: center;
height: 200px;
border-radius: 20px;
margin-left: 10px;
margin-right: 10px;
}
#container1-child1 {
display: flex;
flex-direction: row;
}
#label1 {
margin-top: 10px;
}
#task {
width: 250px;
}
body {
width: 100%;
max-width: 500px;
/* or whatever width you want */
margin-right: auto;
margin-left: auto;
background-color: grey;
}
#addButton {
margin: 10px;
background-color: #9dad7f;
}
.newTasks {
border: 3px;
width: 100px;
height: 20px;
}
.newTask {
margin-top: 10px;
border: 1px;
border-radius: 10px;
height: 30px;
width: 350px;
background-color: #9dad7f;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.message {
color: red;
font-size: 10px;
align-self: flex-start;
margin-left: 85px;
}
.material-icons {
visibility: hidden;
margin: 5px;
}
.newTask:hover+.material-icons {
visibility: visible;
display: flex;
}
ul {
list-style: none;
}
ul li {}
ul li span {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
border-radius: 0 5px 5px 0;
margin-left: -45px;
transition: 0.7s ease;
}
ul li:hover span {
margin-left: 0px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="container1">
<label id="label1" for="task" class="inputlabel">Add a new task</label>
<div id="#container1-child1">
<input type="input " class="inputTask " name="task " id='task' required/>
<button id="addButton">ADD</button>
</div>
</div>
<div class="container2" id="cont2">
<ul>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
</ul>
</div>
You are appending it to $(".container2").append(task); whereas you want to append it to the ul inside the container2: $(".container2 ul").append(task);.
var bla;
document.getElementById("addButton").addEventListener("click", function() {
if ($("#task").val() == "") {
// alert('empty');
$("#task").css("border-color", "#e40017");
var msg = $("<div class='message'></div>").text("You should enter a task.");
$(".container1").append(msg);
} else {
bla = document.getElementById("task").value;
addDiv();
}
})
function addDiv() {
var task = $("<li class='obj'></li>").text(bla);
$(".container2 ul").append(task);
}
.main-container {
background-color: #c7cfb7;
border-radius: 20px;
display: flex;
flex-direction: column;
}
.container1 {
height: 110px;
background-color: #f7f7e8;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
margin: 10px;
}
.container2 {
display: flex;
background-color: #f7f7e8;
flex-direction: column;
align-items: center;
height: 200px;
border-radius: 20px;
margin-left: 10px;
margin-right: 10px;
}
#container1-child1 {
display: flex;
flex-direction: row;
}
#label1 {
margin-top: 10px;
}
#task {
width: 250px;
}
body {
width: 100%;
max-width: 500px;
/* or whatever width you want */
margin-right: auto;
margin-left: auto;
background-color: grey;
}
#addButton {
margin: 10px;
background-color: #9dad7f;
}
.newTasks {
border: 3px;
width: 100px;
height: 20px;
}
.newTask {
margin-top: 10px;
border: 1px;
border-radius: 10px;
height: 30px;
width: 350px;
background-color: #9dad7f;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.message {
color: red;
font-size: 10px;
align-self: flex-start;
margin-left: 85px;
}
.material-icons {
visibility: hidden;
margin: 5px;
}
.newTask:hover+.material-icons {
visibility: visible;
display: flex;
}
ul {
list-style: none;
}
ul li {}
ul li span {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
border-radius: 0 5px 5px 0;
margin-left: -45px;
transition: 0.7s ease;
}
ul li:hover span {
margin-left: 0px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="container1">
<label id="label1" for="task" class="inputlabel">Add a new task</label>
<div id="#container1-child1">
<input type="input " class="inputTask " name="task " id='task' required/>
<button id="addButton">ADD</button>
</div>
</div>
<div class="container2" id="cont2">
<ul>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
</ul>
</div>
Change your method in js file
function addDiv() {
var task = $(`<li class='obj'> <span><i class='fa fa-trash '>${bla}</i></span> </li>`)
$(".container2").append(task);
};
And in CSS, replace ul li with li
li {
list-style: none;
}
li span {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
border-radius: 0 5px 5px 0;
margin-left: -45px;
transition: 0.7s ease;
}
li:hover span {
margin-left: 0px;
}
So it looks like my javascript onclick events are only functioning with ID's but when i call the class "listButton" only the first list item (All Rewards) closes the dropdown div.
When i click on any other list item (Food Rewards, Beverage Rewards, Holiday Rewards, Classes Rewards, TBA) it does not close my dropdown div.
I'm unsure why this is so. Is there another method to complete this? I must use vanilla JS.
var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");
document.getElementById("dropdownButton").onclick = function() {
dropdown.classList.add("open");
overlay2.classList.add("open");
};
function removeOpenRewards() {
dropdown.classList.remove("open");
overlay2.classList.remove("open");
};
for (i = 0; i < listButton.length; i++) {
listButton[i].addEventListener("click", removeOpenRewards);
}
overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);
#container #activeRewards #mobileDropdown #overlay2 {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#container #activeRewards #mobileDropdown #overlay2.open {
display: block;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont {
width: 100%;
height: 59px;
margin: 15px 0 20px 0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
background-color: #F0F0F0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #C7C7C7;
position: absolute;
right: 40px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown {
width: 100%;
display: none;
}
#container #activeRewards #mobileDropdown #rewardsDropdown.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 1000;
background-color: #FFFFFF;
left: 0;
bottom: 0;
padding-bottom: 30px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close {
color: #D63A5E;
background-color: #FFFFFF;
border-radius: 20px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
font-size: 20px;
position: absolute;
left: 20px;
top: -45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 5px 5px 7px 6px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-color: #AF2B49;
}
#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
color: #505050;
text-align: center;
font-size: 18px;
font-weight: bolder;
margin: 30px 0;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
height: 360px;
overflow: scroll;
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
background-color: transparent;
width: 5px;
margin-left: 5px;
padding-left: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
background-color: #E0E0E0;
border-radius: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
width: 95%;
height: 59px;
margin-top: 5px;
padding-right: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
<div id="container">
<div id="activeRewards">
<div id="mobileDropdown">
<div id="dropdownButtonCont">
<button id="dropdownButton">All Rewards
<span>(5)</span>
</button>
</div>
<div id="overlay2"></div>
<div id="rewardsDropdown">
<span id="close">×</span>
<h4>Reward Categories</h4>
<div id="dropdownList">
<div>
<button class="listButton">All Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Food Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Beverage Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Holiday Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Classes Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">TBA
<span>(5)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So replace:
document.querySelector(".listButton").addEventListener("click", removeOpenRewards);
with:
var listButtons= document.querySelectorAll(".listbutton");
listButtons.forEach(function(listButton) {
listButton.addEventListener("click", removeOpenRewards);
});