I am trying to delete dynamically added item by clicking on delete button .delete on modal box.
I have one modal and it pops-up when I click on button <i class="fa-solid fa-ellipsis">.
Code:
function showOptions(object) {
if (object.target.matches(".fa-ellipsis")) {
let optionsModal = object.target.querySelector(".optionsModal");
optionsModal.classList.toggle("hide");
}
}
function deletePost() {
// delete specific li-item from the list
}
document.querySelector("body").addEventListener("click", showOptions(event));
document.querySelector(".delete").addEventListener("click", deletePost);
<body>
<ul class="posts-list">
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
</li>
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
</li>
<!-- every li item is added dynamically -->
</ul>
<div class="optionsModal hide">
<p class="delete">Delete</p>
<p class="cancel">Cancel</p>
</div>
</body>
And I have a problem how to pass to deletePost function specific <i class="fa-solid fa-ellipsis"> when I click on them. I was trying to nest one eventListener in another but it doesn't work.
When you open the modal, add a class to the item you clicked on. Then find the item in deletePost.
The modal isn't inside object.target, so you shouldn't use object.target.querySelector() to find it, use document.querySelector().
You shouldn't toggle the hide class when clicking on a list items. That will hide the modal if you click on a different item before cancelling the modal (although if you make it truly modal, you shouldn't be able to click on something else). I just remove the class to display the modal.
function showOptions(object) {
if (object.target.matches(".fa-ellipsis")) {
let optionsModal = document.querySelector(".optionsModal");
optionsModal.classList.remove("hide");
let oldSelected = document.querySelector(".selected");
if (oldSelected) {
oldSelected.classList.remove("selected");
}
object.target.classList.add("selected");
}
}
function deletePost() {
let selected = document.querySelector(".selected");
if (selected) {
selected.closest(".posts-list-item").remove();
}
}
document.querySelector("body").addEventListener("click", showOptions);
document.querySelector(".delete").addEventListener("click", deletePost);
.selected {
background-color: red;
}
.hide {
display: none;
}
<body>
<ul class="posts-list">
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis">Item 1</i>
</div>
</div>
</li>
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis">Item 2</i>
</div>
</div>
</li>
<!-- every li item is added dynamically -->
</ul>
<div class="optionsModal hide">
<p class="delete">Delete</p>
<p class="cancel">Cancel</p>
</div>
</body>
Related
I'm using HTML templates, which are based on Bootstrap 4.3.1 to present my students with learning content. In the current templates, all accordion panels are closed on page load and each accordion panel can be opened regardless of how many others have also been opened.
A working example can be found on this CodePen: https://codepen.io/hagelslag1001/pen/MWGeZJr
The HTML code is as follows:
<h2>Accordion: Group of 2</h2>
<p class="small">Accordion: start copy</p>
<!-- Accordion headings should be changed to respect page hierarchy -->
<div class="accordion shadow mb-5">
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 1 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 1 of 2 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 2 content here.</p>
</div>
</div>
</div>
</div>
<p class="small">Accordion: end copy</p>
Is it possible to change this default behaviour so that only one panel can be opened at a time? (i.e. as soon as a new panel is opened, the previously opened panel will automatically close)
The Bootstrap examples use (data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne") to accomplish this for the accordions in these templates
I can't figure out how to accomplish this, since the HTML code for the accordions in these templates look different than the Bootstrap 4 examples, which use either an a or button tag to trigger the collapsible event.
Here is a simpler answer based on your CodePen: https://codepen.io/mrtcntn/pen/MWGeZdP
According the Bootstrap 4 docs, you need id="accordion" on the top level div and you don't need to give ids like id="accordion_1" and id="accordion_2".
Therefore I removed the first portion from the JS and added id="accordion" at line 18 in the HTML.
You can do this by letting javascript check for active classes and only allowing one at the time. Here's a simplified example.
// DOM here
let nav = document.querySelector(".nav");
// Handlers here
const clickHandler = function (e) {
if (e.target.classList.contains("nav__link")) {
const link = e.target;
const siblings = link.closest(".nav").querySelectorAll(".nav__link");
link.classList.toggle("active");
// removes all actives except for the clicked one
siblings.forEach((el) => {
if (el !== link) el.classList.remove("active");
});
}
};
// Listeners here
nav.addEventListener("click", clickHandler);
body {
font-family: sans-serif;
}
.nav__link {
display: block;
width: 100%;
}
.active {
background: #0f0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="nav">
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#accordeon--1">Accordeon 1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--2">Accordeon 2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--3">Accordeon 3</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--4"
>Accordeon 4</a
>
</li>
</ul>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
I have a cart icon. When I hover on the cart icon display of one div changes from display:none to display:block means that div only appears when I hover on cart icon. This div contains one button View Cart on clicking which I need to alert something.
This is my code which I typed in console. But it only works when I first hover the icon (hovering icon changes display:none of a div to display:block) and then write on console. If I write this code in console before hovering it will not work.
$('#qa_cartletCartButton').click( function(){alert('yes');} );
ID of div: cartletDrop
ID of button: qa_cartletCartButton
These codes are also not working.
if ($('#cartletDrop').is(':hidden')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
if ($('#cartletDrop').is(':visible')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
This is the site HTML code which I am scraping.
<div class="shopping_cart">
<header class="header">
<a href="/chemicals/shop/cart?nocache=1596440273788" class="shopping_cart_icon" id="shopping_cart_icon_cartlet">
<span><img src="/content/dam/fishersci/en_US/images/icon-cart-l-xl-empty.svg"></span>
<span class="shopping_cart_quantity">3</span>
</a>
</header>
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
</div>
This line in html is empty before i hover.
<section style="display: none;" id="cartletDrop" data-refresh="0">
</section>
Once i hover in cart icon it's now like this.Only display property changes.
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
seems html inside section tag is not present before first hover.
I am trying to toggle a div overlay when either a menu button or search button is clicked. However, when I click one button and then the next button it turns off.
How do I keep the overlay on when it another button is clicked but close it when the menu or search is closed?
// menu
$('.hamburger-icon').click(function() {
$('.search').removeClass('is-visible');
$('.navbar').toggleClass('show-nav');
$('.nav-items').toggleClass('db');
$('.overlay').toggleClass('show-overlay');
});
// search
$('.search-icon').click(function() {
$('.navbar').removeClass('show-nav');
$('.nav-items').removeClass('db');
$('.search').toggleClass('is-visible');
$('.overlay').toggleClass('show-overlay');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar db dt-xl w-100 border-box bg-white fixed absolute f6 d z-999">
<div class="pa3 ph4-m ph5-l ph5-xl">
<div class="center">
<div class="nav-buttons db absolute right-0 mr3 mr5-ns mr4-m dn-xl fr">
<a class="link dib grey hover-teal pv2 ph3 pointer search-icon" tabindex="0"><i class="fas fa-search"></i></a>
<a class="link dib grey hover-teal pv2 ph3 ml2-ns pointer hamburger-icon" tabindex="0"><i class="fas fa-bars"><span class="sr-only">Toggle Menu</span></i></a>
</div>
<ul class="nav-items dn dtc-xl v-mid w-100 pa0 ma0 mt3 tl">
<li></li>
</ul>
</div>
</div>
<div id="search" class="search fixed w-100 left-0 z-5">
<form action="{{ url('/search/results') }}" class="w-100 h-100">
<input type="search" name="q" placeholder="Search..." class="sans-serif w-100 h-100 ph3 ph4-m ph5-l ph5-xl br0 bn bg-white f4 f2-xl">
<button class="sr-only" type="submit"><i class="fas fa-search h-100"></i>Submit</button>
</form>
</div>
</nav>
<div class="overlay pointer"></div>
Your issue here is you use the jQuery's toggleClass to toggle the overlay, the toggle() method will toggle between hide and show. Since you have toggle in both the menu and the search, when you click on one, then the other, the overlay gets turn off upon second click since it got toggled.
Use jQuery's hasClass() method to check if your menu or search have the css class that makes them visible, it will return a boolean value true or false.
You can do something like this:
https://www.w3schools.com/jquery/html_hasclass.asp
$('.hamburger-icon').click(function() {
$('.search').removeClass('is-visible');
$('.navbar').toggleClass('show-nav');
$('.nav-items').toggleClass('db');
$('.overlay').addClass('show-overlay');
if(!($('.navbar').hasClass('show-nav'))) {
$('.overlay').toggleClass('show-overlay');
}
});
// search
$('.search-icon').click(function() {
$('.navbar').removeClass('show-nav');
$('.nav-items').removeClass('db');
$('.search').toggleClass('is-visible');
$('.overlay').addClass('show-overlay');
if(!($('.search').hasClass('is-visible'))) {
$('.overlay').toggleClass('show-overlay');
}
});
You can easily solve it here the example my code:
Description: normally a button is clicked to toggle the target element and target your actions. I added a tiny logic here when menu button is clicked. Then, it adds new class menuActive and checks if the parent is Search active. when the active search bar. then first remove the searchActive class form the parent and then toggle similarly mention the previous line.
I hope this code will solve your prblem.
//when menu button click
jQuery(document).on('click','.menuButton', function(){
if(jQuery('.parent').hasClass('searchActive')) {
jQuery('.parent').removeClass('searchActive');
jQuery('.parent .searchCont').slideUp(0);
}
jQuery('.parent').toggleClass('menuActive').children('.menu').slideToggle(200);
})
//when search button click
jQuery(document).on('click','.searchButton', function(){
if(jQuery('.parent').hasClass('menuActive')) {
jQuery('.parent').removeClass('menuActive');
jQuery('.parent .menu').slideUp(0);
}
jQuery('.parent').toggleClass('searchActive').children('.searchCont').slideToggle(200);
})
.menu,
.searchCont { display:none}
.menuButton,
.searchButton {
display: inline-block;
width: 50px;
height: 20px;
margin: 5px;
background: gray;
border: 2px solid #fff;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="menuButton">menu</span>
<span class="searchButton">Search</span>
<div class="parent">
<div class="menu">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="searchCont">
<input type="text" placeholder="search" />
<input type="submit" vlaue="find">
</div>
</div>
= = = = Thank you = = = =
I am trying to automatically click/open Tab2 in a web page whenever Tab1 loads so that Tab2 becomes the active tab. I'm not sure what needs to happen here since there is no specific URL to direct a user to, so would appreciate any assistance and feedback.
Thanks!
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch">
<span id="xy1:primaryForm:xy22:0:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:0:tabSwitch.stop"></span>
</span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav">
<span id="xy1:primaryForm:xy22:1:tabSwitch">
<span id="xy1:primaryForm:xy22:1:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:1:tabSwitch.stop"></span>
</span>
Tab2
</div>
---------UPDATE-------------
I tried to simplify this a bit by not paying attention to all the functions inside the link and just wanted to click on the link based on the text()..
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch"></span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav ">
<span id="xy1:primaryForm:xy22:1:tabSwitch"></span>
Tab2
</div>
The following jQuery sort of works, but it continues to click on Tab2 even when Tab2 is already active, so I want to get it to only click Tab2 if Tab1 has an active class:
var elements = $('a');
elements.each(function(index, domElement) {
var $element = $(domElement);
if ($element.text() === "Tab2") {
$element.click();
return false;
}
});
Is there a better JavaScript Solution to click some text() only if it's a child of an .active class?
I have an annoying problem, I have a button that toggles a dropdown, my intention is to hide the div when clicked on the button again, which toggle achieves, and to hide the dropdown when clicked outside why my current jquery does. However when clicking inside the div itself, it slides back up.
HTML >
<div class="navPanel">
<!-- NAV -->
<nav>
<ul id="navBar">
<div class="dynamicNav">
<div class="menu1Container">
<li class="menu1">Books
<!-- DropDown1-->
<div id="dropdownContainer-1">
</div>
</li>
</div>
</div>
</ul>
</nav>
Jquery >
$(function(){
$(".menu1").click(function(){
$("#dropdownContainer-1").slideToggle(90);
});
$(document).click(function(event) {
if (!$(event.target).is(".menu1") && !$(event.target).is(".menu1")) {
$("#dropdownContainer-1").slideUp(90); //make all inactive
}
});
});
The obvious problem is event target, I tried using a similar method ->
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
$('#dropdownContainer-1').slideUp(90);
}
});
If you could help me figure this one out, I'd appreciate it!
You may use:
$(event.target).closest(".menu1").length == 0
$(".menu1").click(function(e){
e.stopPropagation(); // avoid to propagate to document click
if ($(event.target).is(".menu1")) {
$("#dropdownContainer-1").slideToggle(90);
console.log('Menu1 toggled clicking menu1');
}
});
$(document).click(function(event) {
if ($(event.target).closest(".menu1").length == 0 &&
$("#dropdownContainer-1").is(':visible')) {
// if not inside area of menu1
$("#dropdownContainer-1").slideUp(90); //make all inactive
console.log('Menu1 closed clicking outside menu1');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navPanel">
<!-- NAV -->
<nav>
<ul id="navBar">
<div class="dynamicNav">
<div class="menu1Container" style="border-style: dotted;width:50%;">
<li class="menu1">Books
<!-- DropDown1-->
<div id="dropdownContainer-1">
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
</div>
</li>
</div>
</div>
</ul>
</nav>
</div>