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
Related
This is my simple approach for a dropdown menu. When I click to open a menu, it opens with an amination. But I want to add another animation when It will be closed. I tried in many ways, But not working. Why? Somebody, please assist me. When It closes, it directly disappears. No animation is working. Why?
body {
padding: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-btn {
width: 40px;
height: 40px;
border-radius: 50px;
border: none;
background-color: #f4f4f4;
left: 10px;
font-size: 20px;
}
.dropdown-btn__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.dropdown-menu {
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
display: none;
min-width: 150px;
overflow: hidden;
transform-origin: top right;
animation: dropdown-menu-open 0.3s forwards;
}
.dropdown-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown-menu__list li {
padding: 0px;
}
.dropdown-menu__list a {
text-decoration: none;
color: #000;
font-size: 16px;
display: block;
padding: 8px 16px;
}
#keyframes dropdown-menu-open {
from {
opacity: 0;
transform: scale(0, 0);
}
to {
opacity: 1;
transform: scale(1, 1);
}
}
.dropdown--open .dropdown-menu {
display: block;
}
.dropdown-menu__list {
opacity: 1;
transition: opacity 03s ease;
}
.dropdown-menu__list--hidden {
opacity: 0;
transition: opacity 03s ease;
}
#asma {
float: right! important;
}
<span id="asma">
<div class="dropdown">
<button class="dropdown-btn mi-ripple mi-ripple-dark">
<div class="dropdown-btn__icon"> ≡ </div>
</button>
<div class="dropdown-menu">
<ul class="dropdown-menu__list">
<li class="mi-ripple mi-ripple-dark">Home</li>
<li class="mi-ripple mi-ripple-dark">Dropdown</li>
<li class="mi-ripple mi-ripple-dark">Createanewbjsbsjshsbsticket</li>
</ul>
</div>
</div>
</span>
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
if ($('.dropdown').hasClass('dropdown--open')) {
$('.dropdown-menu').stop(true, true).fadeIn(300);
} else {
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).removeClass('dropdown-menu__list--hidden');
});
}
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).addClass('dropdown-menu__list--hidden');
});
}
});
});
The jquery fadeOut effect not working. What I can do now? How to add it?
You don't actually need to use fadeIn and fadeOut, or even CSS animation at all. Instead, you can achieve the same effect using CSS transition.
Updated script:
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
}
});
});
Updated styles:
.dropdown-menu {
transition: all 0.3s ease-in-out; <--- here is the trick
transform: scale(0); <---
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
min-width: 150px;
overflow: hidden;
transform-origin: top right;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1); <---
}
See https://jsfiddle.net/cheack/kd92r8g0/42/
Update: If you want to apply a different transition when closing, simply add another transition and add a delay to the first one.
.dropdown-menu {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; <--- last 0.3s is a delay for a scaling (to fade out first, then scale down)
transform: scale(0);
opacity: 0;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1);
opacity: 1;
transition: transform 0.3s ease-in-out;
}
I have three DIVs that complete the screen in a mobile device. Whenever these are clicked, the DIV resizes to fill up the screen and then the information appears.
It is all working as it should when I click it the first time. But after some other clicks, when the DIV starts to resize to fill up the screen or to go back to the original state, it grows behind another DIV until it suddenly pops-up in front of that DIV and continues on.
Also, I try to change the SPAN which is the Subtitle (class='sTitle') from position Absolute to Fixed. If I have it in Fixed since the beginning, the movement is not soft as if it is Absolute. But, I need it fixed because my scroll changes to horizontal when the DIV is enlarged. I have it commented in the JS code because it changes the style right away and there is no difference as if I just have its position in Fixed style from the beginning.
Thank you for your time. I'm starting to learn how to build websites as you may be able to see.
There is the code:
const thirdOne = document.querySelector('.thirdOne'),
thirdOneSpan = document.querySelector('.thirdOneSpan'),
txt1 = document.querySelector('.oneTxt1'),
txt2 = document.querySelector('.oneTxt2'),
txt3 = document.querySelector('.oneTxt3'),
txt4 = document.querySelector('.oneTxt4'),
txt5 = document.querySelector('.oneTxt5'),
txt6 = document.querySelector('.oneTxt6'),
txt7 = document.querySelector('.oneTxt7'),
txt8 = document.querySelector('.oneTxt8'),
txt9 = document.querySelector('.oneTxt9'),
img1 = document.querySelector('.oneImg1'),
img2 = document.querySelector('.oneImg2');
const thirdTwo = document.querySelector('.thirdTwo'),
thirdTwoSpan = document.querySelector('.thirdTwoSpan'),
txt21 = document.querySelector('.twoTxt1'),
txt22 = document.querySelector('.twoTxt2'),
txt23 = document.querySelector('.twoTxt3'),
txt24 = document.querySelector('.twoTxt4'),
txt25 = document.querySelector('.twoTxt5'),
txt26 = document.querySelector('.twoTxt6'),
txt27 = document.querySelector('.twoTxt7'),
txt28 = document.querySelector('.twoTxt8'),
txt29 = document.querySelector('.twoTxt9'),
img21 = document.querySelector('.twoImg1'),
img22 = document.querySelector('.twoImg2');
const thirdThree = document.querySelector('.thirdThree'),
thirdThreeSpan = document.querySelector('.thirdThreeSpan'),
txt31 = document.querySelector('.threeTxt1'),
txt32 = document.querySelector('.threeTxt2'),
txt33 = document.querySelector('.threeTxt3'),
txt34 = document.querySelector('.threeTxt4'),
txt35 = document.querySelector('.threeTxt5'),
txt36 = document.querySelector('.threeTxt6'),
txt37 = document.querySelector('.threeTxt7'),
txt38 = document.querySelector('.threeTxt8'),
txt39 = document.querySelector('.threeTxt9'),
img31 = document.querySelector('.threeImg1'),
img32 = document.querySelector('.threeImg2');
let clicked = 0;
let thirdOneSel = () => {
thirdOne.scrollLeft = 0;
thirdOne.classList.toggle('fullscreen');
thirdOne.classList.toggle('bgBlue');
thirdOne.classList.toggle('scrollable');
thirdOneSpan.classList.toggle('topCenter');
thirdOneSpan.classList.toggle('textTitle');
txt1.classList.toggle('txtLeft');
txt2.classList.toggle('txtRight');
txt3.classList.toggle('txtLeft');
txt4.classList.toggle('txtRight');
txt5.classList.toggle('txtLeft');
txt6.classList.toggle('txtRight');
txt7.classList.toggle('txtLeft');
txt8.classList.toggle('txtRight');
img1.classList.toggle('hide');
img1.classList.toggle('snap');
img2.classList.toggle('hide');
img2.classList.toggle('snap');
if (clicked === 0) {
thirdOne.style.zIndex = 1;
// thirdOneSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdOne.style.zIndex = 0;
// thirdOneSpan.style.position = 'absolute';
clicked = 0;
}
};
let thirdTwoSel = () => {
if (clicked === 0) {
thirdTwo.style.zIndex = 1;
clicked = 1;
} else {
thirdTwo.style.zIndex = 0;
clicked = 0;
}
thirdTwo.scrollLeft = 0;
thirdTwo.classList.toggle('fullscreen');
thirdTwo.classList.toggle('bgGreen');
thirdTwo.classList.toggle('scrollable');
thirdTwoSpan.classList.toggle('topCenter');
thirdTwoSpan.classList.toggle('textTitle');
txt21.classList.toggle('txtLeft');
txt22.classList.toggle('txtRight');
txt23.classList.toggle('txtLeft');
txt24.classList.toggle('txtRight');
txt25.classList.toggle('txtLeft');
txt26.classList.toggle('txtRight');
txt27.classList.toggle('txtLeft');
txt28.classList.toggle('txtRight');
img21.classList.toggle('hide');
img21.classList.toggle('snap');
img22.classList.toggle('hide');
img22.classList.toggle('snap');
};
let thirdThreeSel = () => {
thirdThree.scrollLeft = 0;
thirdThree.classList.toggle('fullscreen');
thirdThree.classList.toggle('bgBlue');
thirdThree.classList.toggle('scrollable');
thirdThreeSpan.classList.toggle('topCenter');
thirdThreeSpan.classList.toggle('textTitle');
txt31.classList.toggle('txtLeft');
txt32.classList.toggle('txtRight');
txt33.classList.toggle('txtLeft');
txt34.classList.toggle('txtRight');
txt35.classList.toggle('txtLeft');
txt36.classList.toggle('txtRight');
txt37.classList.toggle('txtLeft');
txt38.classList.toggle('txtRight');
img31.classList.toggle('hide');
img31.classList.toggle('snap');
img32.classList.toggle('hide');
img32.classList.toggle('snap');
if (clicked === 0) {
thirdThree.style.zIndex = 1;
// thirdThreeSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdThree.style.zIndex = 0;
// thirdThreeSpan.style.position = 'absolute';
clicked = 0;
}
};
thirdOne.addEventListener('click', () => {
thirdOneSel();
});
thirdTwo.addEventListener('click', () => {
thirdTwoSel();
});
thirdThree.addEventListener('click', () => {
thirdThreeSel();
});
.third {
position: relative;
height: 100vh;
display: block;
color: #000;
}
.third h1 {
position: absolute;
top: 2.2vh;
left: 50%;
font-size: 3.5vh;
letter-spacing: 2vw;
transform: translate(-50%, 0);
}
.third span {
position: absolute;
left: 50%;
top: 30%;
font-size: 2rem;
font-weight: 700;
letter-spacing: 4px;
color: rgba(255, 255, 255, 1);
transform: translateX(-50%);
text-align: center;
transition: all 1s;
}
.thirdOne {
position: absolute;
top: 8vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg.jpg');
background-color: rgb(78, 199, 255);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdOne p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2vh;
text-align: left;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.oneTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.oneTxt2 {
top: 18%;
transition: all 1s 0.8s;
}
.oneTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.oneTxt4 {
top: 62%;
transition: all 1s 1s;
}
.oneTxt5 {
top: 68%;
transition: all 1s 1.2s;
}
.oneTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.oneTxt7 {
top: 78%;
transition: all 1s 1.6s;
}
.oneTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
text-align: center !important;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
#keyframes scrollAnim2 {
0% {
transform: rotateX(0deg) rotate(225deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateX(360deg) rotate(225deg) translate(-30px, 30px);
opacity: 0;
}
}
.oneImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 24vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.oneImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.oneTxt9 {
left: 150% !important;
top: 10%;
}
.thirdTwo {
position: absolute;
top: 39vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg2.jpg');
background-color: rgb(46, 136, 186);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdTwo p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.twoTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.twoTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.twoTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.twoTxt4 {
top: 63%;
transition: all 1s 1s;
}
.twoTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.twoTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.twoTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.twoTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
#scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.twoImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.twoImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.twoTxt9 {
left: 150% !important;
top: 10%;
}
.thirdThree {
position: absolute;
top: 70vh;
height: 30vh;
width: 100%;
border: 1px solid #fff;
background: 90% / cover no-repeat url('./bg3.jpg');
background-color: rgb(66, 112, 176);
transition: all 1.4s 0.5s;
}
.thirdThree p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.threeTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.threeTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.threeTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.threeTxt4 {
top: 63%;
transition: all 1s 1s;
}
.threeTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.threeTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.threeTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.threeTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.threeImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.threeImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.threeTxt9 {
left: 150% !important;
top: 10%;
}
.fullscreen {
height: 100vh !important;
top: 0 !important;
transition: all 2s;
}
.topCenter {
top: 1vh !important;
/* position: fixed !important; */
/* left: 50% !important;
transform: translateX(-50%) !important; */
transition: all 1s;
}
.topCenter2 {
top: 2.2vh !important;
transition: all 1s;
}
.textTitle {
font-size: 3vh !important;
/* transition: all 1s !important; */
}
.bgBlue {
background: rgb(68, 133, 253) !important;
}
.bgGreen {
background: rgb(24, 153, 33) !important;
}
.txtLeft {
left: -100% !important;
transition: all 0.5s !important;
}
.txtRight {
left: 200% !important;
transition: all 0.5s !important;
}
.scrollable {
overflow-x: scroll !important;
scroll-snap-type: x mandatory !important;
position: fixed !important;
}
.snap {
scroll-snap-align: start;
}
.hide {
opacity: 0 !important;
height: 0px !important;
transition: all 0.6s !important;
}
.container {
position: absolute;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
section {
position: relative;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
<div class="container">
<section class="third" id="3">
<h1 id="sTitle">TITLE</h1>
<div class="thirdOne">
<span class="thirdOneSpan">SUBTITLE</span>
<p class="oneTxt1 txtLeft">Text</p>
<p class="oneTxt2 txtRight">Text</p>
<img src="./vid.gif" class="oneImg1 hide">
<p class="oneTxt3 txtLeft">Text</p>
<p class="oneTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="oneImg2 hide">
<p class="oneTxt5 txtLeft">Text</p>
<p class="oneTxt6 txtRight">Text</p>
<p class="oneTxt7 txtLeft">Text</p>
<div class="scroll2">
<p class="oneTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="oneTxt9">Text</p>
</div>
<div class="thirdTwo">
<span class="thirdTwoSpan">SUBTITLE</span>
<p class="twoTxt1 txtLeft">Text</p>
<p class="twoTxt2 txtRight">Text</p>
<img src="./vid.gif" class="twoImg1 hide">
<p class="twoTxt3 txtLeft">Text</p>
<p class="twoTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="twoImg2 hide">
<p class="twoTxt5 txtLeft">Text</p>
<p class="twoTxt6 txtRight">Text</p>
<p class="twoTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="twoTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="twoTxt9">Text</p>
</div>
<div class="thirdThree">
<span class="thirdThreeSpan">SUBTITLE</span>
<p class="threeTxt1 txtLeft">Text</p>
<p class="threeTxt2 txtRight">Text</p>
<img src="./vid.gif" class="threeImg1 hide">
<p class="threeTxt3 txtLeft">Text</p>
<p class="threeTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="threeImg2 hide">
<p class="threeTxt5 txtLeft">Text</p>
<p class="threeTxt6 txtRight">Text</p>
<p class="threeTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="threeTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="threeTxt9">Text</p>
</div>
</section>
</div>
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");
}
});
This is my Preloader Code for my Website
<style>
#site {
opacity: 0;
-webkit-transition: all 2s ease;
transition: all 2s ease;
}
#preloader {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
#preloader:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: -1px;
height: 100%;
width: 100%;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
border: 0px solid white;
border-top: 1px solid transparent;
border-radius: 100%;
}
#preloader > .icon {
position: absolute;
/*top: 50%;
left: 50%;*/
height: 60px;
width: 60px;
/*margin-top: -12.5px;
margin-left: -5.3px;*/
-webkit-animation: 1s ease-in-out infinite alternate;
animation: 1s ease-in-out infinite alternate;
}
#media only screen and (min-width: 768px) {
#preloader {
height: 80px;
width: 80px;
margin-left: -30px;
}
#preloader:before {
left: -2px;
top: -2px;
border-top-width: 2px;
border-left-width: 2px;
border-bottom-width: 2px;
border-right-width: 2px;
}
#preloader > .icon {
height: 80px;
width: 80px;
/*margin-top: -18.75px;
margin-left: -7.95px;*/
}
}
#media only screen and (min-width: 1200px) {
#preloader {
height: 100px;
width: 100px;
margin-top: -40px;
margin-left: -40px;
}
#preloader > .icon {
height: 100px;
width: 100px;
/*margin-top: -25px;
margin-left: -10.6px;*/
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#-webkit-keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="URL OF GIF">
</div>
<main id="site" role="main"></main>
<script type="text/javascript">
(function(){
var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if(loading == 100){
clearInterval(id);
//window.open('welcome.html', '_self');
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
/*(function preloader() {
var preloader = document.getElementById("#preloader");
preloader.style.opacity = "0";
preloader.setAttribute("aria-busy", "false");
document.getElementById("#site").style.opacity = "1";
})
window.onload = preloader;*/
</script>
Right now I have a White Background, I would like the Background to be Pure Black. I have tried a few things but nothing seems to work.
I am loading the GIF from a URL.
I know that the color code for Black is #000000 and I have tried entering it instead of the opacity = 0; but nothing seems to work.
Any advice ?
Add this style
html {
height: 100%;
background-color: black;
}
html , body{ height: 100%;}
html {background-color: black;}
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>