We Keep Coding

How to make pop-up div hide/show on click

I want to make a button to change and make div pop-up after clicked and after being again clicked hide div and came back to normal. How do I do that? (also if you can keep it HTML and css because I am learning Java and not so familiar and good with it but if it is only way you know with Java no problem). I tried it with a Focus in css but after I click any were in a screen button just came back to normal.
If you know this please answer it would be very big help.
.viewgames {
color: black;
background-color: white;
border: none;
border-radius: 2px;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
position: absolute;
z-index: 1;
letter-spacing: 1px;
word-spacing: -5px;
width: 150px;
height: 60px;
margin-left: 45%;
margin-top: 400px;
cursor: pointer;
opacity: 1;
transition: 0.75 s;
}
.gamesvp {
margin-top: 0px;
}
.viewgames: hover.gamesvp {
margin-top: 0px;
}
.viewgames: hover {
background-color: rgba(0, 0, 0, 0);
border: 4px white solid;
color: white;
transform: scale(1.2);
}
.hidegames {
opacity: 0;
margin-bottom: 15px;
}
.viewgames: focus {
color: black;
background-color: white;
border: none;
border-radius: 2px;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
position: absolute;
z-index: 1;
letter-spacing: 1px;
word-spacing: -5px;
width: 150px;
height: 60px;
margin-left: 45%;
margin-top: 400px;
cursor: pointer;
opacity: 1;
transition: 0.75s;
}
.viewgames: focus.gamesvp {
opacity: 0;
}
.viewgames: focus.hidegames {
opacity: 1;
}
<button class="viewgames"><p class="gamesvp">View Games</p>
This is what I have so far!

What i had understand so far by your question this is what you want
It uses JS
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
$(".popup").toggleClass('active');
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup.active{
color: red;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<div class="popuptext" id="myPopup">A Simple Popup!</div>
</div>

Can I bring the element to another sibling element when hovering? [CSS Animation]

I want to get the element to move to another elements when the elements are hovered on.
Those elements are sibling since I want the one to overlay the another.
The following HTML and CSS give me not bad result.
But I don't want to use constant values for "width" and "left" to animate them.
Is there some way to place the moving element on the hovered elements without using constant position values?
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
nav .start-home,
a:nth-child(1):hover~.animation {
width: 105px;
left: 0;
background-color: #1abc9c;
}
nav .start-blog,
a:nth-child(2):hover~.animation {
width: 105px;
left: 105px;
background-color: #e74c3c;
}
nav .start-projects,
a:nth-child(3):hover~.animation {
width: 135px;
left: 210px;
background-color: #3498db;
}
nav .start-about,
a:nth-child(4):hover~.animation {
width: 115px;
left: 345px;
background-color: #9b59b6;
}
nav .start-contact,
a:nth-child(5):hover~.animation {
width: 130px;
left: 460px;
background-color: #e67e22;
}
nav {
margin: 27px auto 0;
position: relative;
display: table;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
white-space: nowrap;
}
nav a {
line-height: 50px;
padding: 2px 30px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
<nav>
Home
Blog
Projects
About
Contact
<div class="animation start-home"></div>
</nav>

I couldn't find the way to do it with only CSS, so I used JavaScript and modify style of elements.
It was kind of what I did not want to do.
If you know how to do it with only CSS, let me know.

Css Transition Does not respond

My css transition doesn't work. I cannot figure out what the problem is. I am adding the class using JavaScript. The element is not changing display. Here is my code and the link to my codepen. I am trying to make a simple modal for a tic tac toe game. Thanks for any help!
.back {
margin-top: 200px;
}
.box {
display: inline-block;
vertical-align:top;
background: lightgray;
width: 120px;
height: 120px;
margin: 2px 0 2px 0;
border-radius: 20px;
}
h1 {
margin-top: 30px;
font-weight: bold;
font-size: 4em;
}
.popup {
font-family: 'Signika', 'sans-serif';
margin: 200px auto 0 auto;
width: 700px;
height: 270px;
background: skyblue;
border: 6px solid #8dadc3;
box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9);
border-radius: 40px;
position: relative;
z-index: 1;
visibility: visible;
opacity: 1;
transition: all 5s;
}
.popup h4 {
padding-top: 60px;
font-weight: bold;
font-size: 3em;
left: 10%;
position: absolute;
}
.x {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 40%;
}
.o {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 50%;
}
.popup.hide {
opacity: 0;
visibility: hidden;
}
This is my JavaScript:
$(document).ready(function(){
var chosen;
$('.player').on("click", function(e){
if($(this).hasClass("x")){
console.log("X");
chosen = "X"
} else {
console.log("O");
chosen = "O";
}
$('.popup').addClass('hide');
});
});
link to codepen:
Direct link to code

The problem is you are using the CSS class hide and Bootstrap is set up to apply display: none !important; to that:
https://github.com/twbs/bootstrap/blob/v3.3.6/dist/css/bootstrap.css#L6528-L6530
Change the class name in both the CSS and JavaScript and it will work.

The only problem I've found in your example was typo in class name.
In your JavaScript your are adding .hiding class, but the class is called .hidi . After changing it to .hiding, everything seems to work.

Masking issue when sliding multiple divs behind a line

I have a CSS animation effect that's difficult to implement due to layering problems. See the snippet below:
var toggle = document.getElementById('toggle');
function toggleF() {
'use strict';
document.querySelector('nav').classList.add('fuzzyState');
}
toggle.addEventListener('click', toggleF);
body {
height: 90%;
color: #222;
text-align: center overflow:hidden;
}
button {
outline: 0;
cursor: pointer
}
#toggle {
float: left;
width: 38px;
height: 38px;
padding: 5px;
margin: auto;
background: #fff;
color: #666;
border: 0;
font-size: 150%
}
#toggle:hover {
background: #222;
color: #eee;
user-select: none;
-webkit-user-select: none
}
#toggle:active {
background: #022;
color: #fff
}
nav ul:after {
content"";
display: block;
clear: both
}
nav ul {
height: 150px;
margin: 0;
padding: 0;
font-size: 150%
}
nav li {
width: 140px;
height: 140px;
margin: 5px;
float: left;
list-style: none;
user-select: none;
-webkit-user-select: none
}
nav button {
display: block;
position: relative;
top: 50%;
width: 100%;
height: 100%;
background: transparent;
border: 0;
text-transform: uppercase;
transform: translateY(-50%)
}
nav button:hover {
background: #022;
color: #eee
}
nav button:active {
background: #033;
color: #fff
}
ul hr {
position: relative;
top: 50%;
width: 1px;
height: 90px;
margin: 10px;
background: #eee;
border: 0;
float: left;
transform: translateY(-50%);
z-index: 2
}
nav.fuzzyState #dos {
transform: translateX(230px)
}
nav.fuzzyState #uno {
transform: translateX(400px);
-webkit-filter: blur(1px)
}
nav.fuzzyState #tres {
/*transform:translateX(-230px)*/
}
nav #tres {
position: relative;
z-index: 1
}
#leftNavMask {
background: #fff;
position: absolute;
top: 15%;
right: 0;
left: 356px;
width: 200px;
height: 190px;
text-align: justify;
transform: translateY(-50%);
}
#rightNavMask {
background: #fff;
position: absolute;
top: 15%;
right: 0;
left: 156px;
width: 200px;
height: 190px;
text-align: justify;
transform: translateY(-50%);
z-index: -1
}
#dos,
#tres {
transition: transform 0.7s ease-in-out
}
#uno {
transition: transform 1s ease-in-out, -webkit-filter 1s ease-in-out;
}
<button id="toggle">+</button>
<nav>
<ul>
<li id="uno"><button>uno</button></li>
<li id="dos"><button>dos</button></li>
<hr>
<li id="tres"><button>tres</button></li>
<div id="leftNavMask"></div>
<div id="rightNavMask"></div>
</ul>
</nav>
After the + button is clicked my goal is to make the tres button slide to the left while being masked just like the uno and dos buttons, except in the opposite direction. It seems impossible to pull off because whatever z-index I give any elements there's no way to have the left mask on top of the correct elements while simultaneously having the right mask do its job. Are there any simple ways to do this without jQuery? Thanks.
To clarify: The uno and dos buttons are currently going under a div that is colored to match the background. I need the tres button to slide left under a second div that is somehow on top of the tres button to mask it but also below the uno and dos buttons so they aren't blocked at the beginning.

Long time since this question was asked, therefore, most probably you have found a solution already. But just in case, here you have a possible approach to what you wanted to achieve.
Instead of using absolute positioned divs with the same color of the background to cover the animated li elements, why don't use an overflow hidden property in the ul container? If you do this, the ul will act as a "mask" and when the li elements get animated outside the ul, they will be automatically "hidden". Take a look at your snippet already modified using this approach (I have used two ul elements to animate the li elements separately):
I saw that you placed an hr (and two div) inside the ul element and a ul should only contain li elements. For this solution, I used a pseudo-element to mimic the vertical line.
var toggle = document.getElementById('toggle');
function toggleF() {
document.querySelector('nav').classList.toggle('fuzzyState');
}
toggle.addEventListener('click', toggleF);
body {
color: #222;
}
button {
cursor: pointer;
outline: 0;
}
#toggle {
background: #fff;
border: 0;
color: #666;
float: left;
font-size: 150%;
height: 38px;
margin: auto;
padding: 5px;
width: 38px;
}
#toggle:hover {
background: #222;
color: #eee;
user-select: none;
}
#toggle:active {
background: #022;
color: #fff
}
nav ul {
display: inline-block;
font-size: 150%;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
nav ul.left::after {
content: "";
display: block;
border-right: 1px solid #eee;
height: 90px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
nav li {
display: inline-block;
height: 140px;
list-style: none;
margin: 5px;
user-select: none;
transition: transform 0.7s ease-in-out;
width: 140px;
}
nav button {
background: transparent;
border: 0;
display: block;
height: 100%;
position: relative;
text-transform: uppercase;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
nav button:hover {
background: #022;
color: #eee;
}
nav button:active {
background: #033;
color: #fff;
}
nav.fuzzyState ul > li {
pointer-events: none;
}
nav.fuzzyState ul.left > li {
transform: translateX(200%);
}
nav.fuzzyState ul.right > li {
transform: translateX(-100%);
}
<button id="toggle">+</button>
<nav>
<ul class="left">
<li><button>uno</button></li>
<li><button>dos</button></li>
</ul>
<ul class="right">
<li><button>tres</button></li>
</ul>
</nav>

Increase jQuery Mobile slider handle's clickable area

I would like to increase jQuery mobile slider's handle clickable area. As of now, the handle's clickable area is small. so, I am unable to tap and change the range of the handle everytime. I want to have the handle size to be the same but increase the clickable area. My custom CSS is as follows.
.ui-slider-track .ui-btn.ui-slider-handle {
width: 12px;
height: 12px;
margin: -10px 0 0 -10px;
background-color:#0096E2;
padding: 5px;
border-color: #0096E2;
}

div {
position: relative;
width: 100px;
height: 100px;
border: 1px dashed #eee;
cursor: pointer;
transition: background-color 1.5s;
}
div::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: rgb(188,20,20);
border-radius: 2px;
}
div:hover {
background-color: #FFFFDF;
}
<div></div>