We Keep Coding

javascript simple function won't pass variable through to identify element id

I can't understand why the following code won't work:
function popups(m) {
var popup = document.getElementById(m);
popup.classList.toggle("show");
}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.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 .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<div class="popup" onclick="popups(myPopup)">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
I am pretty sure the error is within the javascript. When I change it to the following then it totally works. So for some reason, it won't pass my m variable to identify the element id...
function popups() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
Any good coder out there that can help me, please?

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>

CSS Vertical Button with vertical text

I need vertical button with written vertical text inside. It should not be turned to 90 degree. I need to add some hover effect to right side if mouse on it and give white space between words. I have tried white-space and word-space but it did not help.
Example:
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<button class="button" style="width:60px; height:600px; text-align:center;"><div style="width: 1ch; text-align:center; font: Consolas, Monaco, monospace;font-size:14pt; word-wrap: break-word;white-spacing: 3 px;">Online Sürücü Sifariş Et</div></button>

You can use transform:rotate(-90deg);
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<button class="button" style=" text-align:center;">Online Sürücü Sifariş Et</button>

.button {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}

I think this is what you want. The button is a vertical button and the text is all one letter below the next. I have used <br> tags for every new line. Have a look
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<button class="button" style="width:60px; height:600px; text-align:center;"><div style="width: 1ch; text-align:center; font: Consolas, Monaco, monospace;font-size:14pt; word-wrap: break-word;white-spacing: 3 px;">O<br>n<br>l<br>i<br>n<br>e<br><br>S<br>ü<br>r<br>ü<br>c<br>ü<br><br>S<br>i<br>f<br>a<br>r<br>i<br>ş<br><br>E<br>t<br></div></button>

There are several ways to accomplish what you're doing, but I like this one:
https://codepen.io/krabbypattified/pen/ybzway
It's a weird CSS attribute, but the imporant code is: white-space: pre-line;
Edit: there's also text-orientation, but that's not supported by many browsers.
Edit: updated the CodePen html

Button not animating from center

So when I used jquery to animate some padding instead of animation as if the anchor point is from the center it animates from the top left. All the code and a JSFiddle link are down below.
JSFiddle
HTML:
<div id="gaming-news-info">
<a id="news-button" style="cursor:pointer;">Go to News section</a>
</div>
CSS:
#gaming-news-info {
position: absolute;
z-index: 999;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin-top: -100px;
}
#news-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
margin-top: 130px;
font-family: "Prompt-SemiBold";
margin-left: 90px;
}

You do not need jquery/javascript for a simple hover effect. CSS3 transitions and transformations are perfectly capable of doing the same thing without the overhead of a script library....
#gaming-news-info {
position: absolute;
z-index: 999;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin-top: -100px;
}
#news-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
margin-top: 130px;
font-family: "Prompt-SemiBold";
margin-left: 90px;
transform: scale(1);
transition: all .2s;
}
#news-button:hover {
transform: scale(1.05);
transition: all .2s;
}
<div id="gaming-news-info">
<a id="news-button" style="cursor:pointer;">Go to News section</a>
</div>

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>