jquery live() click function: class not being removed - css

I'm using jQuery to show a success message after a form is submitted. The form is created using the wordpress plugin Contact Form 7. The class wpcf7-mail-sent-ok is added dynamically by the plugin ajax submission script. I'm trying to make it so that when the user clicks on the message, it fades out and then dissappears. For some reason though the removeClass method isn't working.
Can anyone see any reason why it shouldn't be working? The timeout function is definitely working as I tested it with an "alert()" call. Thanks for your help.
PS... i'm using LESS css so that explains the .opacity() syntax in the css posted here.
HTML:
<div class="wpcf7-response-output wpcf7-mail-sent-ok"><div class="image"></div></div>
Jquery + CSS
var $sent = $('.wpcf7-mail-sent-ok ');
function remove() {$sent.hide().removeClass('wpcf7-mail-sent-ok hide').removeAttr('style')}
$sent.live("click", function(){
$(this).addClass('hide');
setTimeout(remove,400)
});
.wpcf7-response-output {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background: transparent;
opacity: 0;
-moz-opacity: 0;
.transition(opacity,.4s);
}
.wpcf7-response-output.wpcf7-mail-sent-ok .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.wpcf7-response-output.wpcf7-mail-sent-ok {z-index: 1000; background-color: rgba(255,255,255,.7); .opacity(1)}
.wpcf7-response-output.wpcf7-mail-sent-ok .image {
height: 132px;
position: absolute;
margin: -66px 0 0 -200px;
background-size: 100% 100%;
background: url(assets/images/img-sent.png) no-repeat center center;
}
.wpcf7-mail-sent-ok.hide {.opacity(0); z-index: -1}

It doesn't work because at the point where you define the function remove, the value of $sent has already be determined to be a jQuery object that matches no elements. This is because the matching happens as soon as you write
var $sent = $('.wpcf7-mail-sent-ok ');
At this time there is no "mail sent" element present yet.
The easiest way to fix this is to re-evaluate the selector within remove:
function remove() {
$('.wpcf7-mail-sent-ok').hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
Another solution would be to just use this inside the click handler and pass it as a parameter to remove:
function remove(el) {
$(el).hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
$sent.live("click", function(){
$(this).addClass('hide');
setTimeout(function() { remove(this); },400)
});
Of course it's even better to just use jQuery's built-in delay and get rid of remove altogether:
$sent.live("click", function(){
$(this).addClass('hide')
.delay(400)
.hide(0) // need to pass 0 as a parameter
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
});

I don't see any code to fade out the element. The reason its not working is same as mentioned by #Jon. You can try to use anonymous funciton and indside this function this will point to the element on which click is trigger. Try this.
$('.wpcf7-mail-sent-ok ').live("click", function(){
var $this = $(this).addClass('hide');
setTimeout(function(){
$this
.hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style')
},400)
});

Related

CSS Transition on page load

I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.

Transition not working on backdrop opacity to 0 when class is removed

I have a backdrop on my site that opens whenever it needs to. Modals, mobile nav etc.
I'd like to get the opacity of the backdrop to fade, however I can't get it to transition properly when the --open class is removed from the backdrop.
I've gone through a few iterations so any ideas on how to make it work AND be better css is appreciated.
Here's a demo demonstrating the ease effect occuring when --open is applied to the backdrop, but will not work when it is removed.
https://jsfiddle.net/p2yz0rvr/
For futures sake here's the code:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -9999999999;
opacity: 0;
text-align: center;
transition: opacity 0.3s ease-in;
}
.backdrop--open {
opacity: 0.75;
z-index: 2;
background: #000;
transition: opacity 0.4s ease-out;
}
The problem is that you don't have a background set on the initial .backdrop state, the background is set on the element .backdrop--open.
Since you are only transitioning the opacity property, the transition doesn't occur when you remove the .backdrop--open class. Therefore you would need to move background to the initial .backdrop state in order for the transition to take place when removing the class.
Updated Example
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: 0;
text-align: center;
background: #000;
transition: opacity 0.3s ease-in;
}
.backdrop--open {
opacity: 0.75;
z-index: 2;
transition: opacity 0.4s ease-out;
}
As an alternative, you could also keep your initial code and just transition the background property in addition to the opacity property (without having to change where the background is set).
Keep in mind that the z-index property can be transitioned, so depending on what you're trying to achieve you may only want to target those two properties rather than using all.
Updated Example
.backdrop {
/* ... */
transition: background 0.3s ease-in, opacity 0.3s ease-in;
}
.backdrop--open {
/* ... */
background: #000;
transition: background 0.4s ease-out, opacity 0.4s ease-out;
}

CSS Overlay not displaying

I am starting my foray into Modals and the CSS I am using for the overlay, just doesn't seem to want to work. Any ideas what might be happening?
It is written in SCSS
#mixin transitionSupport($transition){
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
.modal-overlay{
position: fixed;
z-index: 998;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
#include transitionSupport(1ms opacity ease);
background: rgb(0,0,0);
.modal-open{
opacity: 1;
}
}
HTML:
<div class="modal-overlay modal-open">
</div>
Link to the codepen
When I view the page itself, the page stays white. And I have no idea why.
Should the .modal-open{opacity:1} not override .modal-overlay?
Change .modal-open { to &.modal-open { to match class="modal-overlay modal-open".
As it's written currently, it's looking to match an element called .modal-open INSIDE .modal-overlay.

Keyframe CSS animation overwrites hover transition

I am afraid there are similar questions to this but I didn’t found a concrete solution, so I created a fiddle:
http://jsfiddle.net/Garavani/yrnjaf69/2/
<div class= "category_item">
<div class= "cat_button">
<span class="title_cat">TEXT</span>
</div>
</div>
CSS:
.category_item {
position: absolute;
background-color: #999;
top: 100px;
left: 50px;
width: 200px;
height: 200px;
/* seems to be overwriten by animation keyframes */
-webkit-transition: -webkit-transform 0.215s ease-in-out;
transition: transform 0.215s ease-in-out;
cursor: pointer;
}
.category_item:hover {
-webkit-animation-name: easeBack;
animation-name: easeBack;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes easeBack {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
100% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
}
.cat_button {
position: absolute;
width: 200px;
height: 55px;
bottom: 0;
border: 2px solid #fff;
color: #fff;
-webkit-transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
}
.category_item:hover .cat_button {
background: #fff;
border-color: #fff;
color: #511c5b;
}
In this (simplified) animation everything works fine except for when the mouse leaves the entire box. The animation starts from it original state, but abruptly.
The basic transition time (and ease) is ignored because it seems the keyframes have higher importance and overwrite it.
What I need is the keyframe animation triggering AND when the mouse leaves it should turn back to the original state smoothly.
Is there a solution for this
1) in pure CSS
2) maybe with some little javascript only?
Thanks in advance for help and ideas!
EDIT:
After implementing the solution offered kindly by Toni this is the correct fiddle:
http://jsfiddle.net/yrnjaf69/40/
Thanks again Toni!
EDIT 2:
Sadly, yet, there is one question left. The part with the keyframes is not executed on Firefox even though I added all the -moz- vendors, too, in this fiddle:
http://jsfiddle.net/dr6Ld0wL/1/
Why?
PS: As far as I tested for now it works even in Opera (Beta). Only browser resisting is Firefox
EDIT 3:
The correct (working) code is now in this fiddle:
http://jsfiddle.net/dr6Ld0wL/16/
The keyframes also need to be explicitly divided in vendor prefixes. Jesus Christ. Those prefixes…
Here is a jsfiddle that achieves this.
.demo-hover {
position: relative;
margin: 100px;
animation: complexProcessReversed 2s ease-in forwards;
width: 160px;
height: 160px;
background-color: #88d;
}
.demo-hover:hover {
animation: complexProcess 2s ease-in forwards;
width: 100px;
height: 100px;
background-color: #732;
}
#keyframes complexProcess {
/* keyframes */
}
#keyframes complexProcessReversed {
/* keyframes (opposite) */
}
The animation out is assigned in the css in the main class, then the hover state kicks in on hover and css re-applies the original class properties on unhover.
The animation does trigger backwards on page load, so you might like to think of tweaking your animation to take this into account, like this example, pinched from this answer. Alternatively, use javascript (or jquery), like this example where the animations are triggered by adding and removing classes to the target using jquery:
JavaScript
$('.demo-hover').hover(
function() {
// mouse in
$(this).removeClass('forwards--reversed').addClass('forwards');
},
function() {
// mouse out
$(this).removeClass('forwards').addClass('forwards--reversed');
}
);
CSS
.forwards {
animation: complexProcess 2s ease-in forwards;
width: 100px;
height: 100px;
background-color: #732;
}
.forwards--reversed {
animation: complexProcessReversed 2s ease-in forwards;
width: 160px;
height: 160px;
background-color: #88d;
}
Also, I'd use #keyframe or transition. Use transition if you just need a simple even change from n to m but when things are more complex, such as one thing changing evenly over 100% but another thing not starting until 50% off the animation has played, then use a #keyframe
Using both will cause confusion, especially if you're trying to animate the same properties.
Finally css vendor prefixes are required

How to re-animate CSS3 animations on class change

So I've these CSS3 script
#place.us .level1 { background-position: -100px; background-color: #333; }
#place.gb .level1 { background-position: -100px; background-color: #CCC; }
#-webkit-keyframes place-pop-livel1 {
0% { bottom: -100px; }
100% { bottom: 30px; }
}
#place .level1 {
animation: place-pop-livel1 2s ease-out;
-moz-animation: place-pop-livel1 2s ease-out;
-webkit-animation: place-pop-livel1 2s ease-out;
}
When the page first loads, the div has #place.us and the animation works perfectly. Now I want to change the class of the div to 'gb' to make it #place.gb using jquery and as soon as the class is changed, I want the same animation to happen.
My jquery code is simple
$('.change-city').live('click', function(){
var city = $(this).data('city'); //gb or us
$('#place').removeClass().addClass(city);
});
The class changes and the .level1 property is affected as declared in the CSS but the animation doesn't happen. How do I make sure that the animation happens?
I'd recommend using CSS transitions as they have better browser coverage, they are simpler to manage and they fallback better (if the browser doesn't support transitions it does the same thing without the animation).
You problem can be solved like this:
// after load add the animation
$(".level1").addClass("pop");
// after the animation is done hide it again
$(".level1").bind("webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(){
$(this).removeClass("pop");
});
$('.change-city').live('click', function(){
var city = $(this).data('city'); //gb or us
$('#place').removeClass().addClass(city).find(".level1").addClass("pop");
});
And the CSS
#place.us .level1 {background-color: #333; }
#place.gb .level1 {background-color: #CCC; }
#place .level1 {
position: absolute;
background-color: #000;
width: 100px;
height: 100px;
bottom: -100px;
-webkit-transition: bottom 2s ease;
-moz-transition: bottom 2s ease;
-o-transition: bottom 2s ease;
-ms-transition: bottom 2s ease;
transition: bottom 2s ease;
}
#place .pop {
bottom: 30px
}
You can check out the jsfiddle here: http://jsfiddle.net/EmsXF/

Resources