I'm working on a tic tac toe game on codepen and created my own modal. The first modal works very well and appears and disappears correctly. My second modal has a class that sets opacity and visibility so that the element is invisible just like the first. The difference is that when I remove the class that hides the element. The element doesn't appear.
I believe I have read before that this has to do with jquery not knowing about the element being hidden. I cannot remember how to fix it and couldn't find another problem like it. I want to know why the first element works and the second doesn't? I placed some of the relevant code for context and a link to the whole thing.
This is the codepen link
hasWon(){
let scores = this.scoring();
console.log(scores);
let win = $('.popup.end');
for(let i = 0; i < scores.length; i++){
let win = $('.end');
if(scores[i] === 3 || scores[i] === -3){
if(this.player === 1 && scores[i] === 3
|| this.player === -1 && scores[i] === -3){
win.html("<h4>Player won the Game!</h4>");
} else {
win.html("<h4>Computer won the Game!</h4>");
}
$('.back').removeClass('showEl');
win.classList.remove("hideEl");
}
}
if(this.emptyIndices().length === 0){
win.html("<h4>It's a draw!</h4>");
$('.back').removeClass('showEl');
// THIS SHOULD ACTIVATE SECOND MODAL!
win.classList.remove("hideEl");
}
}
.popup {
font-family: 'Signika', 'sans-serif';
margin: 100px auto 0 auto;
width: 600px;
height: 270px;
background: #d0e6d0;
border: 6px solid #97b097;
box-shadow: 0px 0px 1000px 2000px rgba(228, 241, 228, 0.9);
border-radius: 60px;
position: relative;
z-index: 1;
visibility: visible;
opacity: 1;
transition: all .5s;
}
.popup h4 {
padding-top: 60px;
font-weight: bold;
font-size: 2.5em;
left: 13%;
position: absolute;
}
.hideEl {
opacity: 0;
visibility: hidden;
}
.showEl {
opacity: 1;
visibility: visible;
}
<div class="popup end hideEl">
<h4>Ending Message</h4>
</div>
Your jquery code is awesome and perfect, except there was problem with html. You did not close the div with class - .popup.who which is why the div with class - .popup.end would end up wrapping withing .popup.who - div and after finishing with first modal when you hide .popup.who - div, it actually hides the .popup.end too, since the same was wrapped within the .popup.who - div.
Faulty Code
<div class="popup who">
<h4>Do you want to play as X or O?</h4>
<button type="button" class="btn btn-lg btn-primary choose_x player">X</button>
<button type="button" class="btn btn-lg btn-primary choose_o player">O</button>
<div> <!--This here wasn't ending the div-->
<div class="popup end hideEl">
<h4>Ending Message</h4>
</div>
Corrected code
<div class="popup who">
<h4>Do you want to play as X or O?</h4>
<button type="button" class="btn btn-lg btn-primary choose_x player">X</button>
<button type="button" class="btn btn-lg btn-primary choose_o player">O</button>
</div>
<div class="popup end hideEl">
<h4>Ending Message</h4>
</div>
UPDATED CODEPEN
Related
This question already has an answer here:
Change opacity on all elements except hovered one
(1 answer)
Closed 2 years ago.
I am working on a Website where I created 5 different Blocks with a div container. Now I added a CSS effect which makes the div container pop up if you hover over it.
.site-block {
position: relative;
width: 18%;
height: 345px;
background-color: #23253b;
margin: 8px;
border-radius: 12px;
top: 0;
transition: 0.5s;
}
.site-block:hover {
transform: scale(1.06);
}
HTML for 1 Block
<div class="site-block">
<div class="site-logo">
<img src="img/sites/csgoempire-logo.png"/>
</div>
<div class="bonus">
<p>Get a free case!</p>
</div>
<br>
<div class="deposit-methods">
<img src="img/deposit-methods/btc-deposit.png" alt="G2A" />
<img src="img/deposit-methods/eth-deposit.png" alt="CSGO" />
</div>
<div class="code">
<a>Primatcodes</a>
<img src="img/copy.png" alt="CSGO" />
</div>
<div class="site-url">
<a href="https://daddyskins.com/promo-code/Primatcodes">Claim
</a>
</div>
</div>
Now I want to add another effect which should blur out all the other blocks. So bassicaly if I hover over a block I want that block to pop out and have a opacity of 1 and the other 4 should lower their opacity to 0.2. Is that possible with CSS or Javascript? and if yes HOW
Looking forward to your answers!
Not sure if there is a CSS way, but here is a javascript native way using mouseenter and mouseleave events:
.container {
display:flex;
}
.site-block {
position: relative;
width: 18%;
height: 200px;
background-color: #23253b;
margin: 8px;
border-radius: 12px;
top: 0;
transition: 0.5s;
color: #FFF;
}
.site-block:hover {
transform: scale(1.06);
}
<div class="container">
<div class="site-block">
<p>AAA</p>
</div>
<div class="site-block"><p>AAA</p></div>
<div class="site-block"><p>AAA</p></div>
<div class="site-block"><p>AAA</p></div>
</div>
<!-- first try it like this, then move it to file, just make sure your HTML above js tag ☝️and its before </body> -->
<script>
const siteBox = document.querySelectorAll('.site-block');
siteBox.forEach(function(element){
element.addEventListener('mouseenter', function(event) {
siteBox.forEach((box) => {
if(event.target !== box) {
//box.style.opacity = 0.2;
box.style.backgroundColor = 'rgba(35, 37, 59, 0.2)';
box.style.color = '#000';
}
});
event.target.opacity = 1;
});
element.addEventListener('mouseleave', function(event) {
siteBox.forEach((otherBox) => {
otherBox.style.backgroundColor = 'rgb(35, 37, 59)';
otherBox.style.color = '#FFF';
});
});
});
</script>
I have a page which has multiple CSS only pop-ups implemented.
The popups work fine & close when the 'X' is clicked. However I wish for them to be closed when user clicks anywhere on the page. For that I implemented a short javascript code, which does close them on any click, but they dont open again (until page is refreshed). I am guessing the state is being saved as "none". How do i fix this?
The code:
window.onclick = function(event) {
if (event.target.className === "overlay") {
event.target.style.display = "none";
}
}
<div class="editbutton">
<a class="btn btn-link" href="#popupedit">Edit</a></div>
<div id="popupedit" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>
<div class="editbutton">
<a class="btn btn-link" href="#popupedit1">Edit</a></div>
<div id="popupedit1" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>
<div class="editbutton">
<a class="btn btn-link" href="#popupedit2">Edit</a></div>
<div id="popupedit2" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>
The CSS code:
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 2000;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup10 {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
position: relative;
transition: all 5s ease-in-out;
}
.popup10 h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup10 .close {
position: absolute;
top: 8px;
right: 10px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup10 .close:hover {
color: #06D85F;
}
.popup10 .content {
max-height: 30%;
overflow: auto;
}
Here is the code you should update in javascript.
window.onclick = function(event) {
if (event.target.className === "btn btn-link") {
document.getElementById('popupedit').style.display = "block";
}
if (event.target.className === "overlay") {
event.target.style.display = "none";
}
}
Why the popup is not opened again is that you set the overlay part display: none when clicking the part, but no process to set back to display: block.
So you should set the popup layout back to display: block again when clicking the edit button.
Please see the result working : https://jsfiddle.net/254xmyv7/3/
Hope this would be helpful. :)
Although #Kevin Lee's code works, adding a long list of elements with getElementById isn't recommended. If you remove one of the popup elements or add one, you have to go back and manually change the code. You should consider instead looping through all the existing elements with the class 'overlay' and applying the property with a single line of code rather than 10 separate ones:
window.onclick = function(event) {
var popups;
if (event.target.className === "btn btn-link") {
popups = document.getElementsByClassName('overlay');
console.log(popups[i]);
for (let i = 0; i < popups.length; i++) {
popups[i].style.display = "block";
}
}
if (event.target.className === "overlay") {
event.target.style.display = "none";
}
};
This will save you a lot of time and potentially aggravation down the road. Working fiddle here: https://jsfiddle.net/Vanadu/u7n30Lra/24/
In your javascript, the window element gets the click, finds the element with the class 'overlay' and sets its style.display property to 'none'. Then, when you click the element to open the popup, that click is 'bubbling up' the DOM tree to the window, and the window then sets the display property to 'none' again before the popup can open.
One approach might be to prevent the click on the elements from 'bubbling up' and use the same class on the window level to control the popup that you use on the element level.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
I am trying to add a button using .js to my HTML. That button is supposed to show up everytime I click on another button (with the id "imageChoose") which loads the preview of an image. The new button(id: removeBttn) is a delete button, it deletes the image and then it disappears
This is the html code:
<div class="row fileinput-control">
<img id="preview" src="default5.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
<br/>
<input type="file" id="image" style="display: none;" />
<!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->
<a href="javascript:changeProfile()">
<div class="file-btns">
<span class="btn btn-default btn-file" id="imageChoose">
<i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i></span></div>
</a>
<a id="removeBttnFrame" href="javascript:removeImage()">
</a>
</div>
</div>
The below .js code is adding that button along with some styling:
function addDeleteBttn() {
var removeBttn = document.createElement("BUTTON");
removeBttn.title="Entfernen";
removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'
removeBttn.class="removeBttnClass";
document.getElementById("removeBttnFrame").appendChild(removeBttn);
}
.removeBttnClass {
position: absolute;
top:91%;
left: 22.7%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: white;
cursor: pointer;
border-radius: 5px;
color: black;
text-align: center;
border-color: lightgray;
height: 50px ! important;
width: 53px;
border-radius: 4px;
padding: 10x 17px;
border-width: thin
}
The above function is not working properly: The button shows up as expected but without the styling. The .css is completely ignored for some reason. I'm new to HTML and cant figure it out.It looks like others have asked similar questions at How to dynamically create CSS class in JavaScript and apply? and here :How to style dynamically created elements with CSS.. These didn't really help me though. how can I do it?
Instead of using removeBttn.class you should use removeBtn.className
Why not just toggle a class on the remove button so that it's hidden from the DOM when clicked and visible when "imageChoose" is clicked?
You can do this by adding a function to the "imageChoose" button that toggles a css class name to "removeBttn"
function loadPreviewImage() {
// your code here to load preview. below is dummy to demonstrate
const previewImageDiv = document.querySelector('#preview-image');
previewImageDiv.classList.remove('hide');
}
function removePreviewImage() {
const previewImageDiv = document.querySelector('#preview-image');
previewImageDiv.classList.toggle('hide');
}
#preview-image.hide {
display: none;
}
#preview-image {
display: block;
width: 200px;
position: relative;
}
#remove-button {
position: absolute;
right: 0;
}
img {
max-width: 200px;
}
<div class="row fileinput-control">
<button id="image-choose" type="button" onclick="loadPreviewImage()">Load Preview</button>
<div id="preview-image">
<button id="remove-button"
type="button"
title="remove preview"
onclick="removePreviewImage()">x</button>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F6%2F66%2FLagothrix_lagotricha4.JPG%2F1200px-Lagothrix_lagotricha4.JPG&f=1&nofb=1" alt="monkey" title="monkey" />
</div>
</div>
I would also change "imageChoose" to a button element instead of an anchor tag. Buttons trigger actions on the page and anchor tags take you places. This is an accessibility standard.
You can change your javascript to this and it gonna work.
function addDeleteBttn() {
var removeBttn = document.createElement("BUTTON");
removeBttn.title="Entfernen";
removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.removeBttnClass { position: absolute; top:91%;'
+'left: 22.7%transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);'
+'background-color: white;cursor: pointer;border-radius: 5px;color: black;'
+'text-align: center;border-color: lightgray;height: 50px ! important;'
+'width: 53px;border-radius: 4px;padding: 10x 17px;border-width: thin}';
document.head.appendChild(style);
removeBttn.className="removeBttnClass";
document.getElementById("removeBttnFrame").appendChild(removeBttn);
}
I'm trying to build an "accordion" style collapsible div into my web page as described here on w3c schools...
accordion description
I've got most of it working - my code is this:
ASP:
<div class="col-md-4">
<button class="accordion">Section 1</button>
<div class="content">
<asp:Table ID="Consumable_table" runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
<h2>
<u>Consumable Stock</u>
</h2>
</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
</div>
</div>
CSS:
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;}
.active, .accordion:hover {
background-color: #ccc;}
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;}
And I've added the following Jscript:
$(document).ready(function () {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
return false;
});
}
});
The code seems to work fine and when I click the Accordion element it expands - But it then seems to post back and the accordion collapses again and doesn't display.
My question is how can I have it expand and stay expanded as described in the tutorial. I've seen a number of answers here and on various sites that suggests "return false" might be enough.
Does this have anything to do with the ASP table inside the div?
The dafault behaviour of the HTML button is to submit the form when clicked (its type is submit by default). All you need to do is to add type="button" attribute to the element, like this:
<button class="accordion" type="button">Section 1</button>
That should resolve the problem - it indicates that the button is just a simple clickable button, without any special action.
This answer also covers it: <button> vs. <input type="button" />. Which to use?
There are two ways,
By default the button behavior like submit button so postback will happen. If you want to prevent postback you can use below code.
<button class="accordion" onclick="return false;">Section 1</button>
You can use type attribute to prevent submit behavior.
<button type="button" class="accordion">Section 1</button>
I've created this little toggle, since i"m starting with javascript, but it's not working as I would like to. The brown box should appear and disappear both on hover and click (for ipad mostly).
Right now it's fine for hover, but not for clicking on ipad, it just appears once, and thats it.
I think it's also getting confused with my sharing icons.
Any help is appreciated.
jsfiddle
function toggleDisplay (toBlock, toNone) {
document.getElementById(toBlock).style.display = 'block';
document.getElementById(toNone).style.display = 'none';
}
#toggle_hero
{
float:left;
}
.leftHalf
{
display: block;
height: 100%;
width: 50%;
float: left;
position: absolute;
z-index: 2;
}
.leftHalf div
{
display:none;
}
.leftHalf:hover
{
}
.leftHalf:hover div
{
display:block;
width: 100%;
height: 23%;
overflow: auto;
margin: auto;
position: absolute;
left: 0;
bottom: 70px;
right: 0;
background: white;
color: #fff;
background-color:rgba(207,167,80,0.7);
padding:10px;
font-size: 0.8em;
font-weight: 200;
}
.leftHalf:hover div h3
{
font-weight: 500;
float:left;
}
.leftHalf:hover div span{
float:right;
text-align: center;
padding-bottom:5px;
color:black;
}
hover (on a pc) or click me (on ipad)
<div id="toggle_hero" onclick="toggleDisplay('comment', 'toggle_hero')">
<div class="leftHalf clearfix" id="comment">
<div>
<span>
<a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>
<a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
</span>
<h3>this text should appear both on hover and click (for ipad)</h3>
</div>
</div>
</div>
You could just create an event listener that captures the current toggled state in a var.
var toggle = false;
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
if (toggle === false) {
this.getElementsByTagName('p')[0].style.display = 'none';
toggle = true;
} else {
this.getElementsByTagName('p')[0].style.display = 'initial';
toggle = false;
}
});
http://jsfiddle.net/scott88/bLkdt6mc/
You can add another listener for the 'mouseover'.
Your HTML structure is a bit weird. The text that you want to hover/click is actually outside of the target area for your click event. It happens to work for me locally because of the absolute positioning, but I wouldn't be surprised if the iPad browser behaves differently.
I would suggest defining a clear target for what is to be clicked/hovered, apply a class on click/hover, and handle the rest in CSS. I put together a sample of what I envision. You can remove the mouseenter and mouseleave events to simulate on a computer how it works with the touch events. I'm not sure exactly how you want it to behave, but hopefully this is enough to get you started.
function setHover(isHover) {
var element = document.getElementById("toggle_hero");
if (isHover)
element.className = "hovered";
else
element.className = "";
}
function toggleHover() {
var element = document.getElementById("toggle_hero");
setHover(element.className === "");
}
#toggle_hero {
float:left;
}
#comment {
display:none;
width: 100%;
height: 23%;
overflow: auto;
margin: auto;
position: absolute;
left: 0;
right: 0;
background: white;
color: #fff;
background-color:rgba(207,167,80,0.7);
padding:10px;
font-size: 0.8em;
font-weight: 200;
}
.hovered #comment {
display: block;
}
<div id="toggle_hero" onclick="toggleHover()" onmouseenter="setHover(true);" onmouseleave="setHover(false);">
hover (on a pc) or click me (on ipad)
<div id="comment">
<div>
<span>
<a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>
<a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
</span>
<h3>this text should appear both on hover and click (for ipad)</h3>
</div>
</div>
</div>