I tried a whole bunch of things from:
onClick not working on mobile (touch)
document .click function for touch device
However nothing seems to work.
Here's what I have:
#modal-close {cursor:pointer;}
<button class="button" id="modal-close">ok</button>
function hideModal(){
var modal = document.getElementById('modal');
modal.style.display = 'none';
}
$(function() {
$('#modal-close').on('click touchstart',function (e) {
hideModal();
})
});
What might I be doing wrong?
Change the id of your button to modal_close. This may work for you. The id value acts like an identifier, so there is rule that we cannot use every symbol for naming identifiers.
Turned out
#modal-close {cursor:pointer;}
<button class="button" id="modal-close">ok</button>
function hideModal(){
var modal = document.getElementById('modal');
modal.style.display = 'none';
}
$(function() {
$('#modal-close').on('click touchstart',function (e) {
hideModal();
})
});
Was valid
The thing that got me was hideModal() which used classList to add or remove classes. I switched it to className += and it worked as supposed to.
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 am trying to adapt the commented out code at the bottom that works for a single button to work for more than one buttons.
So I changed the 'menu-toggle' being from an id to a class. And in the html I added class='menu-toggle' to the buttons.
I am getting an array of the elements using a jquery selector. Then looping on them, and assigning the onclick event.
// Toggles the sidebar
const buttons = $('.menu-toggle');
buttons.forEach(
function (element){
element.onclick(
function (event) {
event.preventDefault();
$("#wrapper").toggleClass("toggled");
}
)
}
)
/*
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
*/
Edit: I accepted Alireza's answer, as he fixed my code. But I actually used Zoli's answer, as it is more concise. Aside from the bug in the code, the actual problem was that the browser was caching the *.js file this code is in. So my changes were not reloading. I cleared the cache from privacy settings, and now it works.
It is as simple as changing the ID selector to a class selector.
$(".menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
jQuery will attach the event handler to all selected elements, whether that's a single element (in the case of an ID selector) or multiple elements (found by a class selector or other...).
Note that forEach functions exist on array, so you need to use spared operator (...) to convert buttons to array to make sure you can use forEach function. (Probably you get the error buttons.forEach is not a function now)
const buttons = $('.menu-toggle');
[...buttons].forEach(
function (element) {
element.onclick =
function (event) {
event.preventDefault();
$("#wrapper").toggleClass("toggled");
}
}
)
.toggled {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button class="menu-toggle">button1</button>
<button class="menu-toggle">button2</button>
<button class="menu-toggle">button3</button>
<button class="menu-toggle">button4</button>
<p id="wrapper">this is p</p>
$("body").on("click", ".menu-toggle", function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
I'm using a plug-in (PopUp Maker) to create a pop-up landing page. Inside it I have a button (made by me) that should close this pop-up.
I have no clue how to do it. I tried adding some javascript but is not working, and the thing is that I don't know if it's my code that isn't correct, Wordpress not reading my javascript file, or the plug in preventing me from doing it.
Any suggestions?
Here's the code I tried:
$(document).ready(function() {
$('.close-button').on('click', function(){
$(this).parent().fadeOut('slow', function(){
});
});
});
Here is a Native Javascript Solution to Close or open a Div by onclick.
function myFunction(){
if (document.getElementById('idofpopupdiv').style.display == "none") {
document.getElementById('idofpopupdiv').style.display = 'block';
document.getElementById('idofpopupdiv').style.visibility = 'visible';
} else {
document.getElementById('idofpopupdiv').style.display = 'none';
document.getElementById('idofpopupdiv').style.visibility = 'none';}}
and your button should have an onclick event to call the function.
<button onclick="myFunction();">Button Name</button>
Hope this helps.
Just replace #idofpopupdiv with the id of your popup div or a classname
$(function() {
$('.close-button').click(function() {
$('#idofpopupdiv').fadeOut('slow', function () {
});
});
});
I'm used to working with jQuery but I'm trying to get back to vanilla javascript. I have a link that when clicked will reveal an account modal.
I also want to change the class of the modal when clicked to 'modal-visible'. This works as expected, but then when I click the link again to close the modal, I need the class to change back to 'modal-hidden'.
I wondered if someone could help me with that. Perhaps it needs a toggle instead?
var accountModal = document.getElementById("account-modal");
document.querySelector('#account-photo').addEventListener('click', function(e) {
e.preventDefault();
accountModal.classList.add('modal-visible');
accountModal.classList.remove('modal-hidden');
accountModal.setAttribute('aria-hidden', 'false');
});
<a id="account-photo" href="/customer" tabindex="0" aria-expanded="false">Account</a>
<div id="account-modal" class="modal-visible" aria-label="Account Information" aria-hidden="false">Account Info</div>
Here's a way of doing it if we assume it always begins closed:
document.querySelector('#account-photo').addEventListener('click', function() {var is_visible = false; return function(e) {
e.preventDefault();
if(!is_visible) {
accountModal.classList.add('modal-visible');
accountModal.classList.remove('modal-hidden');
accountModal.setAttribute('aria-hidden', !is_visible);
is_visible = true;
} else {
accountModal.classList.remove('modal-visible');
accountModal.classList.add('modal-hidden');
accountModal.setAttribute('aria-hidden', !is_visible);
is_visible = false;
}
}});
This method basically acts as a manually coded toggle.
I need to get the ID of an element that was clicked, but I need to to keep all my js and html separate. normally id just use 'this.id' in the html. Any other ways?
This is what e.target is for. You can add an event listener anywhere you want, as long as the click event is allowed to bubble up to it (which happens by default) you can catch it. A basic example:
document.addEventListener('click', function(e) {
alert(e.target.id);
});
Clicking on each will alert its id. Hope this helps :)
<button id="foo">foo</button>
<button id="bar">bar</button>
<button id="baz">baz</button>
EDIT
http://jsfiddle.net/95NZ8/
Try something like this:
$(document).ready(function () {
$("#someWrapper").each(function () {
$(this).on('click', function () {
alert(this.id);
});
});
});
window.onclick = e => {
console.log(e.target.id);
}
to get element, tagname, classname , other attributes
window.onclick = e => {
console.log(e.target);
console.log(e.target.tagName);
console.log(e.target.className);
console.log(e.target.id);
}