my popups work just fine, but they will all stay open when clicked, instead of only allowing for one popup at a time. I have found this question asked, but I think my very low-level knowledge of JS isn't allowing me to easily modify the answers given for someone else's code, into my own. Big time noob here
JS
` function myFunction(event) {
event.target.children[0].classList.toggle("show");
}`
HTML
<div class="popup" onclick="myFunction(event)">Select 1 <span class="popuptext" id="myPopup">Tet Here </span></div>
<div class="popup" onclick="myFunction(event)">Select 2 <span class="popuptext" id="myPopup1"> Text Here</span></div>
Select 3 Text Here
CSS
.page-writing .popup {
height: 3em:
width: 3em;
position: relative;
position: relative;
display: inline-block;
cursor: pointer;
font-family:bookmania, serif;
font-size: .8rem;
color: black;
-webkit-opacity: .6;
-moz-opacity: .6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-writing .popuptext {
visibility: hidden;
height: 6em;
width: 20em;
color: purple;
overflow: auto;
text-align:left;
border-radius: 1em;
padding: 1em;
position: absolute;
z-index: 1;
top: 85%;
left: 0%;
margin-top: .5em;
}
.page-writing .popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px:
border-width 2px;
border-style:none;
border-color: transparent;
}
.page-writing .popup .show{
visibility: visible;
-webkit-animation: easeIn 1.5s;
animation: easeIn 1.5s;
}
#-webkit-keyframes easeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes easeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
Try the following approach:
var lastPopup;
function myFunction(event) {
lastPopup && lastPopup.classList.remove("show");
lastPopup = event.target.children[0];
lastPopup.classList.toggle("show");
}
Related
How can I create a toggle element without using pseduo ::before and ::after?
I want to create a toggle on an html page but without using the pseudo ::before and ::after.
I am currently using the method from w3Schools given here: https://www.w3schools.com/howto/howto_css_switch.asp
However, I don't want any ::before or ::after psuedo classes. I just want classes by alone, if possible. I tried rewriting my own class for this but didn't seem to work as intended.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
I tried making a sliderbefore element myself without the psudeo and it didn't seem to work. (it was missing the small circle inside the toggle)
.sliderbefore {
border-radius: 34px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
box-shadow: 0 0 1px #2196F3;
}
With classList.toggle:
const a= document.getElementsByClassName('a');
const b= document.getElementsByClassName('b');
function changeColor(){
a[0].classList.toggle("d");
b[0].classList.toggle("e");
}
.a{
position: absolute;
border:1px solid red;
width: 500px;
height:300px;
background:green;
}
.b {
left:51px;
position: absolute;
top:2px;
float: right;
border-radius:50%;
width: 35px;
height:35px;
background: white;
transition: all 0.1s;
}
.c {
position: absolute;
top:40px;
left:130px;
border-radius:20px;
width: 90px;
height:40px;
background: #ced0d4;
}
.d{
background: blue;
}
.e{
left:4px;
}
<div class="a">
<div class="c" onclick="changeColor()">
<div class="b"></div>
</div>
</div>
I was able to create a toggle element by using javascript and html only instead of psuedo :before and :after
<html><head></head>
<script type="text/javascript">
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
The element is an input which has a Value of ON.
The Toggle function will switch the toggler on and off when clicked.
I used this tutorial to add popups to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one.
I've tried adding an invisibleDiv as per this post Close pop up div by clicking outside of it but the popup is still only moving when the button itself is clicked.
https://www.w3schools.com/howto/howto_js_popup.asp
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* 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;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>
</html>
Having a global click-handler that checks the clicked element's classList is one way to close the pop-up when clicking outside of it. Here is an example:
const popups = [...document.getElementsByClassName('popup')];
window.addEventListener('click', ({ target }) => {
const popup = target.closest('.popup');
const clickedOnClosedPopup = popup && !popup.classList.contains('show');
popups.forEach(p => p.classList.remove('show'));
if (clickedOnClosedPopup) popup.classList.add('show');
});
/* 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 .popuptext {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<h2>Popup</h2>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
Add an onclick to the popup's container and stop event propagation on all internal elements you don't want to trigger the action.
let popup = document.querySelector(".popup");
function toggle(e) {
e.stopPropagation();
popup.classList.toggle("hide");
}
function closePopup() {
if (!popup.classList.contains("hide")) {
popup.classList.toggle("hide");
}
}
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: lightgray;
display: flex;
flex-direction: column;
justify-content: center;
}
.popup {
width: 100px;
height: 100px;
background: white;
margin: 0 auto;
}
button {
position: fixed;
top: 0;
}
.hide {
display: none;
}
<div class="container" onclick="closePopup()">
<div class="popup hide" onclick="event.stopPropagation()"> </div>
<Button onclick="toggle(event)">Toggle</Button>
</div>
PHP
<?php
echo '<div>Display Content</div>';
echo '<div id="viewcontent"></div>';
?>
Script
Fill the generated content to the inside div
function showcontents()
{
var content = 'Add dynamic content';
$('#viewcontent').html(content);
}
Empty the div content by clicking outside div
$("body").click(function(e)
{
var contentlength = $("#viewcontent").text().length;
if(contentlength > 0 && e.target.id != 'btnshow'){
$('#viewcontent').html("");
}
}
I'm trying to display a popup using JavaScript, however, the div with class="popup" is the only thing that is currently being displayed. Both popup and popup2 should be displayed when the user performs an action. I'm not sure what I'm doing wrong.
HTML:
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2">
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
JavaScript:
$(() => {
$('#enter').on('keypress', function(e) {
if (e.keyCode == 13) {
const newTask = $(this).val();
if (newTask) {
The above section of the javascript can be ignored
var popup = document.getElementById("popup");
popup.classList.toggle("show");
var popup2 = document.getElementById("popup2");
popup2.classList.toggle("show");
}
}
});
});
CSS:
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popuptext {
visibility: hidden;
width: 160px;
height: 200px;
background-color: #131313;
color: #fff;
opacity: 0.95;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
left: 581px;
top: 180px;
margin-left: -80px;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
#popup2 {
visibility: hidden;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
top: 50px;
left: 50px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#popup2 .show {
visibility: visible;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
Your HTML code is invalid.
Change this
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2"></div>
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
to this
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2">
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
I think you should check your css, As it shouldn't be ".popup .show" and "#popup2 .show", instead it should be "#popup.show" and "#popup2.show". Then I saw you have given css for ".popup" and not for ".popup2", css for "#popup2" but not for "#popup", similarly you have given css for ".popuptext" and not for ".popup2text".
Also Can you please ellaborate exact behaviour you want on page. Before user enter anything and after user enter something.
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I am trying to create change image functionality like we can do in GMail account for changing our image.
On mousehover event it shows change image option.
Maybe it is some kind of new concept that I don't know. I am not very good in CSS and JavaScript but I guess that it is a div with changed z-index showing change image option.
Could you please explain how to achieve that kind of effect?
Here is a version using the css pseudo-element :after:
demo
HTML:
<a href="#" class="image">
<img src="http://www.gravatar.com/avatar/c0b4455b645967c1431d73beea9d9c54?s=128&d=identicon&r=PG">
</a>
CSS:
.image img{
width: 100px;
text-decoration: none;
}
.image:after{
content: "Change Image";
display: block;
position: relative;
top: -25px;
width: 100px;
background-color: rgba(77, 144, 254, 0.7);
color: white;
font-weight: bold;
text-decoration: none;
opacity: 0;
transition: opacity 300ms;
}
.image:hover:after{
opacity: 1;
}
If you want a pure CSS solution than you can try it like this
Demo
div.wrap {
position: relative;
display: inline-block;
}
div.wrap img {
position: absolute;
}
div.wrap img:nth-of-type(1) {
opacity: 0;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(1) {
z-index: 2;
opacity: 1;
}
div.wrap img:nth-of-type(2) {
opacity: 1;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(2) {
opacity: 0;
}
is this what you mean?
CSS
.image {
width: 100px;
height: auto;
}
.popup {
top: -25px;
left: 25px;
width: 150px;
height: 75px;
position: relative;
display: none;
background-color: grey;
border-style: solid;
border-width: 1px;
border-radius: 3px;
}
.image:hover + .popup {
display: block;
}
.popup:hover {
display: block;
}
HTML
<img class="image" src="http://img83.imageshack.us/img83/1905/dsc005142kc.jpg" />
<div class="popup">Change Image</div>
On jsfiddle
I'm not sure I understand what you want but I'd say something like that :
HTML :
<img src="yourimage" />
change
CSS :
a.appearOnHover {
display: none;
}
a.appearOnHover {
display: block;
background-color: #777777;
}