I have a dropdown menu inside a DIV.
I want the dropdown to be hide when user click anywhere else.
$('div').blur(function() { $(this).hide(); }
is not working.
I know .blur works only with <a> but in this case what is the simplest solution?
Try using tabindex attribute on your div, see:
Check this post for more information and demo.
I think the issue is that divs don't fire the onfocusout event. You'll need to capture click events on the body and then work out if the target was then menu div. If it wasn't, then the user has clicked elsewhere and the div needs to be hidden.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
give the div an id, for instance "menuContainer". then you can check by target.id instead of target.tagName to make sure its that specific div.
Not the cleanest way, but instead of capturing every click event on the page you could add an empty link to your div and use it as a "focus proxy" for the div.
So your markup will change to:
<div><a id="focus_proxy" href="#"></a></div>
and your Javascript code should hook to the blur event on the link:
$('div > #focus_proxy').blur(function() { $('div').hide() })
Don't forget to set the focus on the link when you show the div:
$('div > #focus_proxy').focus()
I just encountered this problem.
I guess none of the above can fix the problem properly, so I post my answer here. It's a combination of some of the above answers:
at least it fixed 2 problems that one might met by just check if the clicked point is the same "id"
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
.click will work just fine inside the div tag. Just make sure you're not over top of the select element.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
Related
I want to create a flashing effect. When user click the flashing element, it will be disappeared. However, it seems not every "user's click" can fire the "click event". Sometimes, when I clicked the flashing element, it didn't disappear. I thought the reason is a hidden element can not be clicked. Just like this article says CSS: Is a hidden object clickable?. So, is there other methods to make the flashing element disappeared immediately when user clicks the element?
var flashToggle = setInterval(function() {
$("div").toggle();
}, 200)
$("div").on("click", function(e) {
clearInterval(flashToggle);
$(this).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Flashing element</div>
Put the flashing element inside another element, and put the handler on that parent element. Also, you might change the visibility property of the flashing element, not the display of the flashing element, so that it doesn't change the layout of your page every time it appears or disappears.
const child = $('#child');
let visible = true;
var flashToggle = setInterval(function() {
visible = !visible;
child.css('visibility',
visible
? 'visible'
: 'hidden'
);
}, 500)
$("#container").on("click", function(e) {
clearInterval(flashToggle);
$(this).hide();
})
div {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="child">Flashing element</div>
</div>
Yes, hidden/toggle will hide elements by setting the css display. When hidden, elements can not receive clicks. You can try the following:
Use .css('visibility','hidden|visible') instead. This is recommended as it does not have the side effect of changing container size and causing jiggling of other elements.
Wrap your flashing element inside a container element, register the click on the container element instead.
$(this).hide(); ---> $("div").hide();
I think this might be what you're looking for: $("my-element").click()
Try to use opacity : 0|1 instead of display: none / visibility: hidden.
On click event on opacity: 0 worked for me.
It worked for me.
I have a dropdown menu inside a DIV.
I want the dropdown to be hide when user click anywhere else.
$('div').blur(function() { $(this).hide(); }
is not working.
I know .blur works only with <a> but in this case what is the simplest solution?
Try using tabindex attribute on your div, see:
Check this post for more information and demo.
I think the issue is that divs don't fire the onfocusout event. You'll need to capture click events on the body and then work out if the target was then menu div. If it wasn't, then the user has clicked elsewhere and the div needs to be hidden.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
give the div an id, for instance "menuContainer". then you can check by target.id instead of target.tagName to make sure its that specific div.
Not the cleanest way, but instead of capturing every click event on the page you could add an empty link to your div and use it as a "focus proxy" for the div.
So your markup will change to:
<div><a id="focus_proxy" href="#"></a></div>
and your Javascript code should hook to the blur event on the link:
$('div > #focus_proxy').blur(function() { $('div').hide() })
Don't forget to set the focus on the link when you show the div:
$('div > #focus_proxy').focus()
I just encountered this problem.
I guess none of the above can fix the problem properly, so I post my answer here. It's a combination of some of the above answers:
at least it fixed 2 problems that one might met by just check if the clicked point is the same "id"
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
.click will work just fine inside the div tag. Just make sure you're not over top of the select element.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
I want to fix a problem I have attaching an onclick element to a div ( and only to it! )
Please look at following code :
<script>
function goToo(url,idd){
alert(idd);
if (idd=="onlyMe")
window.location=url;
}
</script>
<div id="onlyMe" onclick="javascript:goToo('http://www.google.com', this.id)" style="<-index:-150">
<form><input type="text" name="coap"></form>
<h3>This is an element where click should work!</h3>
<div id="notME">
<h3>In this point it should not work!</h3>
</div>
</div>
I want the onlick to be triggered only in the div clicking.
Please check the example live # http://modacalcio.com/HtmlProblemForm.html
The click is triggered everywhere, expecially in the form input.
Obiovusly I wish to use this without deleting onclick in children nodes, as they have their own onclick that still need to work
Also with jquery I have same problem
any help?
$('#onlyMe').on('click', function(evt) {
if ($(evt.target).parents('#notME').length === 0 && evt.target.id !== 'notME') {
location.href = "http://...";
}
});
example fiddle: http://jsfiddle.net/zhkr2/2/
the idea is to check if the event was triggered on #notME element or inside an element contained in #notME, so I check if an ancestor is that element
just give for 'div' some width
#onlyMe
{
width:
height:
}
and close the div properly .
I currently have a list with one particular link that hides/shows a hidden div. As a link is clicked the class 'active' is removed and added and the hidden div checked to see whether it is visible or hidden and hidden/shown accordingly. This all works ok, but, there is one problem. When I click Square I want to show the #square but when I click it again I want to hide the #square but because Im checking for the .active this cant be done. Can anyone offer any suggestions on how I can update the code so this can be achieved?
JS
$(document).ready(function(){
var square = $('#square'),
test = $('#test');
square.hide();
test.find('a').on('click', function(e){
if( !$(this).hasClass('active') ){
if ( square.is(':visible') ){
square.hide();
}
var id = $(this).data('id');
test.find('a').removeClass('active');
$(this).addClass('active');
if( id === 'square' ){
square.show();
}
}
e.preventDefault();
});
});
HTML
<ul id="test">
<li>Triangle</li>
<li>Square</li>
<li>Circle</li>
</ul>
<div id="square"></div>
Fiddle: http://jsfiddle.net/xBuUY/
I made a fork of your Fiddle.
I've moved the block for testing whether the square should be visible or not outside of checking which link should be active. The #square is toggled and not only shown which garanties that it's hidden when it's already active. Just test the Fiddle.
Apart from that I optimized the event-handler: It now uses delegation, which is faster than just the link handler on each of the links. Bubbling of the links is prevented by e.stopPropagation(). I've added this before any other methods or anything else is called for performance reasons.
Move this block of code --
if ( square.is(':visible') ){
square.hide();
}
outside of the hasClass('active') check.
Your logic can be simplified, you're wanting to toggle square regardless of class, so I've removed the square toggle outside of the class test. Try this Fiddle HERE
I have following code:
HTML:
<div class="one">Content</div>
<div class="two">Content</div>
I want to hide my second div when mosueleave event happen from first div and also the mouse don't have over second div.
Algorithm:
if ((mouseleave from div.one) && (mouse not on div.two))
hide (div.two);
How can I implement this snippet using jquery? please help me.
You can set a flag on the .two div that keeps track of the mouseover state. Then when the mouse leaves .one you check for this state and if it exists you hide the div. Like so:
$(".two").live("mouseenter", function(){
$(this).data("hover", true);
}).live("mouseleave", function(){
$(this).removeData("hover");
});
$(".one").live("mouseleave", function(){
if( !$(".two").data("hover") ) $(".two").hide();
});
enclose both divs in another, say, div class='zero'. so you would have something in your $(document).ready() like
$('.zero').live('hover', function() {
$('.two').show();
});
$('.zero').live('blur', function() {
$('.two').hide();
});
note: you must style="display: none" for div class='two' by default