We Keep Coding

Check next hovered item with jQuery

I have the following code that detects if a user is hovering over a box:
var toolTipHover = false;
$('#chartTooltip').on('mouseover', function () {
toolTipHover = true;
}).on('mouseout', function () {
toolTipHover = false;
});
$('.box').on('mouseover', function () {
$('#chartTooltip').show();
}).on('mouseout', function () {
console.log(toolTipHover);
if (!toolTipHover) {
$('#chartTooltip').hide();
}
toolTipHover = false;
});
And if they are then it shows the #chartTooltip element. (The tooltip is positioned and populated via some other means.)
However if the user hovers the tooltip itself it causes the tooltip to disappear (because they are no longer hovering the box). So I'm trying to check if the tooltip is being hovered (i.e. the next element hovered). and if so then ignore the mouseout event.
But toolTipHover is always false. I presume due to a race exception where mouseout has completed before the mouseover for the #chartTooltip can return the variable value of true.
How can I get around this?

I'm going to assume #chartToolTip is outside of .box for this. Instead of a flag variable (toolTipHover), just check the mouseleave event toElement property. So for example:
$('.box').on('mouseleave', function(e){
if (!$(e.toElement).is('.tooltip')){
$('.tooltip').hide();
}
})
Here is an example: https://jsfiddle.net/qvqafyf2/
$('.tooltip').hide();
$('.box').on('mouseover', function(e){
$('.tooltip').show();
})
$('.box').on('mouseleave', function(e){
if (!$(e.toElement).is('.tooltip')){
$('.tooltip').hide();
}
})
$('.tooltip').on('mouseleave', function(e){
if (!$(e.toElement).is('.box')){
$(this).hide();
}
})
.box{
width: 200px;
height: 200px;
background: red;
}
.tooltip{
height: 50px;
width: 50px;
background: green;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<div class="tooltip">
hi
</div>

You could add #chartTooltip with .box in your function like this:
$('.box , #chartTooltip').on('mouseover', function()
here is fiddle

closing a modal when clicking on a link

I'm using on my website a kind of modal overlay to display a full size image when clicking on a thumbnail.
here is my JS :
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
})
.mix.photos is my div containing the img.
when clicking on .mix.photos it oppens my #modal_inner wich displats the var img. (the src of the full size image is in my .data("imagefull").
it works great, but I'm trying to add a link to close the #modal_inner when clicking on it.
here is my CSS :
#modal_inner{
width: 847px;
height: 374px;
position: absolute;
top: 0px;
left: 0px;
padding-left: 120px;
background-color:rgba(187, 187, 187, 0.8);
display: none;
padding-top: 10px;
z-index: 1000;}
and my HTML :
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
</div>
can anybody help me with this ?
thanks a lot

Try this.
To add close button
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
$('<div id="modal_close">CLOSE</div>').appendTo('#modal_inner');
});
Closing function
$(document).on('click','#modal_close',function(){
$('#modal_inner').empty().fadeOut();
})

You should be able to use the following code:
//if you want the modal to close when clicking on the modal itself:
$("#modal_inner").on("click", function(){
$(this).fadeOut();
});
//if you want the modal to close when clicking on the close button ie <div id="modal_close">CLOSE</div>:
$("#modal_close").on("click", function(){
$("#modal_inner").fadeOut();
});
you can add a link to your html markup
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
My Link to Close the modal
</div>
and then do the following:
$("#modal_inner a").on("click", function(){
$("#modal_inner").fadeOut();
});

Something like this will work:
$(".mix.photos").on("click", function () {
var img = $(this).children("img").data("imagefull");
$modal = $("#modal_inner").find('.image').html("<img src='" + img + "' />").end()
.fadeIn(function() {
var self = this;
$(this).on('click', '#modal_close', function() {
$modal.off().hide();
});
});
});
You can also delegate close event to the document object, but I don't want all the clicks to be checked even when overlay is hidden.
Demo: http://jsfiddle.net/PG2Z8/

Chrome: Recover document focus after jquery fadeOut

I'm trying to have an overlay that I can toggle with keyboard keys.
However, once I hide the menu using fade out, the document won't receive my keydown events until I click in the window. How can I make the document receive focus so that it will listen directly after fade out has finished?
<div id="overlay" class="overlay">
<input type="text" value="test"/>
</div>
$('#overlay').on('keydown', function() {
$('#overlay').fadeOut(1000);
return false;
});
$(document).on('keydown', function() {
$('#overlay').fadeIn(1000);
return false;
});
.overlay {
position: fixed;
background: black;
color: white;
width: 50%;
height: 100px;
}
See jsFiddle also
Put cursor in input field, press one key.
It should fade out over a second. After that document is not receiving any keydown until I click in it with the mouse. How can I make document receive focus so that I could toggle the modes with just one keyboard key?
Edit: Tested the fiddle in different browsers. This problem seems to be specific for chrome.

Remove focus from your text field after fading out your overlay
Working Fiddle
$(document).ready(function () {
$('#overlay').on('keyup', function () {
$('#overlay').fadeOut(1000);
$("input[type='text']").blur();
return false;
});
$('body').on('keyup', function () {
$('#overlay').fadeIn(1000);
return false;
});
});

Make Notification Div Fade Out When User Click Anywhere Outside The Notification Div

I'm making website that have notification 'button'. When user click this button, notification div will appear at the bottom of the button.
I want to make its behaviour like notifacation in facebook. the notification will disappear when user click anywhere outside the notification div element.
So far, i've succeed to make the notification div to fade in and fade out when the notification button clicked. i'm using jquery to do this.
but, i don't know how to make it fade out when user click anywhere outside the notification div.
Can anyone help me?
Here is my code that i've made:
<div id="notifikasi" style="position:relative; cursor:pointer">Notification<sup style="padding: 2px 4px 2px 4px; background: red"></sup>
<div id="theNotif" style="position: absolute; top: 20px; left: 0px; background: #fff; color: #000; border: solid 1px #999; z-index: 999; padding: 10px 20px 10px 0px; width:200px; display:none">
<ul>
<li>Some Notification</li>
<li>Some Notification</li>
<li>Some Notification</li>
</ul>
</div>
</div>
<script>
$('#notifikasi').click(function(){
if($('#theNotif').css('display') == 'none'){
$('#theNotif').fadeIn('fast');
}
else{
$('#theNotif').fadeOut('fast');
}
});
</script>

Try this:
$(document).mouseup(function (e)
{
var myDiv = $("#theNotif");
if (myDiv.has(e.target).length === 0)
myDiv.hide();
});

How about:
$('#notifikasi').click(function(){
$('#theNotif').fadeIn('fast', function() {
$(document).one('click', function(e) {
$('#theNotif').fadeOut('fast');
});
});
});
// prevent triggering when clicking the actual notification
$('#theNotif').click(function() { return false; });​
Demo
Once the notification has faded in, a one-time-only click listener will be added to the document listening to any click.
Edit
Having played around like this a bit myself, I've come to the conclusion that .one is not really as useful here as I first imagined, as it requires a few other workarounds. The reason I used it was that it irked me to have to constantly listen to every single document click, just to cover the scenario where a notification was open.
I've decided instead that a neater way would be to use bind and unbind.
function closeNotification(e) {
if($(e.target).closest('#theNotif').length > 0) {
// notification or child of notification was clicked; ignore
return;
}
$('#theNotif').fadeOut('fast');
$(document).unbind('click', closeNotification);
};
$('#notifikasi').click(function(){
$('#theNotif').fadeIn('fast', function() {
$(document).bind('click', closeNotification);
});
});
Demo
The code above is conceptually rather similar to the original code. After fade-in, a click listener is registered at the document. This time, a check is made within the document click listener, to see if the clicked element was #theNotif or a child of #theNotif, in which case the close function exits immediately.
Otherwise, it proceeds to close the notification and then immediately unbind the listener.
Note that you'll have to use a named function, not an anonymous inline one as you might be used to in jQuery, in order to be able to properly unbind it.

Set a variable when mouse moves over notifikasi (say a=1), unset it when moves outside.
Similarly for theNotif.
Now
$(document).click(function(){
if(a == 0){
if($('#theNotif').css('display') == 'block' || $('#theNotif').css('display') == ''){
$('#theNotif').fadeOut('fast');
}
}
});

How to make a click on a child element not be considered a click on it's parent in jQuery?

The question of how to detect a click on anywhere except a specified element has been answered a couple of items like here:
Event on a click everywhere on the page outside of the specific div
The problem I have is trying to figure out how to detect a click anywhere except a given element including one of it's children.
For example in this code:
http://jsfiddle.net/K5cEm/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
$(document).click(function(e) {
$('#somediv').hide();
});
$('#somediv').click(function(e) {
e.stopPropagation();
});
});
</script>
<div style="border: 1px solid red; width:100px; height: 100px" id="somediv">
<span style="display: block; border: 1px solid green; width:50px; height: 50px; margin: 0 auto" id="someSpan"></span>
</div>
Clicking anywhere outside the red div should cause it to hide. Not only that but also clicking on it's child element (the green span) should cause it to hide. The only time it shouldn't hide is if you click on it but not on the span. As it stands now, the click on the span is also considered a click on the parent div hence it doesn't hide the div if the span is clicked.
How to achieve this?

You can compare the click's target to the element in question:
$(document).click(function(e) {
if (e.target != $('#somediv')[0]) {
$('#somediv').hide();
}
});
Demo: http://jsfiddle.net/K5cEm/7/

Add this:
$('#somediv').click(function(e) {
e.stopPropagation();
}).children().click(function(e) {
$('#somediv').hide();
});
Here's your updated working fiddle: http://jsfiddle.net/K5cEm/5/

I'd do it like so:
$(function () {
var elem = $( '#somediv' )[0];
$( document ).click( function ( e ) {
if ( e.target !== elem ) {
$( elem ).hide();
}
});
});
Live demo: http://jsfiddle.net/uMLrC/
So this
var elem = $( '#somediv' )[0];
caches the reference to the DIV element. We want to cache this reference on page load, so that we don't have to query for that element repeatedly. And it improves the readability of the code, also.