How to test css color in javascript

How to test css color in javascript - javascript

I'm still a beginner in javascript and CSS,
I have a bookmark heart icon I want to show alert depending if the icon checked or unchecked.
$('button').on('click', function(){
$(this).toggleClass('faved');
if ($(this).hasClass('faved')) {
alert("red");
} else {
alert("empty");
}
});
#yellow: #FFAC33;
#gray: #CCC;
#red: #E86C6C;
button#favorite {
background: transparent;
border: 0;
span {
padding: 20px;
font-size: 70px;
font-weight: normal;
color: #gray;
position: relative;
span {
position: absolute !important;
top: 0;
left: 0;
font-size: 70px;
}
}
}
#keyframes favorite {
.favorite;
}
#-webkit-keyframes favorite {
.favorite;
}
#keyframes favoriteHollow {
.favoriteHollow;
}
#-webkit-keyframes favoriteHollow {
.favoriteHollow;
}
button#heart {
background: transparent;
border: 0;
span {
padding: 20px;
font-size: 70px;
font-weight: normal;
color: #gray;
position: relative;
span {
position: absolute !important;
top: 0;
left: 0;
font-size: 70px;
}
}
&.faved {
span {
-webkit-animation: heart 0.5s;
animation: heart 0.5s;
color: #red;
span {
z-index: 1000;
-webkit-animation: heartHollow 0.5s;
animation: heartHollow 0.5s;
}
}
}
}
.heart {
{
transform: scale(1);
}
{
transform: scale(1.2);
color: #red;
}
{
transform: scale(1.4);
color: #red;
}
{
transform: scale(1);
color: #red;
}
}
.heartHollow {
{
transform: scale(1);
opacity: 1;
}
{
transform: scale(1.4);
opacity: 0.5;
}
{
transform: scale(1.6);
opacity: 0.25;
}
{
transform: scale(2);
opacity: 0;
display: none;
}
}
#keyframes heart {
.heart;
}
#-webkit-keyframes heart {
.heart;
}
#keyframes heartHollow {
.heartHollow;
}
#-webkit-keyframes heartHollow {
.heartHollow;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<button id="heart">
<span class="glyphicon glyphicon-heart">
<span class="glyphicon glyphicon-heart">
</span>
</span>
</button>
I know your time is valuable and I appreciate your attention and thank you in advance

for checking class you have to use .hasClass('your class name') or if you want to check background color if($(this).css('background') == "red")
$('button').on('click', function(){
$(this).toggleClass('faved');
if ($(this).hasClass('faved')) {
alert("red");
} else {
alert("empty");
}
});

Related

Why my code work fine on chrome but not firefox?

I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?
let baseDiv, lowerDiv, middleDiv, upperDiv;
document.addEventListener("DOMContentLoaded",()=>{
baseDiv = document.getElementById("base");
lowerDiv = document.getElementById("lower");
middleDiv = document.getElementById("middle");
upperDiv = document.getElementById("upper");
});
let backward = () => {
lowerDiv.classList.add("rotate0to90");
}
let forward = () => {
upperDiv.classList.add("rotate0to_90");
}
let upperHandler = () => {
upperDiv.classList.replace("zIndex4", "zIndex2");
middleDiv.innerHTML=baseDiv.innerHTML;
middleDiv.className = "lowerHalfCard-after zIndex4 rotate90to0 transform0to90"
}
let lowerHandler = () => {
lowerDiv.classList.replace("zIndex4", "zIndex2");
middleDiv.innerHTML=baseDiv.innerHTML;
middleDiv.className = "upperHalfCard-after zIndex4 rotate_90to0 transform0to_90";
}
let middleHandler = () => {
upperDiv.innerHTML=baseDiv.innerHTML;
lowerDiv.innerHTML=baseDiv.innerHTML;
upperDiv.className = "upperHalfCard-after zIndex4";
lowerDiv.className = "lowerHalfCard-after zIndex2";
middleDiv.className = "hide";
}
.fullCard,
.lowerHalfCard,
.upperHalfCard,
.fullCard-after,
.lowerHalfCard-after,
.upperHalfCard-after {
background-color: inherit;
border-radius: 10px;
height: 100%;
width: 100%;
position: absolute;
align-items: center;
display: flex;
justify-content: center;
vertical-align: middle;
}
.fullCard-after::after,
.upperHalfCard-after::after {
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard-after::after {
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard,
.lowerHalfCard-after {
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.upperHalfCard,
.upperHalfCard-after {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
.splitFlap {
background-color: black;
box-sizing: border-box;
border-radius: 10px;
width: 100px;
height: 150px;
position: relative;
}
.rotate0to90 {
animation-name: r0to90;
}
.rotate90to0 {
animation-name: r90to0;
}
.rotate0to_90 {
animation-name: r0to_90;
}
.rotate_90to0 {
animation-name: r_90to0;
}
.rotate0to90,
.rotate90to0,
.rotate0to_90,
.rotate_90to0 {
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes r0to90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(90deg);
}
}
#keyframes r90to0 {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
#keyframes r0to_90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(-90deg);
}
}
#keyframes r_90to0 {
from {
transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
}
}
.transform0to_90 {
transform: rotateX(-90deg);
}
.transform0to90 {
transform: rotateX(90deg);
}
.hide {
display: none
}
.zIndex2 {
z-index: 2;
}
.zIndex4 {
z-index: 4;
}
.zIndex10 {
z-index: 10;
}
.blue {
background-color: blue
}
.green {
background-color: green
}
.red {
background-color: red
}
.orange {
background-color: orange
}
<div class="splitFlap">
<div id="base" class="fullCard-after zIndex2">
<img src="img/1_100.png">
</div>
<div class="upperHalfCard-after zIndex4" id="upper" onAnimationEnd="upperHandler()">
<img src="img/0_100.png">
</div>
<div id="middle" class="hide" onAnimationEnd="middleHandler()">
</div>
<div class="lowerHalfCard-after zIndex2" id="lower" onAnimationEnd="lowerHandler()">
<img src="img/0_100.png">
</div>
</div>
<p>
<button onClick="forward()">
+
</button>
<button onClick="backward()">
-
</button>
</p>

After several tries, I have made it work properly by adding the following CSS attribute to the splitFlap class
transform-style: preserve-3d;

Use the -moz- extension before all your transitions in CSS. That will make sure Mozilla "understands" it.
Example:
#keyframes r_90to0 {
from {
transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
}

How do I make another text display after the first one appears in css?

I am making a mental health website. To make it interactive, I have used a animation text that appears. I was wondering how I can add another line of text to pass.
This is how it looks like:
The purple text appears before the black text. I want to add the sentence "We chose mental health because it matters"
How do I do this?
/* The animation text*/
.intro {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.intro1 {
animation: showup 7s infinite;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
color: fuchsia;
}
.intro2 {
width: 0px;
animation: reveal 7s infinite;
}
.sub-head {
margin-left: -355px;
animation: slidein 7s infinite;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 355px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 355px;
}
}
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head"> We care about you</span>
<!-- lol dramatic effect-->
</div>
</div>

You mean something like this -
I test if animation has finished. That is much safer than setTimeout or interval since the animation already has the interval
const elems = [...document.querySelectorAll('.intro2 .sub-head')]
const welcome = document.querySelector('.intro1')
welcome.addEventListener("animationend", function() {
welcome.classList.add('hide')
elems[0].classList.add("hide")
elems[1].classList.remove("hide")
});
/* The animation text*/
.intro {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.intro1 {
animation: showup 7s;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
color: fuchsia;
}
.intro2 {
width: 0px;
animation: reveal 7s infinite;
}
.sub-head {
margin-left: -355px;
animation: slidein 7s infinite;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 355px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 355px;
}
}
.hide {
display: none;
}
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head"> We care about you</span>
<span class="sub-head hide">We chose mental health because it matters</span>
<!-- lol dramatic effect-->
</div>
</div>

One of the ways:
// set the interval for which the function will run (in our case 7 secons - 7000 )
setInterval(function() {
// grab all elements with class 'sub-head'
const elems = document.querySelectorAll('.sub-head')
// loop through the found elements
elems.forEach(e => {
// check if the element has a class 'inactive', if there is one, remove it
if (e.classList.contains('inactive')) e.classList.remove('inactive')
// if not, add it
else e.classList.add('inactive');
});
}, 7000)
/* The animation text*/
.intro {
display: inline-flex;
overflow: hidden;
white-space: nowrap;
}
.intro1 {
animation: showup 7s ;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
color: fuchsia;
}
.intro2 {
width: 0px;
animation: reveal 7s infinite;
}
.inactive {
display: none;
}
.sub-head {
margin-left: -355px;
animation: slidein 7s infinite;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: .4;
}
80% {
opacity: .8;
}
100% {
opacity: 1;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 655px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 655px;
}
}
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> We care about you</span>
<span class="sub-head inactive"> We chose mental health because it matters</span>
<!-- lol dramatic effect-->
</div>
</div>

How do I make JavaScript functions change CSS?

On a lot of projects I have been making, I always had a problem that I wanted to make JavaScript change CSS styles. I tried reading other questions but it did not solve my answer. If a variable is above a certain number's value, like for example:
var points = 0;
if (points >= 50) {
(make an image appear or show)
}
how would I then make an image appear? I figured out it might work if the image display is set to none in CSS, but how would I change that?
var points = 0;
function add() {
points += 1;
score.innerHTML = points;
if (points == 10) {
score.innerHTML = "10";
LV.innerHTML = 2;
}
if (points >= 30) {
LV.innerHTML = 3;
};
};
function reset() {
points -= 1;
score.innerHTML = points;
if (points <= 0) {
points = 0;
score.innerHTML = points;
};
}
#font-face {
font-family: "Determination Sans";
src: url("https://dl.dropboxusercontent.com/u/2552046/fonts/DeterminationSansWeb.woff") format('woff');
}
p {
line-height: 1px;
}
body {
text-align: center;
background: #000000;
z-index: 5;
font-family: determination sans;
color: white;
font-size: 30px;
}
#bootain {
transform: scale(1);
animation: butt 3s infinite;
}
p {
transform: scale(0.5);
animation: textPulse 5s infinite;
}
.click {
width: 70px;
transform: scale(1);
animation: pulse 5s infinite;
box-shadow: red 5px 5px;
}
.score {
color: white;
animation: enchant 5s infinite;
}
.reset {
animation: deactivatepulse 7s infinite;
transform: scale(1);
}
button {
color: white;
animation: deactivatepulse 5s infinite;
}
#keyframes enchant {
0% {
color: white;
}
20% {
color: #c4abff;
}
40% {
color: #d9d6ff;
}
60% {
color: #fae8ff;
}
100% {
color: white;
}
}
#keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
opacity: 1;
transform: translatey(0px);
}
50% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
opacity: 0.7;
transform: translatey(20px);
}
100% {
transform: scale(0.8);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
opacity: 1;
transform: translatey(0);
}
}
#keyframes textPulse {
0% {
transform: scale(0.50);
opacity: 1;
}
50% {
transform: scale(0.55);
opacity: 0.9;
}
100% {
transform: scale(0.50);
opacity: 1;
}
}
#keyframes butt {
0% {
color: black;
box-shadow: 0 2 4 white;
}
20% {
color: #4d4d4d;
}
40% {
color: black;
}
60% {
color: #687d7b;
}
100% {
color: black;
}
}
#keyframes deactivatepulse {
0% {
color: black;
}
20% {
color: #a10000;
}
50% {
color: #ff4d00;
}
56% {
color: black;
}
70% {
color: #ff4d00;
}
90% {
color: #bfac3b;
}
100% {
color: black;
}
}
#keyframes buttonhover1 {
0% {
color: black;
}
20% {
color: #82fffd;
}
50%
}
<h8 class="soulintro">THIS IS YOUR SOUL.</h8>
<br>
<img src="https://i.ibb.co/QmRsxNK/Sowl.png" class="click" style="width: 100px"></img>
<br>
<p id="LV">LV: 1</p>
<p id="score">SOUL power (XP): 0</p>
<button id="bootain" onclick="add();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Increase power level</button>
<button id="reset" onclick="reset();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Decrease power level</button>
<h7 class="characters"></h7>

Call function when add and reset function call.
function showHideImage() {
if(points >= 50 ){
image.style.display = "block";
} else {
image.style.display = "none";
}
}
var points = 0;
const image = document.querySelector("img");
function showHideImage() {
if(points >= 50 ){
image.style.display = "block";
} else {
image.style.display = "none";
}
}
function add() {
points += 1;
score.innerHTML = points;
if (points == 10) {
score.innerHTML = "10";
LV.innerHTML = 2;
}
if (points >= 30) {
LV.innerHTML = 3;
};
showHideImage();
};
function reset() {
points -= 1;
score.innerHTML = points;
if (points <= 0) {
points = 0;
score.innerHTML = points;
};
showHideImage();
}
#font-face {
font-family: "Determination Sans";
src: url("https://dl.dropboxusercontent.com/u/2552046/fonts/DeterminationSansWeb.woff") format('woff');
}
.img-container{
display: flex;
justify-content: center;
align-items: center;
}
img{
display: none;
}
p {
line-height: 1px;
}
body {
text-align: center;
background: #000000;
z-index: 5;
font-family: determination sans;
color: white;
font-size: 30px;
}
#bootain {
transform: scale(1);
animation: butt 3s infinite;
}
p {
transform: scale(0.5);
animation: textPulse 5s infinite;
}
.click {
width: 70px;
transform: scale(1);
animation: pulse 5s infinite;
box-shadow: red 5px 5px;
}
.score {
color: white;
animation: enchant 5s infinite;
}
.reset {
animation: deactivatepulse 7s infinite;
transform: scale(1);
}
button {
color: white;
animation: deactivatepulse 5s infinite;
}
#keyframes enchant {
0% {
color: white;
}
20% {
color: #c4abff;
}
40% {
color: #d9d6ff;
}
60% {
color: #fae8ff;
}
100% {
color: white;
}
}
#keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
opacity: 1;
transform: translatey(0px);
}
50% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
opacity: 0.7;
transform: translatey(20px);
}
100% {
transform: scale(0.8);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
opacity: 1;
transform: translatey(0);
}
}
#keyframes textPulse {
0% {
transform: scale(0.50);
opacity: 1;
}
50% {
transform: scale(0.55);
opacity: 0.9;
}
100% {
transform: scale(0.50);
opacity: 1;
}
}
#keyframes butt {
0% {
color: black;
box-shadow: 0 2 4 white;
}
20% {
color: #4d4d4d;
}
40% {
color: black;
}
60% {
color: #687d7b;
}
100% {
color: black;
}
}
#keyframes deactivatepulse {
0% {
color: black;
}
20% {
color: #a10000;
}
50% {
color: #ff4d00;
}
56% {
color: black;
}
70% {
color: #ff4d00;
}
90% {
color: #bfac3b;
}
100% {
color: black;
}
}
#keyframes buttonhover1 {
0% {
color: black;
}
20% {
color: #82fffd;
}
50%
}
<h8 class="soulintro">THIS IS YOUR SOUL.</h8>
<br>
<div class="img-container">
<img src="https://i.ibb.co/QmRsxNK/Sowl.png" class="click" style="width: 100px"></img>
</div>
<br>
<p id="LV">LV: 1</p>
<p id="score">SOUL power (XP): 0</p>
<button id="bootain" onclick="add();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Increase power level</button>
<button id="reset" onclick="reset();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Decrease power level</button>
<h7 class="characters"></h7>

You could do this:
var points = 0;
const img = document.getElementById("image")
if (points >= 50) {
img.style.display = "block"
} else {
img.style.display = "none";
}
JavaScript changes the inline styles of HTML elements, by adding the style attribute to the element. But if you don't want to use inline styles, then you could write to the <style> tag.
First, create a style tag in the head tag and then write
var styleEl = document.querySelector("style");
var points = 0;
styleEl.innerHTML = `img { display: ${points >= 50 ? 'block' : 'none' };}`
Also see: W3Schools's tutorial for JavaScript DOM CSS

I think I got it now!
The simplest way is by changing CSS, which can be done through:
document.getElementById("img").style.display="inline-block";

Rather than using inline events and styles the markup should be kept as clean as possible by using both Javascript & CSS externally as much as possible. You can, ( easier with a minor tweak to the HTML ), use a single event listener to perform the increase/decrease of points necessary to display the image. The image will only display if the src attribute is present so by modifying that image to use a dataset attribute for the source, data-src you can programmatically toggle the src attribute quite easily. The code below uses incrementer variable to speed testing- presumably this will be 1 for final version but set here at 10
let points=0;
let incrementer=1;
const lv=document.getElementById('LV');
const sp=document.getElementById('score');
const img=document.querySelector('img.click[data-src]');
document.querySelectorAll('button[data-task]').forEach(btn=>{
btn.addEventListener('click',function(e){
switch( this.dataset.task ){
case 'increase':
points+=incrementer;
break;
case 'decrease':
points-=incrementer;
break;
}
let level=lv.textContent;
if( points >= 50 ){
if( !img.hasAttribute('src') )img.src=img.dataset.src;
}else{
if( img.hasAttribute('src') )img.removeAttribute('src');
}
if( points > 0 && points % 10==0 && points < 40 )level=points/10;
sp.textContent=points;
lv.textContent=level;
});
})
#font-face {
font-family: "Determination Sans";
src: url("https://dl.dropboxusercontent.com/u/2552046/fonts/DeterminationSansWeb.woff") format('woff');
}
p {
line-height: 1px;
}
body {
text-align: center;
background: #000000;
z-index: 5;
font-family: determination sans;
color: white;
font-size: 30px;
}
#bootain {
transform: scale(1);
animation: butt 3s infinite;
}
p {
transform: scale(0.5);
animation: textPulse 5s infinite;
}
.click {
width: 70px;
transform: scale(1);
animation: pulse 5s infinite;
box-shadow: red 5px 5px;
}
.score {
color: white;
animation: enchant 5s infinite;
}
.reset {
animation: deactivatepulse 7s infinite;
transform: scale(1);
}
button {
color: white;
animation: deactivatepulse 5s infinite;
}
#keyframes enchant {
0% {
color: white;
}
20% {
color: #c4abff;
}
40% {
color: #d9d6ff;
}
60% {
color: #fae8ff;
}
100% {
color: white;
}
}
#keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
opacity: 1;
transform: translatey(0px);
}
50% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
opacity: 0.7;
transform: translatey(20px);
}
100% {
transform: scale(0.8);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
opacity: 1;
transform: translatey(0);
}
}
#keyframes textPulse {
0% {
transform: scale(0.50);
opacity: 1;
}
50% {
transform: scale(0.55);
opacity: 0.9;
}
100% {
transform: scale(0.50);
opacity: 1;
}
}
#keyframes butt {
0% {
color: black;
box-shadow: 0 2 4 white;
}
20% {
color: #4d4d4d;
}
40% {
color: black;
}
60% {
color: #687d7b;
}
100% {
color: black;
}
}
#keyframes deactivatepulse {
0% {
color: black;
}
20% {
color: #a10000;
}
50% {
color: #ff4d00;
}
56% {
color: black;
}
70% {
color: #ff4d00;
}
90% {
color: #bfac3b;
}
100% {
color: black;
}
}
#keyframes buttonhover1 {
0% {
color: black;
}
20% {
color: #82fffd;
}
50%
}
button{width: 80px; height: 30px; font-family: determination sans; font-size: 11px;cursor:pointer}
[data-text]:before{content:attr(data-text)}
<h8 class="soulintro">THIS IS YOUR SOUL.</h8>
<img data-src='https://i.ibb.co/QmRsxNK/Sowl.png' class="click" alt='Heart animation' />
<p id='LV' data-text='LV:'>1</p>
<p id="score" data-text='SOUL power (XP):'>0</p>
<button id="bootain" data-task='increase'>Increase power level</button>
<button id="reset" data-task='decrease'>Decrease power level</button>
<h7 class="characters"></h7>

Upload the picture in the image file and put the right path for it in code
var points = 0;
if (points >= 50) {
var img = document.createElement("img");
img.src = "1.png";
var src = document.getElementById("x");
src.appendChild(img);
}

How to do animation close as same as open

while click on (?), have opened options with animation effect. Animation is working fine. Want to close the options same as open animation which is options bubble effect, but close animation effect is not same like as open animation. Need closing animation is also same as bubble effect.
Can anyone help me to find the mistake what i did. Thanks.
jQuery(document).ready(function() {
var $body = jQuery('body');
var $cs_fixed_wrapper = jQuery('.cs_fixed_wrapper');
// customer service icon click - ex. (?) click
jQuery('img.cs_trigger_icon').on('click', function(ev) {
ev.stopPropagation();
if(jQuery('.cs_options').hasClass('slide_open')) {
jQuery('.cs_options').removeClass('slide_open').addClass('slide_close');
}
else {
jQuery('.cs_options').removeClass('slide_close').addClass('slide_open');
}
});
var clickEvent = {};
// cs options - trigger functionalities
$body.on('click', '.cs_action_trigger', function(ev) {
ev.stopPropagation();
var window_width = jQuery(window).width();
var data_type = jQuery(this).data('type');
if(window_width < 800) {
if(!clickEvent[data_type]) {
clickEvent = {};
clickEvent[data_type] = 1;
if(data_type == 'contact') {
jQuery('.cs_contact').addClass('cs_contact_opened');
}
else if(data_type == 'supportarticle') {
jQuery('.cs_supportarticle').addClass("cs_supportarticle_opened");
return false;
}
else if(data-type == 'cs_faq') {
jQuery('.cs_faq').addClass("cs_faq_opened");
}
} else if (clickEvent[data_type]) {
clickEvent = {};
clickEvent[data_type] = 1;
if(data_type == 'contact') {
jQuery('.cs_contact_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
else if(data_type == 'tutorial') {
jQuery('.cs_tutorial_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
else if(data_type == 'supportarticle') {
clickEvent = {};
}
else if(data_type == 'cs_faq') {
jQuery('.cs_faq_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
}
} else {
if(data_type == 'contact') {
jQuery('.cs_contact_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.cs_contact_modal .close_btn').fadeIn();
}
else if(data_type == 'supportarticle') {
// console.log(data_type);
}
else if(data_type == 'cs_faq') {
jQuery('.cs_faq_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.cs_faq_modal .close_btn').fadeIn();
}
}
});
// customer service - contact form popup outside close for desktop
jQuery('.cs_contact_modal').on('click', function(ev) {
jQuery(this).removeClass('opened');
$body.removeClass('cs_popup_opened');
// show close icon on multiple popups
show_close_icon();
// body scroll based on condition
body_scroll_for_custom_pages();
contact_form_cf7_empty();
});
jQuery('.cs_contact_modal .modal_profile_wrapper').on('click', function(ev) {
ev.stopPropagation();
});
// customer service - contact form popup close for desktop
jQuery('.cs_contact_modal_close').on('click', function(ev) {
jQuery('.cs_contact_modal').removeClass('opened');
$body.removeClass('cs_popup_opened');
// show close icon on multiple popups
show_close_icon();
// body scroll based on condition
body_scroll_for_custom_pages();
jQuery('.cs_contact').removeClass('cs_contact_opened');
contact_form_cf7_empty();
});
// outside click to close the customer service slide options
jQuery('body').on('click', function() {
jQuery('.cs_options').removeClass('slide_open').addClass('slide_close');
});
});
* {
margin: 0;
padding: 0px;
box-sizing: border-box;
}
body{
background-color: #f7f7f7;
}
.cs_fixed_wrapper {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999999;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
visibility: visible;
opacity: 1;
}
.cs_inner_wrapper {
position: relative;
display: flex;
flex-flow: column-reverse;
align-items: flex-end;
}
.cs_action_trigger.cs_contact_opened {
width: 144px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_contact_opened {
transition: all 0.5s;
}
.slide_open .cs_action_trigger.cs_contact_closed {
transition: all 0.5s;
}
.cs_supportarticle {
margin-bottom: 0px;
border-radius: 30px;
}
.cs_action_trigger.cs_supportarticle_opened {
width: 188px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_supportarticle_opened,
.slide_open .cs_action_trigger.cs_supportarticle_closed {
transition: all 0.5s;
}
.cs_faq {
margin-top: 0px;
}
.slide_open .cs_action_trigger.cs_faq_opened {
width: 102px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_faq_opened,
.slide_open .cs_action_trigger.cs_faq_closed {
transition: all 0.5s;
}
.cs_support_wrapper > img {
position: absolute;
bottom: 0px;
right: 0px;
cursor: pointer;
}
.cs_options {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
position: relative;
bottom: 50px;
opacity: 0;
transition: all .7s;
}
.cs_options.slide_open {
opacity: 1;
transition: transform .2s;
}
.cs_options.slide_close {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: transform 0.4s, visibility .4s, opacity .6s;
}
.cs_contact_icon img,
.cs_supportarticle_icon img,
.cs_faq img {
display: inline-block;
position: relative;
transition: all 0.3s ease-in-out;
}
.cs_supportarticle_opened .cs_supportarticle_icon img {
left: -59px;
}
.cs_contact_opened .cs_contact_icon img {
left: -40px;
}
.cs_faq_opened .cs_faq_icon img {
left: -18px;
}
.slide_open .cs_action_trigger .circle {
animation: bubble .7s 0.5;
}
.slide_close .cs_action_trigger .circle {
transition: all 1s;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 30px;
}
.cs_faq .circle {
background: #ff422d;
}
.cs_supportarticle .circle {
background: #00b44a;
}
.cs_contact .circle {
background: #00387c;
}
.cs_action_trigger {
display: block;
padding: 10px;
width: 50px;
height: 50px;
line-height: normal;
font-size: 0;
border-radius: 100%;
margin: 0 0 10px 0;
transform: scale(.5);
transition: transform .5s, top 0.4s;
position: relative;
pointer-events: none;
cursor: pointer;
white-space: nowrap;
}
.cs_action_trigger:nth-child(1) {
top: 60px;
}
.cs_action_trigger:nth-child(2) {
top: 120px;
}
.cs_action_trigger:nth-child(3) {
top: 180px;
}
.slide_open .cs_action_trigger {
transform: scale(1);
top: 0px;
transition: transform .5s, top .3s;
pointer-events: all;
}
.cs_action_trigger img {
width: 28px;
position: relative;
transition: left 0.3s;
}
.cs_contact img {
top: 6px;
left: 0px;
}
.cs_supportarticle img {
top: 7px;
left: 0px;
}
.cs_faq img {
top: 4px;
left: 0px;
}
#keyframes bubble{
0% {transform: scale(0,0) translateY(0); }
10% { transform: scale(0.5,0.5) translateY(0); }
30% { transform: scale(1.1,1.1) translateY(-20px); }
50% { transform: scale(1.05,1.05) translateY(0); }
57% { transform: scale(1,1) translateY(-7px); }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cs_fixed_wrapper">
<div class="cs_inner_wrapper">
<div class="cs_support_wrapper">
<div class="cs_options slide_close">
<div class="cs_contact cs_action_trigger" data-link="cs_contact_popup" data-type='contact'>
<span class="circle"></span>
<img src="https://i.stack.imgur.com/WusFO.png" alt="C"/>
<span class="cs_content cs_link_content">Contact Us</span>
</div>
<div class="cs_supportarticle cs_action_trigger" data-type='supportarticle'>
<a href="">
<span class="circle"></span>
<img src="https://i.stack.imgur.com/UzkHq.png" alt="S"/>
<span class="cs_content cs_link_content">Support Articles</span>
</a>
</div>
<div class="cs_faq cs_action_trigger" data-link="cs_faq_popup" data-type='cs_faq'>
<span class="circle"></span>
<img src="https://i.stack.imgur.com/VEzHb.png" alt="F"/>
<span class="cs_content cs_link_content">FAQ</span>
</div>
</div>
<img class="cs_trigger_icon" src="https://i.stack.imgur.com/sNQUZ.png" alt="C"/>
</div>
</div>
</div>

Create another set of keyframes say 'unbubble' and do the exact opposite transitions.
#keyframes unbubble{
0% {transform: scale(1,1) translateY(-10px); }
30% { transform: scale(1.1,1.1) translateY(-15px); }
50% { transform: scale(1.05,1.05) translateY(-15px); }
57% { transform: scale(1,1) translateY(-10px); }
64% { transform: scale(0.5,0.5) translateY(0); }
100% { transform: scale(0,0) translateY(0); }
}
and apply this animation in slide_close
.slide_close .cs_action_trigger {
animation: unbubble .7s 0.5;
}
let me know if this works

jQuery timed animation on click

I'm trying to get the checkmark loading animation to happen only when the .closest() .yay button is clicked. I found the animation but can't work it into my function where it only runs on click and for more than one instance.
https://codepen.io/moofawsaw/pen/Qrxbxj
(function() {
$(document).ready(function() {
return $(".delete-confirm").each(function() {
var $this;
$this = $(this);
$("button.delete", $this).click(function() {
$(this).toggleClass("confirm");
});
return $("button.yay, button.nay", $this).click(function() {
return $("button.delete", $this).removeClass("confirm");
});
});
});
}.call(this));
$(".yay").click(function() {
ele = this;
setTimeout(function() {
$(ele)
.closest(".post")
.remove();
}, 1500);
});
const yay = document.querySelector(".yay");
const submit = document.querySelector(".submit");
function toggleClass() {
this.classList.toggle("active");
}
function addClass() {
this.classList.add("finished");
}
yay.addEventListener("click", toggleClass);
yay.addEventListener("transitionend", toggleClass);
body {
display: flex;
}
.post {
border: 2px solid;
margin: 15%;
}
.delete-confirm {
border: 2px solid;
position: relative;
display: inline-block;
}
.delete-confirm button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
height: 25px;
width: 25px;
min-width: 25px;
text-align: center;
cursor: pointer;
background-color: #e90000;
color: white;
border: none;
border-radius: 50%;
}
.delete-confirm button.delete {
z-index: 3;
transition: all 0.2s ease 0.1s;
}
.delete-confirm button.delete.confirm {
background-color: transparent;
color: #262a2c;
transition: all 0.2s ease 0.2s;
z-index: 0;
}
.delete-confirm button.delete.confirm~button.yay,
.delete-confirm button.delete.confirm~button.nay {
visibility: visible;
color: white;
transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s;
}
.delete-confirm button.delete.confirm~button.yay {
-webkit-transform: translate(0, -250%);
transform: translate(0, -250%);
background-color: #6fbd1b;
}
.delete-confirm button.delete.confirm~button.nay {
-webkit-transform: translate(0, -130%);
transform: translate(0, -130%);
background-color: #e90000;
}
.delete-confirm button.yay,
.delete-confirm button.nay {
position: absolute;
top: 0;
color: #262a2c;
visibility: hidden;
z-index: 1;
transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease;
}
.delete-confirm button.yay:focus {
transition-delay: 2s;
}
.delete-confirm button.yay {
left: 0;
}
.delete-confirm button.nay {
right: 0;
}
.delete-confirm button:focus {
outline: none;
}
.yay:before {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 0%;
height: 100%;
}
.yay span {
position: absolute;
line-height: 0;
}
.yay span i {
transform-origin: center center;
}
.yay span:nth-of-type(1) {
top: 50%;
transform: translateY(-50%);
}
.yay span:nth-of-type(2) {
top: 100%;
transform: translateY(0%);
}
.active:before {
width: 100%;
transition: width 500ms linear;
}
.active span:nth-of-type(1) {
top: -100%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
animation: loading 500ms linear infinite;
}
#keyframes loading {
100% {
transform: rotate(360deg);
}
}
#keyframes scale {
0% {
transform: scale(10);
}
50% {
transform: scale(0.2);
}
70% {
transform: scale(1.2);
}
90% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Post1
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>
<div class="post">Post2
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>

This is because document.querySelector returns only one element.
You could use document.querySelectorAll but I'm not sure how to bind events then.
Simple solution is to use jQuery since you're using it anyway.
...
const yay = $(".yay");
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);
(function() {
$(document).ready(function() {
return $(".delete-confirm").each(function() {
var $this;
$this = $(this);
$("button.delete", $this).click(function() {
$(this).toggleClass("confirm");
});
return $("button.yay, button.nay", $this).click(function() {
return $("button.delete", $this).removeClass("confirm");
});
});
});
}.call(this));
$(".yay").click(function() {
ele = this;
setTimeout(function() {
$(ele)
.closest(".post")
.remove();
}, 1500);
});
const yay = $(".yay");
const submit = document.querySelector(".submit");
function toggleClass() {
this.classList.toggle("active");
}
function addClass() {
this.classList.add("finished");
}
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);
body {
display: flex;
}
.post {
border: 2px solid;
margin: 15%;
}
.delete-confirm {
border: 2px solid;
position: relative;
display: inline-block;
}
.delete-confirm button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
height: 25px;
width: 25px;
min-width: 25px;
text-align: center;
cursor: pointer;
background-color: #e90000;
color: white;
border: none;
border-radius: 50%;
}
.delete-confirm button.delete {
z-index: 3;
transition: all 0.2s ease 0.1s;
}
.delete-confirm button.delete.confirm {
background-color: transparent;
color: #262a2c;
transition: all 0.2s ease 0.2s;
z-index: 0;
}
.delete-confirm button.delete.confirm~button.yay,
.delete-confirm button.delete.confirm~button.nay {
visibility: visible;
color: white;
transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s;
}
.delete-confirm button.delete.confirm~button.yay {
-webkit-transform: translate(0, -250%);
transform: translate(0, -250%);
background-color: #6fbd1b;
}
.delete-confirm button.delete.confirm~button.nay {
-webkit-transform: translate(0, -130%);
transform: translate(0, -130%);
background-color: #e90000;
}
.delete-confirm button.yay,
.delete-confirm button.nay {
position: absolute;
top: 0;
color: #262a2c;
visibility: hidden;
z-index: 1;
transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease;
}
.delete-confirm button.yay:focus {
transition-delay: 2s;
}
.delete-confirm button.yay {
left: 0;
}
.delete-confirm button.nay {
right: 0;
}
.delete-confirm button:focus {
outline: none;
}
.yay:before {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 0%;
height: 100%;
}
.yay span {
position: absolute;
line-height: 0;
}
.yay span i {
transform-origin: center center;
}
.yay span:nth-of-type(1) {
top: 50%;
transform: translateY(-50%);
}
.yay span:nth-of-type(2) {
top: 100%;
transform: translateY(0%);
}
.active:before {
width: 100%;
transition: width 500ms linear;
}
.active span:nth-of-type(1) {
top: -100%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
animation: loading 500ms linear infinite;
}
#keyframes loading {
100% {
transform: rotate(360deg);
}
}
#keyframes scale {
0% {
transform: scale(10);
}
50% {
transform: scale(0.2);
}
70% {
transform: scale(1.2);
}
90% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Post1
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>
<div class="post">Post2
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to test css color in javascript - javascript

for checking class you have to use .hasClass('your class name') or if you want to check background color if($(this).css('background') == "red") $('button').on('click', function(){ $(this).toggleClass('faved'); if ($(this).hasClass('faved')) { alert("red"); } else { alert("empty"); } });

Related

Why my code work fine on chrome but not firefox?

How do I make another text display after the first one appears in css?

How do I make JavaScript functions change CSS?

How to do animation close as same as open

jQuery timed animation on click

Categories

Resources