We Keep Coding

Open an element under a button when the button is clicked in React

Having this design:
There is a table with some rows, when a row is clicked, that kebab button (3 vertical dots) is visible.
When the button is clicked it should open an element which has some data in it - in this case a list of actions.
The part with showing the kebab button is working:
{
id: 'my-button',
Cell: ({ cell }: CellProps<MyCell>) => {
if (cell.row.index === selectedIndex) {
return (
<div>
<Button
icon={<ThreeDots />}
onClick={toggleModal}
/>
</div>
);
}
return <div></div>;
}
}
when the row is clicked, the 3-dots button is visible. There is also a boolean which is initially set to false but toggles its value when the button is clicked (toggleModal).
But how can that element with the list added under the button?
Done something like:
{isModalOpened ? <div className='absolute'>test</div> : null}
Or maybe is there any online solution to fix this?

To fix this issue, you just need to use:
event.stopPropagation();
Please check my demo below:
function rowClick() {
const status = document.getElementById("actions").style.display;
document.getElementById("actions").style.display =
status === "block" ? "none" : "block";
}
function btnClick(event) {
event.stopPropagation();
const status = document.getElementById("nav").style.display;
document.getElementById("nav").style.display =
status === "block" ? "none" : "block";
}
.row {
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
background: lightblue;
padding: 10px 20px;
}
.actions {
display: none;
position: relative;
z-index: 1;
}
nav {
display: none;
position: absolute;
top: 50px;
right: 0;
z-index: 10;
background: white;
border: 1px solid grey;
min-width: 170px;
}
nav p {
padding: 10px;
border-bottom: 1px solid grey;
margin: 0;
}
nav p:last-child {
border-bottom: 0;
}
.btn {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
background: green;
text-align: center;
cursor: pointer;
color: white;
}
<div class='row' onclick="rowClick()">
This is a row <div class="actions" id="actions"><span class="btn" onclick="btnClick(event)">⁝</span><nav id="nav"><p>Do this</p><p>Do that</p></nav></div></div>

Display text in input of type number only on focus

Here is what I try to acomplish: I need an input field containing a value with a unit, that would look like this:
On focussing the input, I want it to move the unit to the right side, looking like this:
I can think of two ways to do so:
1. Replace input field with a Div that looks exactly like the input when focus is lost, and set the value of the input as its content:
$('#fakeInput').bind('click', changeToRealInput);
$('#realInput').bind('blur', changeToFakeInput);
$('#realInput').trigger('blur');
$('#unitAddon').html($('#realInput').attr('unit'));
function changeToFakeInput() {
// hide actual input and show a div with its contents instead
$('#fakeInput').show();
$('#realInputContainer').hide();
$('#fakeInput').html($('#realInput').val() + $('#realInput').attr('unit'));
}
function changeToRealInput() {
// hide fake-div and set the actual input active
$('#fakeInput').hide();
$('#realInputContainer').show();
$('#realInput').focus();
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
div#container {
display: flex;
background: #8aaac7;
padding: 10px;
width: 200px;
}
div#unitAddon,
input#realInput,
div#fakeInput {
font-family: sans-serif;
font-size: 26px;
padding: 5px;
width: 100%;
background-color: #FFFFFF;
border: none;
outline: none;
}
div#realInputContainer,
div#fakeInput {
border: 2px solid #dadada;
}
div#realInputContainer {
display: flex;
}
div#unitAddon {
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="fakeInput"></div>
<div id="realInputContainer">
<input type="number" unit="kg" id="realInput" value="3.3">
<div id="unitAddon"></div>
</div>
</div>
(also see this jsFiddle)
Problem here is (as you can see in the screenshot above) that, depending on your local settings, chrome automatically converts the decimal point into a comma (in the input, but not in the fake-div)
Another way I thought of is: When the focus is lost, set the size of the input field to match its content and, by doing so, pull the addon displaying the unit just behind the number.
Problem here is to get the size of the content of an input (cross-browser):
$('#realInput').bind('focus', changeToRealInput);
$('#realInput').bind('blur', changeToFakeInput);
$('#realInput').trigger('blur');
$('#unitAddon').html($('#realInput').attr('unit'));
function changeToFakeInput() {
// here is the question: what width should it be?
$('#realInput').css({'width' : '40%'});
}
function changeToRealInput() {
$('#unitAddon').css({'width' : 'auto'});
$('#realInput').css({'width' : '100%'});
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
div#container {
display: flex;
background: #8aaac7;
padding: 10px;
width: 300px;
}
div#unitAddon,
input#realInput{
font-family: sans-serif;
font-size: 26px;
padding: 5px;
width: 100%;
border: none;
outline: none;
}
div#realInputContainer {
border: 2px solid #dadada;
display: flex;
background-color: #FFFFFF;
}
div#realInputContainer.setAddonAway > div#unitAddon {
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="realInputContainer" class="setAddonClose">
<input type="number" unit="kg" id="realInput" value="3.3">
<div id="unitAddon"></div>
</div>
</div>
also see this jsFiddle
I could accomlish this with an input[type=text], but I dont want to loose the benefits of type[number] (min/max/step validation, on-screen keyboard, etc.)
Is there any way of getting around the flaws of my two ideas? Or is thre a more elegant way to do so?

The idea is to: (1) make the input box to cover the entire container; (2) create a helper element, and set it the same length as the input value via JS, and make it invisible as a place holder; (3) apply some style for moving around the unit box.
codepen
$(document).ready(function() {
$(".value").text($(".number").val());
$(".unit").text($(".number").attr("unit"));
$(".number").on("change keypress input", function() {
$(".value").text($(".number").val());
});
});
* {
box-sizing: border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.container {
position: relative;
display: flex;
border: 4px solid teal;
width: 200px;
}
.container > * {
font-family: sans-serif;
font-size: 20px;
}
.number {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
.value {
visibility: hidden;
max-width: 100%;
overflow: hidden;
}
.unit {
position: relative;
flex: 1;
pointer-events: none;
background: white;
}
.number:focus ~ .value {
flex: 1;
}
.number:focus ~ .unit {
flex: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="number" type="number" value="1.23" unit="kg">
<span class="value"></span>
<span class="unit"></span>
</div>

Jquery mouseleave & mouseenter issue

How do I allow the user to click on the button that says "click me" appears on mouseenter of another button.
Here is the code -
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>
$(document).ready(function() {
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
desc.hide();
});
});
Here is the Demo

Just Place the .desc inside the .hint.
Fiddle
For the basic tooltip, you want:
<div title="This is my tooltip">
For fancier tooltips, See this

Wrap your html with another div and add mouseenter and mouseleave event to this.
var con = $('.container');
var desc = $('.desc');
con.mouseenter(function() {
desc.show();
});
con.mouseleave(function() {
desc.hide();
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>
</div>

Make the .desc div a child of your .hint
$(document).ready(function() {
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
desc.hide();
});
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
text-align: center;
position: relative;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
position: absolute;
top: 50%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hint"> ?<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div></div>
See fiddle

Updated Fiddle.
If you can't change the structure of your HTML code try to wait a little before hidding a desc div using setTimeout() so if the user enter mouse inside this div you will not hide it by clearing the timeout check the example bellow :
$(document).ready(function() {
var hide_timeout;
var hide_after = 100; //100 ms
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
hide_timeout = setTimeout(function(){
desc.hide();
},hide_after);
});
desc.mouseenter(function() {
clearTimeout(hide_timeout);
});
desc.mouseleave(function() {
desc.hide();
});
});
Hope this helps.
$(document).ready(function() {
var hide_timeout;
var hide_after = 100; //100 ms
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
hide_timeout = setTimeout(function(){
desc.hide();
},hide_after);
});
desc.mouseenter(function() {
clearTimeout(hide_timeout);
});
desc.mouseleave(function() {
desc.hide();
});
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>

You have 2 options
1 - You can add the show() and hide() when the tooltip is hover : Fiddle
2 - You can use only css to show or hide it. Not sure you need JS for simple things like that.

This Demo shows what I think you want to achieve. The trick is to also catch the event that is triggerd, when the mouse enters a other element.
$('*').not('.hint').not('.desc').not('.desc>button').mouseenter(function() {
desc.hide();
});

$(function(){
$('.desc').hide();
$(document).on('mouseenter','.hint',function(){
$('.desc').show();
})
});

jQuery toggle background color on radio buttons

I have a two radio controls that are designed as buttons. When I click the first radio button, then second one's background color should change and vice versa.
HTML:
<input type="radio" id="boo1" name="boo" value="boo1"><label for="boo1"><span></span>boo1</label>
<input type="radio" id="boo2" name="boo" value="boo2"><label for="boo2"><span></span>boo2</label>
CSS:
body {
font-family: open sans, arial, sans-serif;
color: #ffffff;
margin: 0;
background: #3894db;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
cursor: pointer;
width: 50%;
height: auto;
font-size: 22px;
margin-top: 10px;
float: left;
color: #ffffff;
text-align: center;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
/* boo1 */
#boo1 + label {
background: #e74c3c;
}
#boo1:checked + label {
background: #c0392b;
}
/* boo2 */
#boo2 + label {
background: #f1c40f;
}
#boo2:checked + label {
background: #f39c12;
}
JavaScript?
$(document).ready(function() {
$("#boo1").click(function () {
});
});

if($('#boo1').is(':checked'))
{
$('#boo2').css('color','#ff0000');
}

If you want the buttons to have different background colors when "inactive", you can use jQuery's css() function, like this:
$(document).ready(function () {
$("#boo1").click(function () {
$("#boo1 + label").css("background-color", "#c0392b");
$("#boo2 + label").css("background-color", "green");
});
$("#boo2").click(function () {
$("#boo2 + label").css("background-color", "#f39c12");
$("#boo1 + label").css("background-color", "blue");
});
});
See working jsFiddle.

try the following code
$("#boo1").click(function (event) {
$("#boo2").prop( "checked",true );
});
$("#boo2").click(function (event) {
$("#boo1").prop( "checked",true );
});

Try to use this javascript code
$(document).ready(function () {
$("input[name='boo']").click(function () {
$(this).next().removeAttr('style');
$("input[name='boo']").not(this).next().css('background-color', 'green');
});
});

try this way
HTML CODE:
<label for="boo1"><span><input type="radio" id="boo1" name="boo" value="boo1" /></span>boo1</label>
<label for="boo2"><span><input type="radio" id="boo2" name="boo" value="boo2" /></span>boo2</label>
JQUERY CODE:
$('input[type=radio]').on('click', function () {
$('input[type=radio]').not(this).closest('label').css('background', 'blue');
$(this).closest('label').css('background', 'red');
});
LIVE DEMO:
Happy Coding :)
http://jsfiddle.net/dreamweiver/py2BM/14/

You can achieve that with pure CSS
/* boo1 */
#boo1 + label {
background: #e74c3c;
}
#boo1:checked ~ label[for="boo2"] {
background: #c0392b;
}
#boo1:checked ~ label[for="boo1"]{
background: #f39c12;
}
/* boo2 */
#boo2 + label {
background: #f1c40f;
}
#boo2:checked ~ label[for="boo1"] {
background: #f39c12;
}
working demo:http://jsfiddle.net/HarishBoke/S6z8Z/
Hope this is what you are looking for!

Simple and optimized solution:
HTML Code:
<!-- Fieldset Wrap: begins -->
<div class="fieldset-wrap">
<!-- Fieldset: begins -->
<span class="fieldset orange">
Label 1
</span>
<!-- Fieldset: ends -->
<!-- Fieldset: begins -->
<span class="fieldset green">
Label 2
</span>
<!-- Fieldset: ends -->
</div>
<!-- Fieldset Wrap: ends -->
CSS:
.fieldset-wrap {
overflow: hidden;
font-size:0px;
}
.fieldset {
display: inline-block;
width: 200px;
padding: 5px 0;
text-align: center;
cursor: pointer;
font-family: verdana;
font-size: 14px;
}
.fieldset { margin-left: 1px; }
.fieldset:first-child { margin-left: 0px; }
.orange,
.green,
.checked{ color: #fff; }
.orange { background-color : orange; }
.green { background-color : green; }
.checked { background-color : blue; }
jQuery:
$('.fieldset').on('click', function(){
$(this)
.addClass('checked')
.siblings()
.removeClass('checked');
});
DEMO

Optimize jQuery code

I've written this jQuery code that fades in a overlay with some links over an image. What i found out is that it is painfully slow when I add like 10 of these images. I would really appreciate some tips and tricks on how to make this code faster.
If you have some tips for my HTML and CSS that would be great too ;)
jQuery code
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
All the code
<style type="text/css">
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
img {
border: none;
}
#backgrounds {
font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 50px 0 0 0;
padding: 0;
width: 585px;
}
.thumb {
margin: 5px;
position: relative;
float: left;
}
.thumb img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.thumb div {
display: none;
}
.thumb .download {
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0 10px;
}
.thumb .download h3 {
font-size: 14px;
margin-bottom: 10px;
margin-top: 13px;
text-align: center;
}
.thumb .download a {
font-size: 11px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 16px;
}
.thumb .download a:hover {
text-decoration: underline;
}
.thumb .download .left, .thumb .download .right {
width: 44%;
margin: 0;
padding: 4px;
}
.thumb .download .left {
float: left;
text-align: right;
}
.thumb .download .right {
float: right;
text-align: left;
}
.thumb img, .thumb .hud {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.thumb .hud {
width: 100%;
height: 110px;
position: absolute;
top: 0;
left: 0;
background: #000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
</script>
<div id="backgrounds">
<div class="thumb">
<div class="download">
<h3>Download wallpaper</h3>
<p class="left">
1024x768
1280x800
1280x1024
</p>
<p class="right">
1440x900
1680x1050
1920x1200
</p>
</div>
<div class="hud"></div>
<img alt="image" src="thumb.jpg"/>
</div>
</div>

I got it to respond a little better by simply changing the following within the hover(..):
function () {
$(".download", this).fadeTo("fast", 1);
$(".hud", this).fadeTo("fast", 0.7);
},
function () {
$(".download, .hud", this).fadeTo("fast", 0);
}
The biggest difference comes from only applying the hoverout effect to the event target, no need to reapply to all your divs on the page.

I've put your code into a test page and to be perfectly honest, even with thirty or so .thumb divs it seemed ok - certainly responsive enough to use from my end. Sliding the mouse over a bunch of them means I have to wait for the rollover effect to go through them all which takes a while until it gets to the one I've actually stopped on, but surely that was what you wanted given that you're using 'hover' rather than 'click' (which would certainly remove any speed issues).
I'm not using actual images in my test page, just getting the alt text, so my best current guess would be to make sure all images you're loading are as small filesize as you can possibly make them.

Pre-Select MORE
Good job preselecting the div. Try this way so that it pre-selects the fade in elements as well instead of doing it on hover:
$().ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").each(function() {
var download = $(this).children(".download");
var hud = $(this).children(".hud");
$(this).hover(
function () {
download.fadeTo("fast", 1);
hud.fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
});

try removing the
:focus {
-moz-outline-style:none;
}
and see what happens