I'm using the following code to open my Modal.
The modal opens as expected - and appends open to the parent class. However, when 'close' is clicked, it doesn't close & close is not added to the class.
Can someone explain why?
<script type="text/javascript">
jQuery(document).ready(function($) {
$window = $(window)
$(".modal-trigger").click(function(e) {
e.preventDefault()
var id = $(e.target).attr("href")
$(id).addClass("open")
$(id).find('.close').click(function(e) {
e.preventDefault()
$(e.target).parent().removeClass(".open")
});
})
});
</script>
My Close button HTML:
<button class="close icon-close"></button>
I don't think that parent() brings you to correct level. Instead try to remove .open class from the element you add this class in the first place, i.e. $(id):
$(".modal-trigger").click(function(e) {
e.preventDefault();
var id = $(e.target).attr("href");
$(id).addClass("open");
$(id).find('.close').click(function(e) {
e.preventDefault();
$(id).removeClass("open");
$(this).off();
});
});
Also you probably want to unbind click event from close button, otherwise it will bind multiple times.
Related
I'm still learning js, I'd like to find a way to reduce all the code I put below, I want to open different modals and close them in html.
In the Open modal section as you can see I made a function per modal where the "varEdit-button" is the ID I assigned to each button to open them and the "var-modal" ID is the one I assigned to each different modal container.
In the Close modal section the "close-varModal" is the ID I assigned to each close container and the "var-modal" again is the ID for each modal container.
I'd like to reduce the code with a for loop or maybe another property of js.
For example, I tried to close all the modals just by assigning the same class .close to all the close containers but only the first modal I opened could close and if someone knows why that happens with this language I'd appreciate it!
//OPEN MODALS
document.getElementById('imageEdit-button').addEventListener('click',
function (){
document.querySelector('#pic-modal').style.display = 'flex';
});
document.getElementById('curpEdit-button').addEventListener('click',
function (){
document.querySelector('#curp-modal').style.display = 'flex';
});
document.getElementById('phoneEdit-button').addEventListener('click',
function (){
document.querySelector('#phone-modal').style.display = 'flex';
});
document.getElementById('addressEdit-button').addEventListener('click',
function (){
document.querySelector('#address-modal').style.display = 'flex';
});
// CLOSE MODALS
document.querySelector('#close-picModal').addEventListener('click',
function (){
document.querySelector('#pic-modal').style.display = 'none';
});
document.querySelector('#close-curpModal').addEventListener('click',
function (){
document.querySelector('#curp-modal').style.display = 'none';
});
document.querySelector('#close-phoneModal').addEventListener('click',
function (){
document.querySelector('#phone-modal').style.display = 'none';
})
document.querySelector('#close-addressModal').addEventListener('click',
function (){
document.querySelector('#address-modal').style.display = 'none';
})
One option is to give the open and close buttons an attribute, perhaps in the dataset, that specifies the ID or (unique) class of the element to open/close. For example:
for (const button of document.querySelectorAll('button[data-target]')) {
button.addEventListener('click', () => {
const target = document.querySelector('#' + button.dataset.target);
target.classList[button.matches('.close') ? 'add' : 'remove']('closed');
});
}
.closed {
display: none;
}
<button data-target="imageEdit">open image edit</button>
<div id="imageEdit" class="closed">
<h3>image edit</h3>
<button class="close" data-target="imageEdit">close</button>
</div>
For additional sections, simply add more HTML, adjusting the data-targets as needed.
You could also tweak the logic so that a click on any of the buttons will toggle the current state of the target, if you wanted, simplifying the line inside the click listener to
target.classList.toggle('closed');
I currently have a header with a toggle button which will expand on click.
Html :
<h3 class="toggle_header" id="Tax_information_eSignature">
<spring:message code="TaxInformation.eSignature" />
<label for="Tax_information_eSignature"></label>
</h3>
JS:
$(document).on('click', '.icon_toggle_open', function (e) {
stop(e);
$(this).removeClass("icon_toggle_open")
.addClass("icon_toggle_close")
.attr("alt","Show")
.attr("title","Show")
.parent().next('.toggle_content').hide();
$(window).blur();
});
$(document).on('click', '.icon_toggle_close', function (e) {
stop(e);
$(this).removeClass("icon_toggle_close")
.addClass("icon_toggle_open")
.attr("alt","Hide")
.attr("title","Hide")
.parent().next('.toggle_content').show();
$(window).blur();
});
It is currently working as expected. The user needs to click on the toggle icon to expand the div.
Instead of clicking on the expand button, I want the Expand/collapse to be triggered upon clicking anywhere in the accordion bar. I am new to JSP, can anyone help?
You want to set the event listener higher in the DOM. Try moving your event listener from .icon_toggle_open to .toggle_header.
$(document).on('click', '.toggle_header', function (e) {
stop(e);
var opened = $(this).children('.icon_toggle_open')
if(opened.length > 0){
opened
.removeClass("icon_toggle_open")
.addClass("icon_toggle_close")
.attr("alt","Show")
.attr("title","Show")
.parent().next('.toggle_content').hide();
} else {
$(this)
.children(".icon_toggle_close")
.removeClass("icon_toggle_close")
.addClass("icon_toggle_open")
.attr("alt","Hide")
.attr("title","Hide")
.parent().next('.toggle_content').show();
}
$(window).blur();
});
Apply and event listener to the entire h3 instead of the a tag:
document.querySelector('#Tax_information_eSignature').addEventListener('click', e => {
// Expand your accordion bar by selecting it
});
I don't know how you have set up the 'expansion' feature but I would like to see how you've done your javascript to expand the accordion bar.
I have some piece of code.
This code on button click open menu.
When i click on button again, menu is hidden (i remove .show class, show class has display:block rule, so i toggle visibility of this item by clicking on button).
In next line, i have event, which check what element is clicked. If i "click" outside" of menu, menu become hidden, beacuse i remove .show class.
And now i have a problem, it looks like first part of code dont work anymore (button.on('click')) - i mean, work, but second part of code is also executed, and this logic is now broken.
Have you got any idea for workaround?
Thanks
var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
if (menu.hasClass('show')) {
menu.removeClass('show');
$(this).removeClass('opened');
} else {
menu.addClass('show');
$(this).addClass('opened');
}
});
$(document).bind( "mouseup touchend", function(e){
var container = menu;
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass('show');
button.removeClass('opened');
}
});
maybe use jQuery toggle() method ? For example:
button.on('click',function() {
menu.toggle();
});
You need to bind an outer click event only when the button click event has been triggered, and remove the outer click event when the outer click event has been triggered:
var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
if (menu.hasClass('show')) {
menu.removeClass('show');
$(this).removeClass('opened');
} else {
menu.addClass('show');
$(this).addClass('opened');
}
var butbindfunc = function(e){
var container = menu;
container.removeClass('show');
button.removeClass('opened');
$(this).unbind("mouseup touchend", butbindfunc);
};
$(document).not(button).bind( "mouseup touchend", butbindfunc);
});
Note, that I have removed your condition in the document binding callback, and simple excluded it from the select set.
I am completely new to javascript (and jquery) and have been experimenting with drop down menus the past couple of days. I found this one fancy notification menu, and I tried to see what happens when I have two of them on the page. Anyways, I made a quick example of my problem here:
http://jsfiddle.net/rgt03mu4/24/
The problem is that I can have both notification containers open up if I click on both.
If I am already clicked on one of the bells, then I click on the other, it should close the other one. Instead it keeps it open, and even when you click on the other container one, it still doesn't close it. You have to click off the page or click the notification bells. I am trying to make it to where you can only have one open at a time. So in order to do this, I tried changing the names of the functions:
As you can see:
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
I added the next function to be called test(), which you would think, since it's an entirely new function it would work differently. Instead, the error still persists.
What am I doing wrong? I even gave the the new bell it's own divs and link name. I also renamed container to container2.
Set the global variable for your container:
var nContainer = $(".notification-popup-container");
var nContainer2 = $(".notification2-popup-container");
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
nContainer2.hide(); //hide the second container
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
And you can do same with other function.
DEMO
There is no need to give the popup containers different classnames.
I would give the a-tags a common classname instead of an id. The href can be used to identify the target popup, so the binding between the link and the target popup is set in the origin of action. The JS part would be abstracted and could be reused.
<a class='notification-link' href='#firstpopup'>X</a>
<a class='notification-link' href='#secondpopup'>X</a>
<div class='notification-popup-container' id="firstpopup">
... firstpopup
</div>
<div class='notification-popup-container' id="secondpopup">
... secondpopup
</div>
The click handler first hides all the popups before opening a new one.
$(".notification-link").click(function () {
$(".notification-popup-container").hide();
var targetId = $(this).attr('href');
$(targetId).fadeIn(300);
return false;
})
working example: http://jsfiddle.net/qyLekdwk/
The problem here is how the event propgation is handled
$(function () {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function () {
nContainer.fadeToggle(300);
});
//page click to hide the popup
$(document).click(function (e) {
if (!$(e.target).closest('#notification-link, .notification-popup-container').length) {
nContainer.hide();
}
});
});
$(function test() {
var nContainer2 = $(".notification2-popup-container");
//notification popup
$("#notification2-link").click(function test() {
nContainer2.fadeToggle(300);
});
$(document).click(function (e) {
if (!$(e.target).closest('#notification2-link, .notification-popup-container').length) {
nContainer2.hide();
}
});
});
Demo: Fiddle
Ok, I have a edit button, when I press on it, it changes to "done" button.
It's all done by jQuery.
$(".icon-pencil").click(function() {
var pencil = $(this);
var row = $(this).parent('td').parent('tr');
row.find('td').not(":nth-last-child(2)").not(":last-child").each(function() {
$(this).html("hi");
});
pencil.attr('class', 'icon-ok-sign');
});
// save item
$(".icon-ok-sign").click(function() {
alert("hey");
});
When I press on a "edit" (".icon-pencil") button, its classes change to .icon-ok-sign (I can see in chrome console),
but when I click on it, no alert shown.
When I create a <span class="icon-ok-sign">press</span> and press on it, a alert displays.
How to solve it?
Try using $( document ).on( "click", ".icon-ok-sign", function() {...
Thats because you can not register click-events for future elements, you have to do it like this:
$(document).on('click', '.icon-ok-sign', function() {
alert('hey');
});
This method provides a means to attach delegated event handlers to the
document element of a page, which simplifies the use of event handlers
when content is dynamically added to a page.
Use following script:
$(document).on('click','.icon-ok-sign',function(){
alert("hey");
});
Try this:
$(".icon-pencil").click(function() {
var pencil = $(this);
var row = $(this).parent('td').parent('tr');
row.find('td').not(":nth-last-child(2)").not(":last-child").each(function() {
$(this).html("hi");
});
pencil.removeAttr('class').addClass('icon-ok-sign');
});
// save item
$(".icon-ok-sign").click(function() {
alert("hey");
});