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
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 am using this code but it's not working.
Jquery Code: I am create div for captcha i want not copy or select this contents (Captcha code).
$(document).ready(function() {
$("#lo").on("contextmenu",function(e){
return false;
});
});
HTML Code:-
<div id="lo">CAPTCHACODE2321</div>
You can try the below code
HTML
<div id="lo" class="preventLeftClick">wwww</div>
Jquery
$('.preventLeftClick').on('click', function(e){
e.preventDefault();
return false;
});
Note: You can use this with any number of divs. You just need to add the class preventLeftClick with that div only
try this its prevent the click it showing as normal mouse pointer when hover the hyper link .
<div id="lo" style="pointer-events:none;">wwww</div>
One way would be to disable pointer-events in css so no events would be generated.
#lo { pointer-events: none; }
The element is never the target of mouse events; however, mouse events
may target its descendant elements if those descendants have
pointer-events set to some other value. In these circumstances, mouse
events will trigger event listeners on this parent element as
appropriate on their way to/from the descendant during the event
capture/bubble phases.
Another way would be to catch click and disable default browser behaviour.
$(document).ready(function() {
$("#lo").on("click",function(e){
e.preventDefault();
return false;
});
});
You can add a simple css3 rule in the body or in specific div, use "pointer-events: none;" property.
Check this sample code
I have the following html code:
<div class="card">
<img src="test.jpg" />
<p class="alt-text">Some Text</p>
<p class="actions" style="display: none;">Some Buttons</p>
</div>
And the following JS code
$(".card").on("mouseover", function(){
var $t = $(this);
$t.find(".actions").toggle();
$t.find(".alt-text").toggle();
});
If I hover over the Card-Div, the text under the image should change from "Some Text" to "Some Buttons".
Ok, if I hover over the image, its working, but if I go some pixels down (to the paragraph), the hover event is triggered again and the text switches again.
My question is: Why is the hover event triggert again and how can I prevent this?
EDIT:
Ok, I am so stupid.
The problem was, that if I toggle the paragraph, the paragraph gets hidden. Now the div isn't that height anymore, so I leave the div for some microseconds. But afterwards the second paragraph is shown, and the cards-div height becomes the old height. So the hover event is triggered again.
Now we have an endless loop :D
You need to use mouseenter, mouseover is a bubbling event which will be fired when you change over from one descendant to another one.
$(".card").on("mouseenter", function(){
var $t = $(this);
$t.find(".actions").toggle();
$t.find(".alt-text").toggle();
});
Demo: Fiddle
If you want to switch back also then use the hover() method
$(".card").hover(function (e) {
var $t = $(this);
$t.find(".actions").toggle(e.type == 'mouseenter');
$t.find(".alt-text").toggle(e.type == 'mouseleave');
});
Demo: Fiddle
See this fiddle, you can see how the mouseover is getting triggered by the descendant elements
You can use hover event as shown below
$(function(){
$(".card").on("hover", function(){
var $t = $(this);
$t.find(".actions").toggle();
$t.find(".alt-text").toggle();
});
});
JSFiddle Demo
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() };
});