We Keep Coding

in html captures click event on element that was displayed only on focus of another element

in html, sometimes I have elements that I display only when another one gain focus : you click on a button, to make another one appear.
If then you click on this newly displayed element, it disappears immediately because the focus gets away from the first one.
EDIT : And this is what I want. That could be a drop down menu for example, and I want the list to appears when clicking the title, and I want it to disappear when clicking on an element in the list.
but I also want to capture the click event before the element go away, and I can't do that ! example :
function make_action(element) {
console.log(element);
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
#buttons:focus p {
display: block;
}
#buttons p {
border: 1px solid blue;
display: none;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
I can workaround with the use of opacity and visibility with transition :
opacity to have the ux of the instantaneous hide of the element but it's still present so you can click on it
visibility is being delayed (sort of) with the transition, so for a moment you still have the element because it's still 'visible', but for human eyes it's not visible anymore
like that :
function make_action(element) {
console.log(element);
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
#buttons:focus p {
/*
display: block;
*/
visibility: visible;
opacity: 1;
}
#buttons p {
border: 1px solid blue;
/*
display: none;
*/
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
but, I'm not sure it's a good practice because the element is actually still on the page, so it can impact accessibility and maybe other things.
do you know a way to capture the click on the element, before it disappears ?
what I don't understand, is the following : the buttons disappears because the div lose it's focus. But, it loses it's focus BECAUSE a click occurred on one button, so why isn't this click on the button detected ? or how is it detectable ?

You can replace you :focus with :focus-within which was created specially for this purpose.
And to do so that when clicked the elements loses focus, you can use the blur method to do so :
function make_action(element) {
console.log(element);
element.blur()
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
/* there is the change */
#buttons:focus-within p {
display: block;
}
#buttons p {
border: 1px solid blue;
display: none;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>

Glitchy div attached to cursor

I am trying to attach a div to the cursor. The div only appears when it is over a specific box, and depending on the box it hovers over it is populated with an html message.
I've got the cursor attached to the mouse, but when I hover over any of the boxes (which also turn white when hovered over,) the div and the box "glitch" really hard. I assume this has to do something with the z-index, but I can't figure it out.
function mouseHandler(ev) {
document.getElementById('boxshadow').style.transform = 'translateY(' + (ev.clientY) + 'px)';
document.getElementById('boxshadow').style.transform += 'translateX(' + (ev.clientX) + 'px)';
}
document.getElementById("talk").addEventListener("mousemove", mouseHandler)
document.getElementById("time").addEventListener("mousemove", mouseHandler)
document.getElementById("chat").addEventListener("mousemove", mouseHandler)
$("#talk").mouseleave(function() {
$("#boxshadow").hide()
});
$("#talk").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message1")
});
$("#time").mouseleave(function() {
$("#boxshadow").hide()
});
$("#time").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message2")
});
$("#chat").mouseleave(function() {
$("#boxshadow").hide()
});
$("#chat").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message3")
});
.scrolltext {
position: relative;
border-bottom: 2px solid black;
letter-spacing: -15px;
white-space: nowrap;
line-height: 80%;
overflow-y: hidden;
overflow-x: scroll;
padding: 5px;
height: 160px;
width: 100%;
font-size: 200px;
z-index: 1;
}
#talk:hover {
background-color: white;
}
#time:hover {
background-color: white;
}
#chat:hover {
background-color: white;
}
#boxshadow {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
position: absolute;
z-index: 100000000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="boxshadow"></div>
<div class="scrolltext" id="talk">
<p>A TALK WITH A GOOD FRIEND</p>
</div>
<div class="scrolltext" id="time">
<p>A LOVELY TIME WITH A GOOD FRIEND </p>
</div>
<div class="scrolltext" id="chat">
<p>A CHAT WITH A GOOD FRIEND </p>
</div>
</div>

So I think what's happening here is that your cursor can't be hovering over the div if the #boxshadow element is in the way. So the cursor triggers the box because it's over the div, then immediately isn't over the div anymore because it's over the box. So it's flipping back and forth... forever.
To avoid this, add the css property pointer-events: none; to the box. The browser will basically ignore the box when it's asking whether the mouse is "over" the div, and that should stop the glitching.
NB: If you want the user to be able to click on something in the box (obviously not an option right now, but I don't know what your plans are), with pointer-events: none the click will pass through to the div below.

How to change background of another div without affecting the first one

I basically have to make this board that has numbers from 1 to 50 and whenever you click on one number, its background changes to a different color. I was able to do it with the first one by making the <div> clickable but I don't know how to do it with the second one that is supposed to have the value 2. Here are my codes
var Color = "#FF0";
function theFunction() {
if (Color == '#FF0') {
Color = '#F00';
} else {
Color = '#FF0';
}
document.getElementById('choose').style.backgroundColor = Color;
}
div#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
<div id="gameboard">
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
1
</div>
<div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
2
</div>
</div>
So what shall I do for the second div? Thanks

The easiest way is to remove the id's from your "number" divs, move all your styling code to CSS, and be sure to pass in this to the onclick event so you know which number div was clicked. You can then add a clicked class that turns the background red when applied and your JavaScript simply toggles the addition/removal of the clicked class.
function theFunction(e) {
e.classList.toggle("clicked");
}
#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
#gameboard div {
width: 240px;
height: 150px;
margin-left: 30px;
margin-top: 50px;
background-color: #FF0;
cursor: pointer;
font-size: 130px;
text-align: center;
}
#gameboard div.clicked {
background-color: #F00;
}
<div id="gameboard">
<div onclick="theFunction(this);">
1
</div>
<div onclick="theFunction(this);">
2
</div>
</div>
This will only work for current, modern browsers. If you need to support older versions of IE (namely < IE10) then you will have to change the JavaScript slightly to test for the existence of the clicked class, then add or remove it accordingly.
You might also consider using a framework, like jQuery, where you can easily toggle the add/remove of the clicked class and have all the browser-compatible code obscured within the framework.

Try this.
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">

First you gotta change
onclick="theFunction();"
to this
onclick="theFunction(this);"
And then your function will accept a parameter
function theFunction(element) {
[...]
element.style.backgroundColor=Color;
}
That parameter is the clicked element.

How to change border color in div ?

I am new to web development, i have learned basics of Java, JSP, HTML, JS, CSS, JQ. I am stuck at a point in which I am trying to change the border color of a div when mouse hover event occurs, but I am failing in doing so. Below is the related code, please point out the mistakes and point me in a better directions. Thanks alot in advance.
P.S: I have tried almost every stackoverflows questions/answers but I still failed to accomplished it. I thought it would be better if I post my own question with code to get suggestions for future aswell. Thanks is advance.
<div id="navBar" style="height: 50px; width: 480px;">
<div id="homeButton" style="float: left; color: #73C20E; position:relative; width: 160px; height: 50px; border-top: 4px solid #73C20E;">
<p>Home</p>
</div>
<div id="siteAdminButton" style="float: left; color: #73C20E; position: relative; width: 160px; height: 50px; border-top: 4px solid #1C1C1C;" >
<p>Site Administration</p>
</div>
<div id="contactButton" style="float: left; color: #73C20E; width: 160px; height: 50px; border-top: 4px solid #1C1C1C;">
<p>Contact Us</p>
</div>
</div>
Heres JS:
$("document").ready(function (){
$("#homeButton").mouseenter(function (){
$(this).addClass("mouseOverNav");
}).mouseleave(function (){
$(this).removeClass("mouseOverNav");
});
$("#siteAdminButton").mouseenter(function (){
$(this).addClass("mouseOverNav");
}).mouseleave(function (){
$(this).removeClass("mouseOverNav");
});
$("#contactButton").mouseenter(function (){
$(this).addClass("mouseOverNav");
}).mouseleave(function (){
$(this).removeClass("mouseOverNav");
});
});
and here is css:
.mouseOverNav {
cursor: pointer;
border-color: #73C20E;
}
Summary: I have created 3 divs with borders, 2 of which have the same border color as background, I want to change border color to my theme whenever mouse hovers, and change it back to the background color when mouse leaves and make the cursor a Pointer.
So far: Pointer Cursor is working but its not changing the border color. Thanks in Advance.

You can shorten your selectors to:
$("document").ready(function () {
$("#homeButton, #siteAdminButton, #contactButton").mouseenter(function () {
$(this).addClass("mouseOverNav");
}).mouseleave(function () {
$(this).removeClass("mouseOverNav");
});
});
You've set inline style border-top: 4px solid #1C1C1C; in your HTML, so you need to use border-top style for .mouseOverNav in your external css as well.
You also need to apply !important property to override the existing style since inline style take precedence over external style:
.mouseOverNav {
cursor: pointer;
border-top: 4px solid #73C20E !important;
}
Fiddle Demo
Edit: Although above suggestion works, but actually you should avoid to use !important when unnecessary, from MDN docs:
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.
In your case, you can move all the inline styles to external css, like this:
#homeButton, #siteAdminButton, #contactButton {
float: left;
color: #73C20E;
position:relative;
width: 160px;
height: 50px;
border-top: 4px solid #73C20E;
}
#siteAdminButton, #contactButton {
border-top: 4px solid #1C1C1C;
}
#navBar .mouseOverNav {
cursor: pointer;
border-top: 4px solid #73C20E;
}
Fiddle Demo
Also, you can achieve above task using poor CSS by applying :hover selector:
#homeButton:hover, #siteAdminButton:hover, #contactButton:hover{
cursor: pointer;
border-top: 4px solid #73C20E;
}
Fiddle Demo

YOU CAN SIMPLY ACHIEVE THIS USING CSS :hover. NO NEED TO USE JAVASCRIPT OR JQUERY
In css, you can use like this
#homeButton:hover, #siteAdminButton:hover, #contactButton:hover{
cursor: pointer;
border-color: #73C20E !important;
}
HERE IS THE FIDDLE DEMO

Your requirement can be done using CSS. No need to use JS at all.
#navBar > div:hover{
cursor: pointer;
border-color: #73C20E!important;
}

Check this fidde working with your example
http://jsfiddle.net/g6Jf2/
.mouseOverNav {
cursor: pointer;
border: 1px solid #73C20E;
}

change your css
.mouseOverNav {
cursor: pointer;
border-top: 4px solid #73C20E !important;
}
Fiddle: http://jsfiddle.net/8sns6/3/
Also I will suggest you to use hover function rather of mouse enter and leave
$("document").ready(function (){
$("#homeButton").hover(function (){
$(this).addClass("mouseOverNav");
},function (){
$(this).removeClass("mouseOverNav");
});
$("#siteAdminButton").hover(function (){
$(this).addClass("mouseOverNav");
}, function (){
$(this).removeClass("mouseOverNav");
});
$("#contactButton").hover(function (){
$(this).addClass("mouseOverNav");
}, function (){
$(this).removeClass("mouseOverNav");
});
});
Fiddle: http://jsfiddle.net/8sns6/5/

Z-index & jQuery Toggle

I have a few divs arranged horizontally that acts as buttons on a navigation bar. When this button is clicked, a hidden submenu div will be made visible below the button that was clicked, but above all the other buttons.
Problem: The submenu div that appears stayed above all the other button divs even though the z-index if the button div that was clicked was changed to be larger than the submenu div's z-index. Will be great to have some help with this! :)
HTML Code
<div class="filter_tab" id="filter_tab_rent"><p>Min/Max Rent</p></div>
<div id="filter_submenu_rent">
Hello
</div>
jQuery Code
$("#filter_tab_rent").click(function(e) {
$("#filter_tab_rent").toggleClass('filter_tab_selected');
$("#filter_submenu_rent").toggle();
});
CSS Code
.filter_tab {
height: 38px;
min-width: 50px;
border: 1px solid #D9D9D9;
border-bottom: none;
float: left;
}
.filter_tab_selected {
z-index: 500
}
#filter_submenu_rent {
width: 300px;
height: 50px;
background: #FFF;
position: absolute;
top: 65px;
display: none;
z-index: 100;
border: 1px solid #D9D9D9;
box-shadow: 0px 2px 5px #888;
}
Additional Info: I'm using Chrome to view this.

z-index will only work with elements position relative and absolute. Add a position to your .filter_tab_selected style.