We Keep Coding

Click link below a div that also has a clickable event

I have a div that has a clickable event. In this case it's just a console.log, below the div I have an a href and I would like that when the user clicks on the div and not the a href it shows the console.log, but if the user clicks on the a href it opens the link instead of showing the console.log.
Is this possible?
$('.top-item').on( "click", function() {
console.log("div clicked");
});
.top-item {
width: 100px;
height: 50px;
position: absolute;
left:0;
top:0;
background-color: rgba(255,0,0,.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-item">
</div>
Click me
So when top-item is clicked show console.log, when a href is clicked despite being under top-item open the link instead of console.log.
Any ideas? Thank you.

https://jsfiddle.net/6b5sf4xc/1/
Then u should calculate from coordinates like below example. U calculte a coordinates then click placed coordinates then compare
$('.top-item').on( "click", function(e) {
var coor=$("a").position();
checkCoordinate(coor.left,coor.left+$("a").width(),coor.top,coor.top+$("a").height(),e.pageX,e.pageY);
});
function checkCoordinate(x1,x2,y1,y2,clickx,clicky){
if(clickx>=x1 && clickx<=x2 && clicky<=y2 && clicky>=y1){
console.log("a clicked");
}
else{
console.log("div clicked");
}
}

Make everything unclickable but one element [duplicate]

This question already has an answer here:
Click only inside div
(1 answer)
Closed 7 years ago.
I'm making popup. And when it appears I want everything be unclickable but this very popup.
Here's some lousy code example:
<div class="content-unclickable">
<div class="popup-clickable">some info and buttons</div>
</div>

$('content-unclickable *').on('mousedown', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
You can return false and use to e.preventDefault(); prevent Default behavior and e.stopPropagation(); all items will stop propagation

I suppose you want to display an overlay over the page that contains some elements.
Check the following example:
First, if you click on 'page element' an alert pops up.
Click on 'open popup' and you want be able to click 'page element':
$('#open-popup').on('click', function() {
$('#popup').show();
});
$('#page').on('click', function() {
alert('you clicked on page!');
});
$('#popupElem').on('click', function() {
alert('you clicked onside popup!');
});
#popup {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:100;
display:none;
}
.popup-inner {
position:fixed;
width:200px;
height:150px;
top:50%;;
left:50%;
margin-top:-75px;
margin-left:-100px;
background-color:#ececec;
z-index:110;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="page">page element (click on me!)</span><br />
<span id="open-popup">open popup!</span>
<div id="popup">
<div class="popup-inner">some info and buttons <b id="popupElem">click</b></div>
</div>

Depending on hold the box after close it

When I click to the button and close my box with jQuery ( Toggle ) ,If the box closed I want to box will depend on hold after I refresh the page . Or If it's Open ,after I refresh the page It will stay open.
I don't know the code that help me do what I want .
For example I wrote a code when we click on red Square , the blue square will be disappear and when we click on it again the blue square will be appear . but there is a problem that after I refresh the page My data or changes will be forgotten .
DEMO
CSS :
.close-open {
background:red;
width:50px;
height:50px;
float:left;
}
.box {
background:blue;
width:100px;
height:100px;
float:left;
clear:left;
margin:40px 0px 0px 0px;
}
HTML :
<span class="close-open"></span>
<div class="box">Test Box Toggle</div>
jQuery :
$(document).ready(function(){
$(".close-open").click(function(){
$(".box").toggle();
});
});

You can achieve this with some ways. I will show one with Web Storage:
js
$(document).ready(function(){
var isClose = localStorage.getItem("isClose");
if(isClose == "false"){
$(".box").hide();
}
$(".close-open").click(function(){
$(".box").toggle(
function(){
localStorage.setItem("isClose", $(this).is(':visible'));
});
});
});
fiddle
The localStorage object stores the data with no expiration date. The
data will not be deleted when the browser is closed, and will be
available the next day, week, or year.

If you want restrict this functionality to the particular session you can use this...
$(document).ready(function(){
if(sessionStorage.isVisible == "false" ){
$(".box").hide();
sessionStorage.isVisible = "true";
}
else
sessionStorage.isVisible = "false";
$(".close-open").click(function(){
sessionStorage.isVisible = $(".box").toggle().is(':visible');
});
});
fiddle Demo

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');
}
}
});