I'm trying to make a Div that is initially hidden to show up and stay toggled unless i do one of the following events (so in that case they hide again):
reclick on the same element that displayed the div on the first hand
click outside the div (container)
click outside of a div's children (descendant of the container)
This is the code i come up with :
(#menu_login being the menu on which i click to make the div appear and .bubble being the div in question)
$(document).ready(function(){
$(".bubble").hide();
$("#menu_login").click(function(){
$(".bubble").toggle();
});
$(document).mouseup(function (e)
{
var container = $(".bubble");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
So first, the hide_on_load function works well, but the toggle and mouseup function seems to be in a conflict when running together.
They work well when i use only one of them (and i really like this mouseup function because of the way it allows me to click on the container's descendants even when outside of the div).
The thing happening is when i click on the menu and toggle the div, if i click it again to untoggle and hide the div my mouseup function creates a conflict :
It looks like because i on the menu again to untoggle and hide the div again, the mouseup function also detects that i clicked outside of my div and hide my div before my toggle function can.
So what happen is that the toggle function won't detect that i clicked the menu to untoggle and hide the div, but that i clicked to toggle and show the div because the mouseup function closed it 0.01sec before.
So i don't really know how to do to have theses two functions working together, i had some kind of idea about adding an exeption that says to the mouseup function not to hide the div if i click on the menu (the same it doesnt close it if i click on a div's descendant) so my toggle function can do it and there is no conflict, but my knowledges in JQuery are non-existent.
exemple :
$(document).mouseup(function (e)
{
var container = $(".bubble");
if (!container.is(e.target) container...
&& container.has(e.target).length === 0)
// and here : "don't close it if i click on my #menu_login neither
{
container.hide();
}
Any help/suggestion is welcome, sorry if this a bit heavy to read but i tried to be as specific as possible.
Thank you !
-Apatik
There are three parts you have to consider:
The toggling action you see when #menu_login is clicked (you have addressed this already). But what's more important is that we want to make sure the click event from this element does not bubble up to the document object, for which we will listen for click as well. This is done by using event.stopPropagation().
To prevent clicks within the .bubble element from bubbling up, you will have to prevent the event from propagating when originating from it, too.
Listen to click event bubbling up to the document. Since we used event.stopPropagation() on the anchor element, click events will not bubble from it, but will from the rest of the document (i.e. other elements). We conditionally hide the .bubble element if it is visible, by using .filter().
$(function(){
$('.bubble')
.hide()
.click(function(event) {
// Stops click event from bubbling to document (point #2)
event.stopPropagation();
});
$('#menu_login').click(function(event){
// Stops click event from bubbling to document (point #1)
event.stopPropagation();
// Toggle visibility (point #1)
$('.bubble').toggle();
});
$(document).click(function() {
// Hide bubble if visible (point #3)
// Will listen to click events from all other elements
// ... except for `#menu_login` because we have
// ... prevent the click event from bubbling up
$('.bubble').filter(':visible').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="menu_login" href="#">Menu login</a><div class="bubble">Bubble</div>
Related
I am trying to hide a div and its children when the div is clicked, but not when any event occurs to any of its children; such as, swipe, tap, or click.
The jQuery that hides the div on click is simple:
$("#tabs").click(function(){
$(this).fadeOut();
});
But I've noticed that when it's children are clicked or swiped, the div fades out.
How can I prevent the div from fading out when those events occur on its children, but allow it to fade onclick of only itself?
Check if the element clicked is the same element that was bound:
$("#tabs").click(function(e){
if (e.target == this)
$(this).fadeOut();
});
I have a button which, when clicked, changes the visibility of a div as such:
<button type="button" id="editbutton" onclick="plus()" alt="Edit"></button>
function plus() {
var f = document.getElementById('edit');
if (f.style.visibility == 'hidden') {
f.style.visibility = 'visible';
}
else
f.style.visibility = 'hidden';
}
This works fine. But now I want to add the functionality so that if the user clicks anywhere outside of the div, the div will go back to being hidden.
Initially I tried my own methods, but was unsuccessful because whenever I click the button to make the div visible, it is made hidden again by the new code. I've looked into some of the jQuery examples others have posted, however none of the ones I have tried fix this problem. Any help would me much appreciated.
EDIT: To clarify, the issue is that because the div is initially made visible by the user clicking on a button, whenever I click the button, the div is made visible but is immediately hidden again because that counts as clicking on the body of the page.
You could call 'e.stopPropagation()' on the event from within your click event handler when a user clicks within your div - this will stop the event from 'bubbling' up the DOM.
And then if you attach an event handler to the BODY element listening for clicks, you can use that event handler to hide the DIV; knowing that a click on the DIV itself won't bubble the event up to the BODY handler.
In this way any click on another element, unless the handler also calls stopPropagation(), will get caught by your handler. So if there are other cases where you don't want the div to hide you can stop it happening by calling stopPropagation() as required.
E.g.:
$("#edit-button").click( function(e) {
$("#edit").toggle();
e.stopPropagation();
});
$('#edit').click(function(e) {
e.stopPropagation();
});
$("body").click( function(e) {
$("#edit").hide();
});
Set a click handler on the body element. In the event you can check event.target to see if it matches the div, if it does: do nothing, else: hide it.
document.body.onclick = function(event) {
if (event.target === f) {
// user clicked on the div, do nothing
} else {
f.style.visibility = "hidden";
}
};
This becomes a bit more complex if you have elements within the edit div (and the .target doesn't match), but I'm sure you can come up with a solution :) (it can be done).
you seem like you know what you're doing so I'll keep it short.
write a .click function in jquery.
you give your button an id (or the div it is in)
$('#buttonidordiv').click(function(){
$('#divtoshow').show() // put in a number to create a fade in seconds.
//your stuff here
}
and if someone clicks anywhere outside it... I think you should be able to use window. Else you can use another div (like your wrapper).
so
$('window').click(function(){
$('#samediv').hide() //same as above
//your stuff here
}
do realize, I suck with the )}; so you might have to add one of those somewhere ;)
best of luck!
I have a div that has an onclick that hides the div.
If I have a link inside the div, the link does not work, because the onclick steals the click.
The desired result: if a click is made anywhere inside the div BUT the link, that the div gets hidden. If a click is made ON the link, then I want the link to open in a _blank window, and the div to remain visible.
Is there a way to deal with this with javascript?
document.getElementById('yourlinksid').onclick = function(e){
// ... pop your window ...
/* the following prevents the event from "bubbling up"
to the div's event handler */
if(!e.stopPropagation) {
e.cancelBubble = true;
return;
}
e.stopPropagation();
};
Verification:
http://jsfiddle.net/kSTNT/4/
DEMO
Inside the click handler for the link, you'll want to call event.stopPropagation, or set e.cancelBubble to true—whichever your browser prefers. This will prevent the event from bubbling to your div.
document.getElementById("thelink").onclick = function (e) {
window.open();
if (e.stopPropogation)
e.stopPropogation();
if (e.cancelBubble != null)
e.cancelBubble = true;
};
If you control the links, the easiest way is to add onclick="event.stopPropagation();" (or whatever the cross-browser version of that is) to each link, which stops the div from seeing the event without preventing the default effect of the link from taking place.
Alternatively, if the links only contain text, then you can check the tag name of the event's target in the div's click event to see whether it is a link, but if you have something more complex then you need to walk the dom tree from the event target to the div to verify that no link exists.
I have a search input box that appears upon rollover of a button. Rather than having its own close button I would like to be able to click anywhere on the page to re-hide the Search.
If I attach a click handler to the document this works fine but the problem being is that the search itself is part oofthe document. So if you click the input (which of course you need to do in order to type in a search) the search disappers.
I had hoped I'd be able to write a function soemthing like this...
$(document).not("#search").click(function(){
$('#search_holder').fadeOut('fast');
});
i.e apply a click handler to the entire document APART from the search. Unfortunately that doesn't work.
so whats the answer?
thanking You in advance
Cancel the click event from propagating when it originates from the button you care about:
$("#search").click(function(event){
event.stopPropagation();
});
You can do it by stopping the click event from bubbling, like this:
$(document).click(function() {
$('#search_holder').fadeOut('fast');
});
$("#search").click(function(e) {
e.stopPropagation();
});
event.stopPropagation() prevents the bubble from going any higher, all the way to document triggering the .fadeOut(), everywhere else (by default) will bubble to document, causing the fade to occur.
Try this Its working perfect for me.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});
I currently have three Divs and only one of them is in focus at a given time. All of them line up in a film strip fashion. When I click a DIV not in focus, the current one moves to the left or right (depending on the direction) and the new one comes into focus.
The divs can have content that has links. So my problem is that upon clicking on the divs not in focus, if I happen to click on a link, the event is captured. Is there anyway I can disable event detection for divs not in focus?
What I am looking for is something like:
if(div not in focus)
disable all links
if (div comes into focus)
enable all links
Assuming that the active <div> has a class of Active, you can do it like this:
$('.Container div:not(.Active) a').live('click', function(e) {
return false;
});
Sounds like a selector problem. Can't you give those divs unique ids or classes to bind click events individually?
In your event handler, use
if (event.target.tagName == "a") // where `event` is the 1st argument passed
event.preventDefault(); // to the handler
This will prevent the default action if a link was clicked and still allow the div to move into focus.