So I have an H3 that has a grey background rectangle. When you click anywhere in that grey background, a particular div performs a slideToggle(). This works fine.
Now, Inside that H3 I also have a link that calls a jquery function that does something. That works fine too.
But my issue is this, since the link is inside the H3, after its functions executes, it also executes the slideToggle() because I clicked somewhere inside the H3.
So the question becomes, How do I prevent the slideToggle() from happening when I click on the link. I imagine I can use a flag but I'm hoping there is a more elegant way.
Any help would be appreciated.
The HTML code
<h3 id="data_id">
<a href="#" id="random_id" >Random</a>
</h3>
<div id="data_div_id">
// The data here is irrelevant to the issue at hand
</div>
The Jquery Code
$('#data_id').click(function() {
$('#data_div_id').slideToggle('slow');
});
$('#random_id').click(function(event) {
// it does something irrelevant to the issue at hand
});
You can use event.stopPropagation() to stop the event from bubbling.
jsFiddle here.
$('#data_id').click(function() {
$('#data_div_id').slideToggle('slow');
});
$('#random_id').click(function(event) {
event.stopPropagation();
});
Try skipping the element you don't want the event for:
$('#data_id').click(function(event) {
if (event.target !== this)
return;
$('#data_div_id').slideToggle('slow');
});
Like this only #data_id will trigger the toggle and since your h3's are in that div it gets executed when you click on them too, but only once from actually clicking the container
Related
if a div changes its content after a button click, is there some way to hide another div.
for example after i hit on submit button <div id="dynamic">1</div> changes to <div id="dynamic">2</div> once it shows 2 i would like to hide the submit button completely.
i was trying to work something with the below, hope it makes sense.
$(document).ready(function(){
$('#dynamic').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
$("#submitbutton").hide();
})
})
thanks in advance.
If there is some async action involved and you don't know the exact timing when the content will be changed you could use a MutationObserver to observe a specific DOM element and execute logic if the condition within the MutationObserver is met: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
If the change of your div content is based on an API call that returns the change you could run a callback function to hide the submit button once the promise is fullfilled: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
If it is really as simple as in your example, that you click on submit and then logic to change the div is executed, you could just write the logic to hide your submit button on the next line or as a callback function after click execution.
If you are using newer version of jQuery, bind is deprecated and you should use on instead. This works for me, though as mentioned in another answer this might not be fully cross browser compatible.
$(document).ready(function(){
$('body').on('DOMSubtreeModified', '#dynamic', function(event) {
$("#submitbutton").hide();
});
});
Here's a link to a working example: https://jsfiddle.net/ky43hx6q/
I don't realy know if this is where the problem come from but it seems to be that the event of stopPropagation()is applying to both div at a time.
A bit of explanation : So I have a div ".customSelect" that display herself only if you click on a link ".custom-select".
The main problem is that when I told it to close it self if I click on the body, it open an other div (which has the same class but still shouldn't).
What is the best way to make them be independent ?
This is the code and here is a link to the Fiddle.
$('.custom-select').click(function(e){
e.stopPropagation();
$(this).next($('.customSelect')).toggle(350);
});
$('body').click(function(e){
$('.customSelect').toggle(350);
});
What am I doing wrong?
Use this to hide only the visible ones when you click away.
$('body').click(function(e){
$('.customSelect:visible').toggle(350);
});
I'm trying to make a navigation menu which is hidden from view but that which appears by touching/clicking on the screen.
The problem I see is that touching/clicking many places on the screen could open the navigation menu while simultaneously triggering an event on whatever button, link, etc. that might have been in the vicinity.
So far, I'm trying to handle this with a :not clause in jQuery. Unfortunately there is something not work with the :not clause as the toggling happens regardless of where you click within the body.
HTML:
<div id="NavigationMenu">i'm the navigation menu</div>
<div class="icon-reorder">toggle</div>
<div id="main_content">i'm the main content
<button type="button">button</button>
</div>
JS:
$(document.body).on('click', ['body:not(".btn, a, i, button, input, textarea")', '.icon-reorder'], function(){
console.log('clicked');
$('#NavigationMenu').toggle();
$('#main_content').toggle();
});
$('button').on('click', this, function(){
console.log('button clicked');
});
Might someone be able to help with this code? Or is this even the right way to go about solving this problem? It looks a little hack-ish to me.
This navigation menu is the main one for my site so having an annoying UI/UX (nav opens too much/too little) is a deal breaker. I mainly interested in touch compatible code but any and all UI/UX suggestions would be welcome...
Instead of using a :not clause, why not use event delegation (which, I only learned two months ago, is a fancy term for handling the events with a callback, on a parent element)
$(body).on("click", function(event) {
if(event.target.type !== "button" && <whatever other conditions>) {
<toggle menu>
}
});
Here's an updated Fiddle . I'm logging the click event object to the console so you can look at event.target and see if there's anything more suited to your needs to compare to
The title is a little bit messy, so let me try to explain in the actual question:
Suppose I have the following HTML setup.
<div id="userMenu">
<div id="userMenu-expanderLink">Mouseover here!</div>
<div id="userMenu-collapserLink">You can close the menu by mouse out.</div>
<div id="userMenu-expandedContent">Extra Content</div>
</div>
Now, userMenu and userMenu-expanderLink are shown by default. userMenu-expandedContent and userMenu-collapserLink are hidden by default.
What I am trying to do in jQuery is to slideDown the userMenu-expandedContentwhen a mouseover event occurs on userMenu-expander. All good there, this is my code:
$("#userMenu-expanderLink").mouseover(function() {
$("#userMenu-expandedContent").stop().slideDown(200);
$("#userMenu-expanderLink").hide();
$("#userMenu-collapserLink").show();
$("#userMenu").addClass("userMenu-expanded");
});
As you can see, I'm also hiding the expanderLink and showing the collapserLink; and also adding a class called userMenu-expanded to #userMenu. Until now, this code has no problems. Everything works well.
But now, I want that when the user has a mouseOut event on #userMenu.userMenu-expanded, effectively moving his mouse out of the #userMenu that is expanded, I want when that happens, the expandedContent is slideUp'd, the expander and collapser links swapped, and the class removed. I know how to do that, but handling the event seems to be a problem.
Putting $("#userMenu.userMenu-expanded")... directly alongside the code I have of course does not work, since a div with such id and such class is only generated if the menu has been expanded, and the div's class is removed once the menu is collapsed. I don't directly use a mouseover/mouseout event on one object because I want the collapsing to be triggered only when the user takes his mouse out of the menu, not the expander link.
So, here's my problem. How can I get such mouse out event? I have tried adding the event handler in the callback of .addClass, but no avail, it would basically permanently close that expanded menu (basically I can't ever expand it again until I reload the page).
How can this be done? I'm not very experienced with jQuery, so a detailed answer would be most appreciated. I'm more interested on how can this be done rather than just accomplishing it, I want to learn ^_^.
Thanks!
I have found a correct way to do this. This is my final implementation.
$(document).ready(function() {
// UserMenu Expander, which is also a form of drop down
$("#userMenu-expander").mouseenter(function() {
//alert("Usermenu expanding…");
$("#userMenu-expandedContent").slideDown(200, function() {
$("#userMenu").addClass("userMenu-expanded");
});
$("#userMenu-expanderLink").hide();
$("#userMenu-collapserLink").show();
});
$("#userMenu.userMenu-expanded").live('mouseleave', function() {
//alert("Usermenu de-expanding…");
$("#userMenu-expandedContent").slideUp(200);
$("#userMenu-expanderLink").show();
$("#userMenu-collapserLink").hide();
$("#userMenu").removeClass("userMenu-expanded");
});
});
i have this jquery script that clicks on link add info then hides it and brings up a form. and when you press cancel it needs to show the h3 again, but it deosnt show it, i dont know why:
heres my working code: http://jsfiddle.net/GLqcx/2/
$("h3").show();
should be
$("h3 a").show();
In your .addInfo click handler, you are hiding the <a> with this line:
$(this).hide();
However, in your .cancelInfo click handler, you are showing the <h3>:
$("h3").show();
You'll need to change one or the other, so that you are hiding/showing either the <h3> or the <a>.
I've taken the liberty of fixing your problem and optimizing your code a bit. Here's what I came up with:
$(".cancelInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().next().show();
});
$(".addInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().prev().show();
});
Here's a demo showing that code in action ->
Instead of using broad selectors, we are now using our knowledge of the document structure to traverse to and manipulate the correct elements. In addition, we are only doing one selection, thus saving some time and work.
Or alternatively,
$("h3").hide();
instead of $(this).hide()
As you are hiding the a link not the h3 in your code. So when you tried to show the h3, the a link was still hidden.