I looked for a solution in the web, without success. I don’t understand why this code fires only once:
$("#d").click(function() {
var h = $(".cont");
var f = h.offset();
if (f.left < 1) {
h.addClass('anim');
} else {
h.addClass('anim2');
}
});
body{
margin: 0;
}
#d {
width: 50px;
height: 50px;
background: #999;
}
.cont {
width: 200px;
height: 200px;
opacity: 1;
background: #333;
position: absolute;
-webkit-transition: all 1s ease-in-out;
}
.anim {
-webkit-transform: translate(50px, 0px);
}
.anim2 {
-webkit-transform: translate(0px, 0px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d"></div>
<div class="cont"></div>
Here’s a JSFiddle demo.
What you need is this
$("#d").click( function() {
var h = $(".cont");
var f = h.offset();
if (f.left < 1) {
h.addClass('anim');
h.removeClass('anim2');
} else {
h.addClass('anim2');
h.removeClass('anim');
}
});
after the first click you never remove the classes so they still have effect
Related
I have three div boxes in a row, and on scroll, they should show slowly from the side, but when I scroll up slowly and a little after they show up, the left and right boxes for some reason stay on the page.
My function showBox3 writes in console "false" and classList where is "show" class, but this class shouldn't be there.
Actually, my code works when I scroll normally but when I stop scrolling slightly above the limit, the left and right boxes stay on page.
And one more problem is when "topBox" is a little below the limit, and I scroll up just a little more, but still below the limit, boxes quickly remove from the page and show up again.
const box21 = document.querySelector(".box21");
const box22 = document.querySelector(".box22");
const box23 = document.querySelector(".box23");
var trigger = window.innerHeight * 0.8;
window.addEventListener("scroll", showBox2);
function showBox2() {
var check;
const topBox = box22.getBoundingClientRect().top;
if (trigger > topBox) {
box22.classList.add("show");
check = true;
} else {
box22.classList.remove("show");
check = false;
}
showBox1(check);
showBox3(check);
}
function showBox1(ch) {
if (ch == true) {
setTimeout(() => {
box21.classList.add("show");
}, 400);
} else {
box21.classList.remove("show");
}
}
function showBox3(ch) {
if (ch == true) {
setTimeout(function () {
box23.classList.add("show");
}, 700);
} else {
box23.classList.remove("show");
console.log(box23.classList);
console.log(ch);
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box1 {
height: 110vh;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
}
/* I have a bug in box 2 */
.box2 {
height: 60vh;
width: 100%;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: space-around;
}
.box2>div {
height: 70%;
width: 27%;
background-color: black;
}
.box21 {
transform: translateX(-140%) rotate(-45deg);
transition: transform 1.4s ease;
}
.box21.show {
transform: translateX(0%) rotate(0deg);
}
.box22 {
transform: translateX(340%) rotate(+45deg);
transition: transform 0.8s ease;
}
.box22.show {
transform: translateX(0%) rotate(0deg);
}
.box23 {
transform: translateX(340%) rotate(-45deg);
transition: transform 1.8s ease;
}
.box23.show {
transform: translateX(0%) rotate(0deg);
}
/* this part below is not important */
.box3 {
height: 60vh;
width: 100%;
background-color: cornflowerblue;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div class="box1">
<h1>Scroll down</h1>
</div>
<div class="box2">
<div class="box21"></div>
<div class="box22"></div>
<div class="box23"></div>
</div>
<div class="box3"></div>
</body>
<script src="js.js"></script>
</html>
I tried to find a solution for this one but I can't. There s something that I keep missing... not sure what.
I have a project that when I click a image, the image will get an translate and also a text description.
The text description has a smooth transition and it looks cool.
Well, the question is.. how to make the reset(click on body or another image) to have the same transition for that text description?
This is how it look right now: https://im3.ezgif.com/tmp/ezgif-3-5150d8ffbf.gif
function resetEnlargeEntityImage() {
if(enlargedEntity != null) {
enlargedEntity.style.transform = null;
enlargedEntity.style.transition = null;
enlargedEntity.classList.add("planet-svg-hover");
document.getElementById("planets-description-paragraph").innerHTML = null;
document.getElementById("planets-description-paragraph").classList.add("entity-description-js");
document.getElementById("planets-description-paragraph").classList.remove("entity-description-appear-js");
}
}
function enlargeEntityImage(clickedImage, clickedImageId) {
let mediaQuery = window.matchMedia('(max-width: 375px)');
if(mediaQuery.matches) {
window.location.href = `./${planetsName[clickedImageId]}.html`;
} else {
resetEnlargeEntityImage();
var xToMove = 260 - 130 * clickedImageId; //260
clickedImage.style.transform = "translate(" + xToMove + "px, 320px) scale(4.0)";
clickedImage.style.transition = "transform 1s ease-in-out";
clickedImage.classList.remove("planet-svg-hover");
document.getElementById("planets-description-paragraph").innerHTML = descriptionSpaceObjects[clickedImageId];
document.getElementById("planets-description-paragraph").classList.remove("entity-description-js");
document.getElementById("planets-description-paragraph").classList.add("entity-description-appear-js");
enlargedEntity = clickedImage;
}
}
.planets-description {
color: white;
font-family: "Barlow";
font-size: 30px;
width: 600px;
position: relative;
top: 100px;
left: 700px;
}
.entity-description-js {
position: absolute;
transition-delay: 1s;
transition: 1s;
width: 600px;
left: 0;
visibility: hidden;
opacity: 0;
}
.entity-description-appear-js {
position: absolute;
transition: 1s;
width: 600px;
left: 100px;
visibility: visible;
opacity: 1;
}
<div class="planets-description">
<p id="planets-description-paragraph" class="entity-description-js"></p>
</div>
The Code you provided isnt showing anything, but maybe you could try uesing the "transition" property in css.
iam desiging a web site that can change the prices
when for first time i click on slider the price become 19.99 and for the next time my price become 199.99.
my project is this https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC
im using a variable if the variable ==1 then change the price to 199.99 and when the variable ==2 then change price to 19.99 ; but every time i click the price stays on 19.99:/
$(function(){
var m = 1;
$(".switch").click(function(){
if(m == 1){
alert("hi");
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
m = 0;
} else{
alert("bye");
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
m = 0;
}
});
});
when i click both hi and bye alerts ,alerted and i dont know why ???:///
the return statment in if block also doesn't the solution, i tried.
As far as I think price ain't defined.
$(".switch").click(function(){
if(document.getElementById('isAgeSelected').checked) {
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
} else {
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
}
});
$(document).ready(function(){
if(document.getElementById('isAgeSelected').checked) {
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
} else {
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="isAgeSelected" value="Yes">
<span class="slider"></span>
</label>
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
I HOPE THIS MIGHT SOLVE YOUR PROBLEM IN A EASY WAY
Considering your limited code, I tried recreating it:
Looks like you're not passing prices values correctly, the if and else conditions are correct, you can change the values in the first line and try checking it, I was able to run both the conditions. The issues seems you're not sending the correct values to prices.
var prices = 0; /* change to you values here from 0 to 1 */
$(document).ready(function() {
var m = 1;
$(".divSwitch").click(function() {
if (prices == 1) {
alert("hi");
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
m = 0;
} else {
alert("bye");
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
m = 0;
}
});
});
.divSwitch {
background-color: red;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divSwitch" sytle="height:50px;width:50px;background-color:red;">Click here.
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
</div>
I try to build a Slideshow in JS + CSS and it works pretty well except one visual glitch. The Transition to the last slides seems somehow broken.
But I couldn't figure out what the problem is. If I comment out the "offset" transition on the last slide, the error doesn't occure.
This is the codeine I am talking about: https://codepen.io/marianbreitmeyer/pen/paeYgZ
The Block of code I mentioned is this one:
const showNext = function() {
clicked = true;
for (i = 0; i <= slides.length-1; i++) {
if( parseInt(slides[i].style.zIndex) === slides.length) {
console.log(slides[i].innerHTML);
triggerAnimation(slides[i], 'offcanvas');
} else if (parseInt(slides[i].style.zIndex) === slides.length-1) {
//the line below triggers the problem
triggerAnimation(slides[i], 'offset');
}
}
};
Maybe someone with more experience could help me :)
Your code might be more simple:
const btn = document.getElementsByClassName('arrow')[0];
const slides = document.getElementsByClassName('slide');
slides[slides.length - 1].classList.add('offset', 'next');
btn.addEventListener("click", function(e) {
var o, n;
for (var i = 0; i < slides.length; i++) {
if (slides[i].classList.contains('offset')) {
slides[i].classList.remove('offset', 'next')
slides[i].classList.add('offcanvas');
o = (slides[i - 1] || slides[slides.length - 1]);
n = (slides[i - 2] || slides[slides.length + i - 2]);
}
if (slides[i].offsetLeft < -slides[i].offsetWidth) {
slides[i].classList.remove('offcanvas', 'next');
}
}
o.classList.add('offset');
n.classList.add('next');
}, false);
.container {
width: 100%;
height: 100vh;
background: brown;
position: relative;
}
body {
text-align: center;
font-size: 2rem;
}
.slide {
position: absolute;
top: 0;
left: 90%;
width: 100%;
height: 100%;
}
.slide:nth-child(1) {
background: pink;
}
.slide:nth-child(2) {
background: blue;
}
.slide:nth-child(3) {
background: green;
}
.slide:nth-child(4) {
background: grey;
}
.slide:nth-child(5) {
background: yellow;
}
.slide.next {z-index:1}
.slide.offset {
left: -10%;
z-index: 2;
transition: left .65s ease-in-out;
}
.slide.offcanvas {
left: -110%;
z-index: 2;
transition: left .65s ease-in-out;
}
.arrow {
position: absolute;
right: 5%;
top: 25px;
z-index: 9;
height: 50px;
width: 50px;
cursor: pointer;
}
.arrow:hover path {
transform: translate(16px, 0px);
}
path {
position: absolute;
top: 0;
left: 0;
transition: all .2s ease-in-out;
}
<div class="container">
<div class="slide">1 = pink</div>
<div class="slide">2 = blue</div>
<div class="slide">3 = green</div>
<div class="slide">4 = grey</div>
<div class="slide">5 = yellow</div>
<svg xmlns="http://www.w3.org/2000/svg" class="arrow"><path d="M19.443 5.17L30.138 15.5H-.095v1h30.233L19.443 26.829l.696.719L32.095 16 20.139 4.451z"/></svg>
</div>
I'm creating a sort of notification system inside my webpage with vue.js
All works fine but i want to remove the element after the transition is completed.
I only get this to work with an setTimeout but that is not the ideal method
Working jsfiddle:
http://jsfiddle.net/yMv7y/1073/
This is my code:
Vue:
Vue.transition('notification', {
enter: function(el) {
app.notifications.pop();
},
leave: function(el) {
setTimeout(function(){
el.remove();
},5000);
},
});
Vue.component('notification', {
template: '<div class="notification" v-class="red: !success, green: success" v-transition="notification"><p>{{message}}</p></div>',
data: function() {
return {
success: true,
message: '',
};
},
});
var app = new Vue({
el: 'body',
data: {
notifications : [
]
},
ready: function() {
self = this;
var data = {
'message': 'Thank you',
'success': true
};
self.notifications.push(data);
},
});
Html:
<div id="notifications-wrapper">
<notification id="notification"
v-repeat="notifications"
>
</notification>
</div>
CSS
#notifications-wrapper
{
position: fixed;
z-index: 99;
top: 0;
left: 80%;
overflow: visible;
}
.notification
{
position: relative;
z-index: 100;
overflow: hidden;
width: 250px;
margin-top: 20px;
transform: translate(20px, 0);
animation-fill-mode: forwards;
transition: 1s;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background-color: grey;
}
p
{
margin: 10px 20px;
color: $white;
}
.notification-transition
{
animation-delay: 0s, 4.5s;
animation-duration: 4.5s, 0.5s;
animation-name: slide-in-out, hide-notification;
}
#keyframes slide-in-out
{
0%
{
transform: translate(20px, 0);
}
10%
{
transform: translate(-270px, 0);
}
90%
{
transform: translate(-270px, 0);
opacity: 1;
}
100%
{
transform: translate(20px, 0);
opacity: .5;
}
}
#keyframes hide-notification {
1% {
height: auto;
margin-top: 20px;
}
100% {
height: 0;
margin: 0;
}
}
Problem: You tried to remove el during the transition(leave function) so you got error without setTimeout.
Solution: You have to use afterLeave function. Change leave function to afterLeave function.
afterLeave: function(el) {
el.remove();
}
Jsfiddle