I have a div that opens when user clicks link. And the div sort hovers over the link (its a more info box/div) and the div has a links and text. Now what I want is that when user cliks outside of the div it closes/disappears. But I want the links inside of div to work. Atm the javascript for that closin is like this:
$('html').click( function() {
$('#moreInfo').hide();
});
But the problem is that when user clicks the link inside of that #moreInfo the link doesn't work and the div just closes (it should go to different page from that link, not close the div).
You can do this:
$(document).click(function() {
$('#moreInfo').hide();
});
$('#moreInfo').click(function(e) {
e.stopPropagation();
});
By using event.stopPropagation() on the click handler for the <div>, clicks coming from inside won't bubble up to where you have a handler to close it...which is what's currently happening.
If I understood correctly, you don't want to hide the DIV, you want to remove it from the DOM tree.
If this is the case, try this:
$('#moreInfo').remove();
Just remember to keep the reference to the item, so that you can re-add it when you need to.
I recommend you to put a closing X on the up right corner of your DIV (like a window)... In other case, you can handle blur event of a "special" element inside your div.
Hope that helps,
Related
I'm trying toggle a DIV element using jQuery, a good example of this implemented is clicking the sign up button on Udemy.
I've implemented something similar using jQuery but I'm sure that to gain the effect I'm looking for, I will have to use JavaScript but its just that I'm don't know how to use JavaScript.
The my implementation be seen in my fiddle here, I've initially set the div to display:none and used jQuery to show the div on button click.
As you can tell with the fiddle, it displays with an enlarging animation instead of just appearing (not sure how to change this) and i'm only unable to make the div disappear by again clicking the button.
Also, how would I go about implementing functionality to make the div disappear by clicking anywhere on the screen?
Thanks to anyone in advance for taking the time to help me out.
The issue you face is that a click on the button is also a click on an area where you would like the pop up to disappear, if it's already shown. Because events bubble, the button click would make the pop up appear and then the document click (which fires after this because of bubbling) would make the pop up immediately disappear.
To solve the problem, you must stop a click on the button from bubbling to the rest of the document as well. You do this with:
event.stopPropagation();
So, what you need to do is make sure that when the button is clicked, the click event doesn't bubble up to the document, where you will have already set up a click event handler that makes the pop up go away:
$(document).on('click', function(event) {
// We want to hide the pop up, but not if you click on
// the pop up itself - - anywhere else, but not the pop up
if(event.target.id !== "pop-up"){
$('#pop-up').hide();
}
});
See this fiddle for a working version: https://jsfiddle.net/0ajpd9go/8/
If you want your div to just appear on the screen change this line:
jQuery('#pop-up').toggle('fast');
to this:
jQuery('#pop-up').show();
Maybe you'd like to give bootstrap modal a try:
http://getbootstrap.com/javascript/#modals
I think what you are looking for is $.fn.toggle();
$.fn.toggle(); toggles the visibility of an element meaning if the element is visible then it will be hidden when toggled and if the element is hidden it will be shown when toggled.
Here is a basic (animation free) example of using toggle:
$(".button-that-toggles").on("click", function() {
$(".div-to-toggle").toggle();
});
Your box toggles with an "enlarging animation" because you used $.fn.slideToggle();
There are three default ways to toggle using jQuery (toggle, fadeToggle and slideToggle)
Here is an example of toggling a element using $.fn.fadeToggle();:
$(".button-that-toggles").on("click", function() {
// NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds.
$(".div-to-toggle").fadeToggle(250);
});
Here is an example of toggling a element using $.fn.slideToggle();:
$(".button-that-toggles").on("click", function() {
// NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds.
$(".div-to-toggle").slideToggle(250);
});
Also here is an example of how you can hide your div by clicking anywhere on the page:
// listen for a click anywhere in the page
$(document).on("click", function(event) {
// make sure the element that was clicked is not your div
if(!$(event.target).is(".your-div")) {
// you can now hide your div
$(".your-div").hide();
}
});
Also please remember that jQuery is JavaScript as a matter of fact jQuery is a library written in JavaScript.
I have a gallery type of interface that I'm trying to get to work, I want to be able to click outside of it to close it, however there is a div inside that contains the main elements, photos, and things to click. However as it is now when you click inside the div it closes, because it's a child in the element that when you click it closes.
I have the divs like this:
<div class="theater-wrapper">
<div class="theater-container"></div>
</div>
everything is loaded into theater-container via ajax.
When you click .theater-wrapper it should fire the event to close, however when you click theater-container it shouldn't.
This is how I have tried to close it:
$(".theater-wrapper").click(function (event) {
$('.theater-wrapper').hide();
event.stopPropagation();
});
I have a jsfiddle showing this in action: http://jsfiddle.net/Cs8Kq/1/
If you want to stop propagation of the click event on .theater-container, then that's where you need to put the command. Right now you have it applied to the .theater-wrapper click action.
$(".theater-container").click(function (ev) {
ev.stopPropagation();
});
I have a help popup that I want to close when somewhere else is clicked. Here's what I have:
$('.help[data-info]').click(function(){
$('.info[a complicated selector]').toggle(400);
$('*:not(.info[the complicated selector]).one('click','',function(){
.info[the complicated selector].hide(400);
});
})
But one() isn't what I want before it fires for each element on the page. I only want it to fire once.
It looks like you are attaching event handlers to every element in your dom except the help popup? Hmm...
How about this:
Create a single "mask" div that overlays the entire screen, but is transparent (opacity: 0.0). Attach the click event handler only to that mask div. Then open up the info div on top of the overlay div. Clicking anywhere on the page, other than the info div, the event will be captured by the mask div before it gets to anything under it. In your event handler, hide() the info div, and remove the mask div altogether. While testing/experimenting with this, start with a partially opaque mask, not fully transparent).
Make use of a boolean variable and set it to true after first click, so it doesn't trigger the action again:
$('.help[data-info]').click(function() {
var clicked = false;
$('.info[a complicated selector]').toggle(400);
$('*:not(.info[the complicated selector]').one('click','',function() {
if (!clicked) {
.info[the complicated selector].hide(400);
clicked = true;
}
});
})
A couple of options:
You can use the blur event instead of binding a click event to everything but your popup.
Add a transparent, full-page div between the popup and the rest of the page. A click event on the transparent div could handle the hiding.
If you only want to fire once across all your elements, then you may have to manually unbind all the event handlers when any one is clicked or use a flag:
$('.help[data-info]').click(function(){
$('.info[a complicated selector]').toggle(400);
var sel = $('*:not(.info[the complicated selector]);
function hideInfo() {
.info[the complicated selector].hide(400);
sel.unbind('click', hideInfo);
}
sel.bind('click', hideInfo);
})
I have a some elements, roughly like this:
<div>
<a>
<div>
When a user clicks anywhere on the div, I want the a element to be clicked - for usability purposes.
Simple right? So I wrote this:
$('div.class').click(function(){
$('a.class', this).click();
console.log('clicked');
});
Trouble is, this clicks the a element alright, but the event propagates to the div, which clicks it, which clicks the a, which... well you can see where it's going.
I cooked up a sample on JSfiddle here
but it doesn't show the console log. So if you click, Firebug doesn't show anything. but my local site sets Firebug crazy with logs (clicked) so much that in the end script gets killed saying too much recursion on this page
How do I stop this recursion?
Yes I know, I know that I can use window.location for this purpose, but clicking the link does some extra work and also uses window history for browsers, so I really want to click that vicious a without making it click its Dad. Or Mom. Or whatever that div is.
PLEASE READ
Since everyone is suggesting the same thing over and over again, and it's not working, please take a look this JSfiddle. Try it and see if it works before you answer. When you click on a div, Google should load up. That's what I'm looking for.
If this is is your markup:
<div>
<a></a>
</div>
...all you will need to do is in your css do something like:
div a { display: block};
The anchor element will then stretch and occupy all the available space in the parent div. However, if some other elements exist within that div, you could do:
$('a.class').click(function(event){
event.stopPropagation();
alert('you clicked on me');
});
$('div.class').click( function () {
$(this).children('a.class').trigger('click');
});
Use the event.stopPropagation() method.
How about this?
$('selector').attr('onclick')()
Instead of using the click event on the child node, just set the browser location to the href value
$('div.class').click(function(){
location = $(this).find('a').attr('href');
});
$('div.class').click(function(event){
event.stopPropagation();
$('a.class', this).click();
console.log('clicked');
});
You need to add the event argument and a stopPropagation method to the handler.
http://jsfiddle.net/nicktheandroid/ZSvHK/
I need help figuring out how to get this right, problems listed below. If you could suggest any improvements, that'd be great.
I have multiple divs, each div has it's own trigger(button).
Only one menu can be open at a time, so if I have DIV1 shown, and I click the trigger for DIV2: then DIV1 should close, and DIV2 should open.
If the DIV is being animated when I click the trigger(button), then don't do anything, to keep from queuing up and having other problems.
If the DIV is open and I click on anything outside of the DIV, the DIV closes, which is correct behavior. Check out the example.
My problem:
is that if I have DIV2 open,
and I click the the trigger(button)
for DIV1, DIV2 doesn't
close like it should.
When double clicking the button(when
DIV is hidden, click, then while
it's still animating click again)
the DIV SlidesDown like it's
supposed to, but then it slidesUp.
The button shouldn't accept anything
while the DIV is animating, AKA I
don't want it to queue like that.
And in the future I wont be using a
button for the trigger, so disabling
wont work.
Looks like an accordion to me : http://jqueryui.com/demos/accordion/
My solution would be to add a proper id for each button:
<button rel="search" id="searchButtonId">click</button>
Then, you can bind the click event for the buttons and check which one has been clicked on:
$("button").click(
function() {
if ( $(this).is("#searchButtonId") ) {
$("#search").slideDown(800);
$("#bottom").slideUp(800);
} else if( $(this).is("#bottomButtonId") ) {
$("#search").slideUp(800);
$("#bottom").slideDown(800);
}
}
);
But, with this solution the divs are not closed if you click somewhere else.
You can close all divs before open one. Something like this (with variation)
$('.mydivs').hide();
$('.mydivs.div1').show();