Css3 dynamic added element not get animated - javascript

As you see, I have list and button. When 'click' event triggered on the button, I dynamically add new element to the list. After new element is added to the list, I want to animate it on hover state with javascript, but it's not working. Everything is fine with hard coded list elements.
First solution which comes to mind is to hard code max number of the list elements and when hide what is unnecessary. But what, if i don't know max number of elements?
Here is code
Html
<section>
<div class='wrap'>
<ul>
<li class="box"></li>
<li class="box stacked"></li>
</ul>
</div>
<button> addBox </button>
</section>
Css/Sass
.box
width: 100px
height: 100px
border: 1px solid black
background: orange
flex-basis: 1
.stacked
margin-left: -50px
.up
animation-name: boxUp
animation-duration: 300ms
animation-timing-function: ease-in-out
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: forwards
#keyframes boxUp
from
transform: translate(0, 0)
to
transform: translate(0, -25px)
Javascript
$('button').click(function(e) {
$('ul').append($('<li>').attr('class', 'box stacked'));
});
$('.box').hover(function() {
$(this).addClass('up');
}, function(){
$(this).removeClass('up');
});

Since it is a dynamically added element, it won't be present in the DOM at the time the event handlers are attached. So, you will have to use delegation from a parent which is present in the DOM right from the start (that is, use a parent which is a static content of the page and is present right from load).
You could use either the below:
$('body').on('mouseenter mouseleave', `.box`, function() {
$(this).toggleClass('up');
});
or the one below which you ended up using:
$('ul').on('mouseenter mouseleave', 'li', function(){
$(this).toggleClass('up');
});
CodePen Demo

Related

ToggleClass overlap

I'm trying to use the same button to open and close a menu, I'm sure this is super simple but I'm new to the world of jQuery. I'm using the Wordpress builder 'Oxygen' if that helps. Here's my code:
The modal is an in-built feature in the website builder so I can't provide much code on that. It's basically set to trigger when element with class "open" is clicked, and close with element class "oxy-modal-close".
jQuery
jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('open oxy-modal-close');
});
HTML
<div id="toggle" class="open">
<img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>
CSS
#plus {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 0.3s;
width: 35px;
position: fixed;
top: 20px;
right: 20px;
}
.rotate {
transform: rotate(45deg);
}
Basically on the 2nd click, the class is re-adding the class "open", which is causing the menu to flicker as the two actions are conflicting with each other. Video here - https://gph.is/g/ZnNQddo
I have tried adding a delay to the class "open", but for some reason the delay is only working on the first click - on the second it's changing class instantly. This is the code I'm trying for that.
jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('oxy-modal-close');
var el = jQuery("#toggle");
window.setTimeout(function() {
el.toggleClass('open');
}, 500);
});
You are referencing the id again within the click - you need to reference $(this)... to toggle the class on the click
Also - you need to start with one of the states - that way it can toggle the class to the other state on each click as per the snippet (the cross icon is on the right of the snippet widow as per styling ) - now when you click it rotates as intended.
$("#toggle").click(function() {
$('#plus').toggleClass('rotate');
$(this).toggleClass('open oxy-modal-close');
});
#plus {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 0.3s;
width: 35px;
position: fixed;
top: 20px;
right: 20px;
}
.rotate {
transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle" class="open">
<img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>

CSS: Wrapping Marquee

I am making a marquee in Javascript and CSS that displays various notifications.
Right now, I am using Javascript to update the transform: translateX() on a specified interval.
Here's a codepen of what I have working so far.
I would like to have the marquee wrap around so that there is always text present on the screen. Currently, it does not wrap around until everything has disappeared.
I have found a similar example (using CSS keyframes) that seems to have solved this issue by including the marquee text twice in a row. I would prefer not to have to do this if at all possible, as the marquee won't be text when live, but rather a bunch of icons and other elements, and that could get messy.
You have to have the text twice to achieve the effect you are looking for. The codepen you reference controls the widths so that both texts are never in the visible marquee simultaneously. Here is another example that does this by tying the width of the outer div to the width of the inner div with jQuery, and uses white-space: nowrap. I didn't write this codepen, BTW.
HTML
<div id="maindiv">
<div id="div1">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
<div id="div2">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
</div>
CSS
#maindiv{
border: 2px solid black;
overflow: hidden;
white-space: nowrap;
}
#div1 {
display: inline-block;
animation: marquee 10s linear infinite;
}
#div2 {
display: inline-block;
animation: marquee2 10s linear infinite;
animation-delay: 5s;
}
#keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
#keyframes marquee2 {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200%);
}
}
jQuery
$('#maindiv').width($('#div1').width());

CSS animate on html form

Here's an example of what I am trying to recreate: https://www.hioscar.com/get-quote/
When a user has finished entering information into the input area or selected an option the current line will animate (using translate & opacity, I believe) and the next line will come into view.
I've started something very basic just to get a feel for how it's meant to work using on hover but I'm not sure on how to complete replicate this animation in my own form.
div {
margin-top: 500px;
}
div:hover {
transform: translate(0px, -300px);
opacity: 0.3;
transition: opacity 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
So you had several problems, you were only animating opacity and if you move the div from under the mouse cursor when you hover it, it won't work.
So I activated all transitions, not just opacity, made the div as tall as the browser, and used the div's internal padding.
body, html {
/* needed so that the div can also be 100% of window */
height: 100%;
}
div {
height: 100%;
padding-top: 500px;
}
div:hover {
padding-top: 300px;
transition: all 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>

Fade in and out using CSS on javascript multiple pages

On my website I have two links, if you click on portfolio, the div portfolio becomes visible.
I use this code to switch between them <a href="" onclick="return show('portfolio','profile');">
How can I make a quick fade-in-out between the divs using CSS?
Visit my site here and you'll see.
I've created a small demo for you to look at and have an idea of what AlexG is suggesting in Option 1 using CSS Animations (and jQuery).
JSFiddle
CODE SNIPPET:
var vHome = $("#home"),
vPortfolio = $("#portfolio"),
bTriggerHome = $("#trigger-home"),
bTriggerPortfolio = $("#trigger-portfolio");
function switchView() {
vHome.add(vPortfolio).toggleClass("hide-view");
};
bTriggerHome.add(bTriggerPortfolio).on("click", function() {
switchView();
});
#home,
#portfolio {
height: 500px;
animation: fadeInUp 1s both;
}
#home {
background-color: tomato;
}
#portfolio {
background-color: royalblue;
}
.hide-view {
display: none;
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">
<button id="trigger-portfolio">
Switch View
</button>
</div>
<div id="portfolio" class="hide-view">
<button id="trigger-home">
Switch View
</button>
</div>
You set your invisible divs to display: none. Thus, standard CSS transitions won't work out of the box.
display: none is a good idea because the browser won't spend time rendering that markup at all. However, CSS transitions need a hack to work with an element that move from display: none to display: !none, so you have two options:
1) Just use CSS Animations instead; add/remove a class to the elements that contain a CSS animation definition and it will play straight away.
2) Set your invisible divs to height: 0 and opacity: 0; and transition to opacity: 1 using a regular CSS transition (often triggered by a class change)

Add hover function to a class if condition is met

I have 2 h3 elements inside a parent div with class 'entry'
<div class="entry">
<h3 class="productsHover">
<a><img src="image.png" /></a>
</h3>
<h3>
<a>Drillrigs</a>
</h3>
</div>
Now, when you hover over the image, it has a transition effect defined by the CSS:
h3.productsHover img{
position: relative;
margin-right: 10px !important;
left: 0px;
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
h3.productsHover img:hover{
left: 6px;
}
I do not want to add them into the same parent element(h3.productsHover) to which the hover effect is applied. They(the image and the text) should remain in separate h3 tags
QUESTION: So how do I call the hover effect on the image when in fact hovering over the h3 text element?
Not that I do not want to apply the hover effect over the entire parent element (.entry) since it contains many other image and h3 tags as well.
Also, classes should only be added via JS, and not in the html it self (the normal way).
bind handler to hover (jQuery supports) event on h3 which has a a text, the handler will add a class on mouseenter and remove a class on mouseout. let css class on h3 which has img to do the effect.
$( 'div.entry h3:last-child a' ).hover(
function(e){ $(this).parent().prev().addClass('productsHover') },
function(e){ $(this).parent().prev().removeClass('productsHover') }
);
#Vimal Stan: this answer should be improved with the following:
$(".entry img").prev().addClass("hoverClass"); // of fire hover for that element
// same with this one .entry:hover img
http://api.jquery.com/prev/
.prev( [selector ] )Returns: jQuery
Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
You could do it this way:
.entry img
.entry:hover img
This should let you display the hover effect no matter where the hovers over the div.

Categories