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?
Related
I have this HTML code with JS script, That if someone press on the button it will open a popup with a blank text (for user to enter details),
How do i take the same code with pop up but just replacing the text with drop down menu ? ( i dont know JS and have tried adding the drop down on JS script \ near button and calling the function - icant make it work) :
<select name="username" id="username">
<option value="R1">R1</option>
<option value="R2">R2</option>
<option value="R3">R3</option>
<option value="R4">R4</option>
<option value="R5">R5</option>
<option value="R6">R6</option>
<option value="R7">R7</option>
</br>
</select>
but its just presenting next to the button, i need it after i click on the popup instead of blank text,
and i need it as the function works today, it is passing the value it got to me.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="30">
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
/*padding: 60px 100px;*/
text-align: center;
text-decoration: none;
/*display: inline-block;
font-size: 20px;*/
margin: 10px 20px;
cursor: pointer;
background-color: #555555;
border-radius: 12px;
transition-duration: 0.4s;
width: 250px;
height: 50px;
font-size: 20px;
} /* Black */
.button:hover {
background-color: #7B8288; /* Green */
color: white;
}
.button_active {
background-color: #19bf53; /* Green */
color: white;
}
.button_timeout_soon {
background-color: #F75858; /* Green */
color: black;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body>
<ul>
<button class="button button" onclick="myFunction(form);openNav()">{{ button }}</button>
<input type="hidden" name="reason" id="myField" value=""/>
</ul>
<script>
function myFunction(frm) {
var txt;
var reason = prompt("Please enter username:");
if (reason == null || reason == "") {
txt = "CANCEL";
} else {
txt = reason;
}
frm.reason.value = txt; // 1st option
return txt
}
</script>
</body>
</html>
The standard JS prompt is not going to cut it.
You'll probably need to create your own modal which you can then add a dropdown menu to.
Find more information here:
How to create java script prompt with dropdown
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>
I'm new to HTML and CSS and trying to create a popup under the button from this tutorial - [How TO - Popup][1].
I tried to change the position, display, and other attributes but that didn't work.
CSS
.popup {
position: relative;
display: inline;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
height: 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;
}
HTML
<button class="popup" onclick="popupShow()"> Calendar
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</button>
JavaScript
const popupShow = () => {
const popup = document.querySelector("#myPopup");
popup.classList.toggle("show");
}
Everything you have current works correctly but if you only render the button and popup without any additional styles you will find that the absolute positioned popup shows off screen ( because it's positioned absolute ) I've added some body styles to show the popup in the centre of the screen.
I also mis-interpreted your question and thought that you wanted the popup shown at the bottom so it looks slightly different to your example but the principle is still the same.
const popupShow = () => {
const popup = document.querySelector("#myPopup");
popup.classList.toggle("show");
}
body{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100vh;
}
.popup {
position: relative;
display: inline;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
height: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
top:calc(100% + 8px);
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent ;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
<button class="popup" onclick="popupShow()"> Calendar
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</button>
There you go instead of using bottom:125% use pixel values
Also don't forget about the tooltip position and its border-width
EDIT: adjusted the height of the popup for good view
const popupShow = () => {
const popup = document.querySelector("#myPopup");
popup.classList.toggle("show");
}
.popup {
position: relative;
display: inline;
left:50%;
margin-top:35px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
height: 60px;
background-color: #555;
color: #fff;
display:inline-block;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
/*bottom: 125%;*/
left: 0px;
/*margin-left: -80px;*/
bottom: -85px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: -5px;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px 5px;
border-style: solid;
border-color: #555 transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
<button class="popup" onclick="popupShow()"> Calendar
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</button>
I changed your CSS a little bit. See line with /*changed*/.
const popupShow = () => {
const popup = document.querySelector("#myPopup");
popup.classList.toggle("show");
}
.popup {
position: relative;
display: inline;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 50px; /*add*/
}
.popup .popuptext {
visibility: hidden;
width: 160px;
height: auto; /*changed*/
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: -40px; /*changed*/
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: -32%; /*changed*/
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent; /*changed*/
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
<button class="popup" onclick="popupShow()"> Calendar
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</button>
I am writing a Chrome extension (using html, javascript & css), that is injecting a widget into a website to display additional information. A part of this widget is a button. Unfortunately that webpage is capturing all clicks and overwrites them with custom events. The consequence is, that it is impossible, to click the button.
Is there a possibility to prevent this "click-preventing-mechanism"?
I inspected their javascript code, it seems they are catching the PointerEvents.
I would really appreciate any help.
Edit:
Here is the code for the button I'm injecting into the webpage (got it from some other page):
HTML:
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch"></label>
CSS:
.onoffswitch {
position: relative; width: 60px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 30px; padding: 0; line-height: 30px;
border: 2px solid #999999; border-radius: 30px;
background-color: #EEEEEE;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "";
display: block; width: 30px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 58px;
border: 2px solid #999999; border-radius: 30px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #34A7C1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #34A7C1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
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>