How can I fade text in using JavaScript with button - javascript

I have a function for the button already but I can't figure out what I need to add to make it fade in
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Do I need to make a new function or can I add it to my existing one?
Here is my CSS
opacity: 1;
transition: 0.7s opacity;
}
#h3.fade {
opacity: 0;
transition: none;
}
You can see the whole code here.

Your problem is you are removing the transition, so it causes it to not transition, but just jump. Leave the transition on the whole time, and just change the opacity:
const target = document.querySelector('#target');
document.querySelector('button').addEventListener('click', () => {
target.classList.contains('fade')
? target.classList.remove('fade')
: target.classList.add('fade');
});
#target {
transition: 1s opacity;
opacity: 1;
width: 100px;
height: 50px;
background: #F00;
}
#target.fade {
opacity: 0;
}
<div id="target"></div>
<button>Toggle</button>

Use fadeIn() and fadeOut() functions as given below.
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
$("#myDIV").fadeIn();
} else {
$("#myDIV").fadeOut();
}
}
.button-holder {
position: absolute;
margin: auto;
height: 25px;
top: 260px;
left: 0;
width:100%;
text-align: center;
}
.Box {
position: relative;
margin: auto;
display: block;
border: solid 4px skyBlue;
margin-top: 2%;
width: 600px;
height: 450px;
background: none;
z-index: -1
}
.tittle {
text-align: center;
font-family: 'courier new', Courier, monospace;
}
.speech-buble-top {
position: relative;
display: block;
border: solid 4px black;
top: -15%;
left: ;
width: 200px;
height: 100px;
background: white;
border-radius: 50%;
text-align: center
}
#h3 {
position: absolute;
text-align: center;
vertical-align: center;
width: 90%;
height: 80%;
left: 10px;
font-size: 25px;
background: none;
border: none;
border-radius: 5px;
opacity: 1;
transition: 0.7s opacity;
}
#h3.fade {
opacity: 0;
transition: none;
}
.speech-buble-bottom {
position: relative;
display: triangle;
border-right: solid 4px black;
border-bottom: solid 4px black;
top: -23.5%;
left: 30%;
width: 15px;
height: 20px;
background: white;
z-index: 1;
transform: rotate(13deg);
}
.balloon-1 {
position: absolute;
top: -2%;
left: 70%;
width: 100px;
height: 110px;
background: red;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-1 {
position: absolute;
top: 22%;
left: 76%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid red;
z-inedx: 1;
}
.balloon-string-1 {
position: absolute;
top: 29.5%;
left: 69%;
width: 80px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(100deg);
z-inedx: -1;
}
.balloon-2 {
position: absolute;
top: -8%;
left: 75%;
width: 100px;
height: 110px;
background: #228B22;
border-radius: 50%;
z-index: -1;
}
.balloon-string-2 {
position: absolute;
top: 26%;
left: 69%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(115deg);
z-inedx: -1;
}
.balloon-3 {
position: absolute;
top: -4%;
left: 78%;
width: 100px;
height: 110px;
background: #9400D3;
border-radius: 50%;
z-index: -1;
}
.balloon-bottom-3 {
position: absolute;
top: 20%;
left: 84%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #9400D3;
}
.balloon-string-3 {
position: absolute;
top: 29%;
left: 71%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(120deg);
z-inedx: -1;
}
.balloon-4 {
position: absolute;
top: -2%;
left: 85%;
width: 100px;
height: 110px;
background: #FFD700;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-4 {
position: absolute;
top: 22%;
left: 91%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #FFD700;
}
.balloon-string-4 {
position: absolute;
top: 29.5%;
left: 73%;
width: 130px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(140deg);
z-inedx: -1;
}
.head {
position: absolute;
top: 5%;
left: 40%;
width: 125px;
height: 135px;
background: pink;
border-radius: 5px;
}
.l-lash-1 {
position: absolute;
top: 10%;
left: 28%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-50deg)
}
.l-lash-2 {
position: absolute;
top: 8%;
left: 30%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-30deg)
}
.l-lash-3 {
position: absolute;
top: 8%;
left: 33%;
width: 3%;
height: 6%;
background: black;
transform: rotate(-20deg)
}
.r-lash-1 {
position: absolute;
top: 10%;
left: 75%;
width: 3%;
height: 8%;
background: black;
transform: rotate(50deg)
}
.r-lash-2 {
position: absolute;
top: 8%;
left: 73%;
width: 3%;
height: 8%;
background: black;
transform: rotate(30deg)
}
.r-lash-3 {
position: absolute;
top: 8%;
left: 70%;
width: 3%;
height: 6%;
background: black;
transform: rotate(20deg)
}
.eye-left {
position: absolute;
top: 15px;
left: 35px;
width: 30px;
height: 50px;
background: white;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.eye-right {
position: absolute;
top: 15px;
left: 66px;
width: 30px;
height: 50px;
background: white;
border-radius: 5px;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.inner-eye-left {
position: absolute;
top: 15%;
left: 19%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.inner-eye-right {
position: absolute;
top: 15%;
left: 0%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.pupil-left {
position: absolute;
top: 15%;
left: 15%;
width: 42%;
height: 35%;
background: white;
border-radius: 50%;
}
.pupil-right {
position: absolute;
top: 15%;
left: 10%;
width: 35%;
height: 30%;
background: white;
border-radius: 50%;
}
.hair-left {
position: absolute;
top: -25%;
left: 45%;
width: 5%;
height: 30%;
background: pink;
transform: rotate(-30deg)
}
.hair-right {
position: absolute;
top: -18%;
left: 60%;
width: 5%;
height: 25%;
background: pink;
transform: rotate(30deg)
}
.hair-top-left {
position: absolute;
top: -30%;
left: 32%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.hair-top-right {
position: absolute;
top: -25%;
left: 65%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.mouth-top {
position: absolute;
top: 60%;
left: 29%;
width: 50%;
height: 17%;
background: pink;
border-radius: 50%;
z-index: 1;
}
.mouth {
position: absolute;
top: 61%;
left: 29%;
width: 50%;
height: 17%;
background: none;
border-radius: 50%;
border-bottom: solid 4px black;
}
.ear-bar-1 {
position: absolute;
top: 34%;
left: -9%;
width: 120%;
height: 31%;
background: lightGrey;
z-index: -1;
}
.ear-bar-2 {
position: absolute;
top: 40%;
left: -18%;
width: 140%;
height: 19%;
background: pink;
z-index: -2;
}
.ear-bar-3 {
position: absolute;
top: 45%;
left: -25%;
width: 155%;
height: 10%;
background: lightGrey;
z-index: -3;
}
.ear-left-circle {
position: absolute;
top: 41%;
left: -37%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.ear-right-circle {
position: absolute;
top: 41%;
left: 125%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.neck {
position: absolute;
top: 100%;
left: 26.5%;
width: 50%;
height: 12%;
background: lightGrey;
border-radius: 5px
}
.upper-body {
position: absolute;
top: 110%;
left: -15%;
width: 130%;
height: 125%;
background: pink;
border-radius: 5px;
z-index: +1
}
.bullet-1 {
position: absolute;
top: 5%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-2 {
position: absolute;
top: 5%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-3 {
position: absolute;
top: 88%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-4 {
position: absolute;
top: 88%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.heart-left {
position: absolute;
top: 20%;
left: 68%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(-25deg)
}
.heart-right {
position: absolute;
top: 20%;
left: 72%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(25deg)
}
.hand-left {
position: absolute;
top: 132%;
left: -85%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(30deg);
z-index: -1;
}
.hand-right {
position: absolute;
top: 132%;
left: 100%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(-35deg);
z-index: 1;
}
.h-line-1 {
position: absolute;
top: 34%;
left: 1%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-2 {
position: absolute;
top: 34%;
left: 20%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-3 {
position: absolute;
top: 34%;
left: 40%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-4 {
position: absolute;
top: 34%;
left: 60%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.palm-left {
position: absolute;
top: 0%;
left: -30%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(90deg);
}
.palm-right {
position: absolute;
top: 0%;
left: 85%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(270deg);
}
.left-leg {
position: absolute;
top: 235%;
left: 0%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.right-leg {
position: absolute;
top: 235%;
left: 68%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.l-line-1 {
position: absolute;
top: 0%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.l-line-2 {
position: absolute;
top: 20%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.l-line-3 {
position: absolute;
top: 40%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.shoe-left {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
.shoe-right {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="setest_style.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 class="tittle">Robot</h1>
<div class="button-holder"><button class="button" onclick="myFunction()">Click Me</button></div>
<div class="Box">
<div class="speech-buble-top">
<div id="myDIV" style="display: none">
<h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>
</div>
<div class="speech-buble-bottom"></div>
<div class="balloon-1"></div>
<div class="balloon-2"></div>
<div class="balloon-3"></div>
<div class="balloon-4"></div>
<div class="balloon-bottom-1"></div>
<div class="balloon-bottom-3"></div>
<div class="balloon-bottom-4"></div>
<div class="balloon-string-1"></div>
<div class="balloon-string-2"></div>
<div class="balloon-string-3"></div>
<div class="balloon-string-4"></div>
<div class="head">
<div class="eye-left">
<div class="inner-eye-left"></div>
<div class="pupil-left"></div>
</div>
<div class="eye-right">
<div class="inner-eye-right"></div>
<div class="pupil-right"></div>
</div>
<div class="l-lash-1"></div>
<div class="l-lash-2"></div>
<div class="l-lash-3"></div>
<div class="r-lash-1"></div>
<div class="r-lash-2"></div>
<div class="r-lash-3"></div>
<div class="hair-left"></div>
<div class="hair-right"></div>
<div class="hair-top-left"></div>
<div class="hair-top-right"></div>
<div class="mouth-top"></div>
<div class="mouth"></div>
<div class="ear-bar-1"></div>
<div class="ear-bar-2"></div>
<div class="ear-bar-3"></div>
<div class="ear-left-circle"></div>
<div class="ear-right-circle"></div>
<div class="neck"></div>
<div class="upper-body">
<div class="bullet-1"></div>
<div class="bullet-2"></div>
<div class="bullet-3"></div>
<div class="bullet-4"></div>
<div class="heart-left"></div>
<div class="heart-right"></div>
<div class="bullet-center"></div>
</div>
<div class="hand-left">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-left"></div>
</div>
<div class="hand-right">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-right"></div>
</div>
<div class="left-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-left"></div>
</div>
<div class="right-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-right"></div>
</div>
</div>
<!--end of head-->
</div>
</body>
</html>

it is possible playing with css animations, adding css classes and removing them.
function fadeOut() {
var myElement = document.querySelector("#myElement");
myElement.classList.remove('fadeIn');
myElement.classList.add('fadeOut');
}
function fadeIn() {
var myElement = document.querySelector("#myElement");
myElement.classList.remove('fadeOut');
myElement.classList.add('fadeIn');
}
#myElement{
width: 100px;
height: 100px;
background: red;
}
.fadeOut{
-webkit-animation: fadeOut 1.0s forwards;
}
.fadeIn{
-webkit-animation: fadeIn 1.0s forwards;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="myElement">
</div>
<button onclick="fadeOut()">
Hide
</button>
<button onclick="fadeIn()">
Show
</button>

Related

Change Body Color on a CSS Style as Div

I'm new to HTML and CSS (student) and I'm running into an issue here.
I want to change the body background color when clicking on an element having a CSS Animation. Is it possible? Thanks!
I tried to set the Rocket as a Button, But it only changed the Rockets Color. I want to make it Change the background color for the Body.
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.orbit {
height: 450px;
width: 650px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 500px;
bottom: 300px;
animation: spin 5s infinite linear;
}
#keyframes spin {
100% {
transform: rotate(360deg)
}
}
.rocket {
background-color: #fafcf7;
height: 50px;
width: 25px;
border-radius: 50% 50% 0 0;
position: relative;
left: 11px;
top: 115px;
}
.rocket:before {
position: absolute;
content: "";
background-color: #39beff;
height: 20px;
width: 55px;
z-index: -1;
border-radius: 50% 50% 0 0;
right: -15px;
bottom: 0;
}
.rocket:after {
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -4px;
left: 4.3px;
}
.window {
position: relative;
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
top: 15px;
left: 5px;
}
<div class="orbit">
<button class="rocket"></button>
<div class="window"></div>
</div>
To do this, you need to know JavaScript. Take this sample code and try to do more yourself.
const rocket = document.getElementById("rocket")
rocket.addEventListener('click', (e) => {
const randomColor = Math.floor(Math.random()*16777215).toString(16);
document.body.style = `background: radial-gradient(circle at bottom, #${randomColor} 0, black 100%);`
})
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.orbit {
height: 450px;
width: 650px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 500px;
bottom: 300px;
animation: spin 10s infinite linear;
}
#keyframes spin {
100% {
transform: rotate(360deg)
}
}
.rocket {
background-color: #fafcf7;
height: 50px;
width: 25px;
border-radius: 50% 50% 0 0;
position: relative;
left: 11px;
top: 115px;
cursor: pointer;
}
.rocket:before {
position: absolute;
content: "";
background-color: #39beff;
height: 20px;
width: 55px;
z-index: -1;
border-radius: 50% 50% 0 0;
right: -15px;
bottom: 0;
}
.rocket:after {
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -4px;
left: 4.3px;
}
.window {
position: relative;
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
top: 15px;
left: 5px;
}
<div class="orbit">
<button id="rocket" class="rocket"></button>
<div class="window"></div>
</div>

Need button to be active if all objects are dropped on correct boxes - Drag and Drop game

I have made a Drag and drop game which has 4 objects to be dropped on 4 targets with correct order. I want an button or animation to activate after dropping all objects on correct boxes. Drag and Drop part is done but i want to check if all objects are dropped or not. Any existing examples will be helpful. I have medium level skills on java script
HTML
<div class="button" id="button" onclick="on();"><img src="image/next.png"></div>
<div id="jumbledWordsWrapper" class="jumble">
<span id="150" data-source-id="Increases Sperm Production" draggable="true" class="onefif">Increases Sperm Production</span>
<span id="1" data-source-id="Augments sperm motility" draggable="true" class="one">Augments sperm motility</span>
<span id="2" data-source-id="Enhances Sperm Protection" draggable="true" class="two">Enhances Sperm Protection</span>
<span id="CarniQ" data-source-id="Improves sperm morphology" draggable="true" class="CarniQ">Improves sperm morphology</span></div>
<div id="orderedWordsWrapper" class="order">
<span data-target-id="Increases Sperm Production" class="oneff"></span>
<span data-target-id="Augments sperm motility" class="ttwo"></span>
<span data-target-id="Enhances Sperm Protection" class="oon"></span>
<span data-target-id="Improves sperm morphology" class="cc"></span>
</div>
js
<script type="text/javascript">
const jumbledWords = document.querySelectorAll('#jumbledWordsWrapper > span');
const orderedWords = document.querySelectorAll('#orderedWordsWrapper > span');
jumbledWords.forEach(el => {
el.addEventListener('dragstart', dragStartHandler);
el.addEventListener('dragend', dragEndHandler);
})
orderedWords.forEach(el => {
el.addEventListener('dragenter', dragEnterHandler);
el.addEventListener('dragover', dragOverHandler);
el.addEventListener('dragleave', dragLeaveHandler);
el.addEventListener('drop', dropHandler);
})
function dragStartHandler(e) {
e.dataTransfer.setData('text', e.target.getAttribute('data-source-id'));
e.target.style = 'opacity: 0.3';
}
function dragEndHandler(e) {
e.target.style = 'opacity: 1';
}
function dragEnterHandler(e) {
e.target.style = 'border: 2px dashed gray; box-sizing: border-box; background: whitesmoke';
}
function dragOverHandler(e) {
event.preventDefault();
}
function dragLeaveHandler(e) {
e.target.style = 'border:1px soild white; background: white';
}
function dropHandler(e) {
e.preventDefault();
dragLeaveHandler(e);
const dataSourceId = e.dataTransfer.getData('text');
const dataTargetId = e.target.getAttribute('data-target-id');
if(dataSourceId === dataTargetId) {
e.target.insertAdjacentHTML('afterbegin', dataSourceId);
e.target.style = 'border: none; background: #fff';
let sourceElemDataId = 'span[data-source-id="' + dataSourceId + '"]';
let sourceElemSpanTag = document.querySelector(sourceElemDataId);
Object.assign(sourceElemSpanTag, {
className: 'no-longer-draggable',
draggable: false,
});
}
}
function on() {
let nodeList = document.querySelectorAll(".no-longer-draggable");
console.log(nodeList);
for(var i = 0; i < nodeList.length; ++i) {
// print the tag name of the node (DIV, SPAN, etc.)
var curr_node = nodeList[i];
// console.log(curr_node.tagName);
for(var j = 0; j < curr_node.attributes.length; ++j) {
var curr_attr = curr_node.attributes[j];
console.log(curr_attr.name, curr_attr.value);
if (curr_attr.name=='id' && curr_attr.value=='150' && curr_attr.value=='1' && curr_attr.value=='2' &&
curr_attr.value=='CarniQ' && curr_attr.value=='CCQ' )
{ }
else
{
}
}
}
}
</script>
CSS
*{
margin: 0px;
padding: 0px;
}
html, body {
width:100%;
padding:0;
margin:0;
font-family: sans-serif;
background:#417dbf;
color:#fff;
}
.no-longer-draggable {
cursor: not-allowed !important;
background: lightgray !important;
opacity: 0.0 !important;
}
.background{
position: fixed;
z-index: -2;
top: 0px;
left: 0px;
width: 100%;
height: auto;
}
.background img{width: 100%;}
h2 {
margin-bottom: 50px;
}
.jumble{
position: fixed;
top: 18%;
left: 11%;
z-index: 5;
}
#jumbledWordsWrapper span {
/*background: white;*/
box-sizing: border-box;
display: inline-block;
color: red;
top: 81%;
font-weight: bold;
width: auto;
height: 44px;
padding: 13px 19px;
margin: 0 0px;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
#orderedWordsWrapper span {
padding: 6px 9px;
position: fixed;
color: blue;
font-weight: bold;
z-index: 1;
background: white;
width: 100px;
height: 28px;
box-sizing: border-box;
text-align: center;
margin-top: 50px;
}
.order{
position: fixed;
top: 30%;
left: 55%;
z-index: 5;
}
.copy{
position: fixed;
z-index: 1;
left: 25%;
width: 47%;
height: auto;
top: 4%;
}
.copy img{width: 100%;}
.lock{
position: fixed;
z-index: 1;
left: 7%;
width: 38%;
height: auto;
top: 30%;
}
.lock img{width: 100%;}
.puzzle{
position: fixed;
z-index: 1;
right: 5%;
width: 46%;
height: auto;
top: 25%;
}
.puzzle img{width: 100%;}
.onefif{
color: red;
position: fixed;
font-weight: bold;
right: 424px;
bottom: 117px;
}
.one{
position: fixed;
color: red;
right: 373px;
bottom: 117px;
font-weight: bold;
}
.two{
position: fixed;
color: red;
right: 317px;
bottom: 117px;
font-weight: bold;
}
.CarniQ{
position: fixed;
color: red;
right: 20%;
width: 8%;
height: auto;
bottom: 14%;
}
.CarniQ img {width:100%;}
.ccq{
position: fixed;
right: 9%;
width: 8%;
height: auto;
bottom: 14%;
}
.ccq img {width:100%;}
.oneff{
position: fixed;
top: 30%;
width: 42px!important;
left: 55%;
z-index: 5;
}
.ttwo{
position: fixed;
top: 39%;
width: 42px!important;
left: 79%;
z-index: 5;
}
.oon{
position: fixed;
top: 39%;
width: 42px!important;
left: 56%;
z-index: 5;
}
.cc{
position: fixed;
top: 55%;
left: 55%;
z-index: 5;
}
.cqq{
position: fixed;
top: 55%;
left: 70%;
z-index: 5;
}
.white_box1{
height: 71%;
width: 81%;
position: fixed;
top: 6%;
left: 9%;
z-index: 1;
}
.white_box1 img{width:100%;}
.oat{
height: auto;
width: 11%;
position: fixed;
top: 6%;
left: 0%;
z-index: 1;
}
.oat img{width:100%;}
.ref{
height: auto;
width: 79%;
position: fixed;
bottom: 6%;
left: 3%;
z-index: 1;
}
.ref img{width:100%;}
.border_t{
height: auto;
width: 100%;
position: fixed;
top: 0%;
left: 0;
z-index: 1;
}
.border_t img{width:100%;}
.border_d{
height: auto;
width: 100%;
position: fixed;
bottom: 0%;
left: 0;
z-index: 1;
}
.border_d img{width:100%;}
.button{
height: auto;
width: 11%;
position: fixed;
bottom: 4%;
right: 4%;
z-index: 1;
}
.button img{width:100%;}
I tried setting boolean on draggable objects to detect if they are dropped.

How can I change color of the heart-button after click? [duplicate]

This question already has answers here:
Change color of an anchor when clicked
(4 answers)
Closed 2 years ago.
You can see in my code below I used pseudo-elements and actually that's why I got confused. Any idea how can I change color after click on button?
.heart {
background-color: red;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
<div class="wrapper">
<a class="heart" href="#"></a>
</div>
Use currentColor as the background-color for all elements. Set the color of .heart to red, and set it to black when it's focused or active:
.heart {
color: red;
background-color: currentColor;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart::before,
.heart::after {
content: "";
background-color: currentColor;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
.heart:focus {
color: black;
}
<div class="wrapper">
<a class="heart" href="#"></a>
</div>
If you want the color change to remain even after you click somewhere else, and you would like to toggle the color on click, you might want to use a checkbox with label instead:
.heart {
color: red;
background-color: currentColor;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%;
top: 45%;
width: 50px;
}
.heart-checkbox {
display: none;
}
.heart::before,
.heart::after {
content: "";
background-color: currentColor;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
.heart-checkbox:checked + .heart {
color: black;
}
<div class="wrapper">
<input type="checkbox" class="heart-checkbox" id="heart-checkbox">
<label class="heart" for="heart-checkbox"></label>
</div>
If it's only when you click on it, you can use the active state (see example code below):
.heart:active, .heart:active:before, .heart:active:after {
background-color: black;
}
If you want to change color while the element is in focus, focus state:
.heart:focus, .heart:focus:before, .heart:focus:after {
background-color: black;
}
If you want to change it "permenantly", you can use JavaScript to add a class to the element (with the desired colors declared in CSS).
.heart {
background-color: red;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
.heart:active, .heart:active:before, .heart:active:after {
background-color: black;
}
<div class="wrapper">
<a class="heart" href="#"></a>
</div>
You can use two images red and white for example. and you can also use javascript.
html
<div class="wrapper">
<a class="a-heart" href="#"><img src="redHeart.png" id="heart" class="red"></a>
</div>
javascript
let heart = document.getElementById('heart');
heart.addEventListener('click',()=>{
if(heart.classList.contains('red')){
heart.classList.remove('red');
heart.classList.add('white');
heart.src = 'whiteHeart.png';
}else{
heart.classList.remove('white');
heart.classList.add('red');
heart.src = 'redHeart.png';
}
});

how do I maintain Aspect Ratio 16/9 on a div and not have it bleed outside the container?

What I need is
x[]x
AND
x
[]
x
dynamically maintaining aspect ratio with WIDTH and HEIGHT. Think object-fit but for div.
Example of the problem: https://codepen.io/anon/pen/erRvGx?editors=1111
What I have tried without much success
.AspectRatio {
height: 0;
overflow: hidden;
padding-top: 56.25%;
background: white;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.video {
background: yellow;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
like this ?
.box1 { width: 200px; height: 100px; position: relative; background-color: red; margin-bottom: 20px; }
.box2 { width: 100px; height: 150px; position: relative; background-color: red; margin-bottom: 20px; }
.box3 { width: 300px; height: 300px; position: relative; background-color: red; margin-bottom: 20px; }
.video { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: yellow; }
<div class="box1">
<div class="video"></div>
</div>
<div class="box2">
<div class="video"></div>
</div>
<div class="box3">
<div class="video"></div>
</div>
top: 50%; left: 50%; transform: translate(-50%, -50%); this code solves the problem

Design tooltip with arrow

Hi I've problem with my tooltip the arrow doesn't show, also I don't how to place the arrow on front of the tooltip, I included a image of the tooltip I would like to design.I started to learn html5 and css3, can anyone help please.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content:"\2190";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
/* width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent; */
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content{
position:relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.4;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow{
widows:50px ;
height:50px ;
}
span.arrowup{
background-image: url('arrowup.png') ;
}
<div style="margin-top:200px;margin-left:200px" >
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>
I hope the issue is about positioning. Check below snippet for reference.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content: "\21D3";
position: absolute;
bottom: -50%;
left: 50%;
color: red;
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content {
position: relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.7;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow {
widows: 50px;
height: 50px;
}
span.arrowup {
background-image: url('arrowup.png');
}
<div style="margin-top:200px;margin-left:200px">
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>

Categories