I've set up a card flip animation.
On click, the card flips over.
The "back" side of the card has a "close box."
I want the card to flip back over only when you click the close box on the backside.
Currently, I add a class the div with jquery, which "flips" the card.
$(".card").click(function () {
$(this).toggleClass('flipped');
});
See pen here: https://codepen.io/dtomasch/pen/GBBMEm
I'm sure I'll beed to change "toggleClass" to "addClass" but I'm not sure how to target the closeButton and tell it to affect the card.
Edit: I forgot to mention, there are multiple instances of .card on this page, which is why I used $this instead of referencing .card directly since it would obviously flip all the cards at one.
Another neat way is to use jQuery on method to attach a click event to the document and have a filter(selector).
$(document).on('click', ".card:not(.flipped)", function () { // ".card:not(.flipped)" means that if user click on .card element that doesn't have .flipped class
$(".card").toggleClass('flipped');
});
$(document).on('click', ".card .closeButton", function () {
$(".card").toggleClass('flipped');
});
jQuery on method is bit more powerful given that you can add a click event trigger to an an element ahead of time i.e. before it appears on the document. FYI, I am not sure about whether this has performance penalties.
Live example: https://codepen.io/anon/pen/yqqzxw
Add a check to the .card
listener and add the class only if it does not have the flipped
class already. Then, add a listener to .closeButton
to remove the flipped
class from the closest
.card
. Make sure to stopPropagation
to ensure the closeButton
click doesn't propagate up to the .card
listener:
$(".card").click(function () {
if ($(this).hasClass('flipped')) return;
$(this).addClass('flipped');
});
$('.closeButton').on('click', function(e) {
e.stopPropagation()
$(this).closest('.card').removeClass('flipped');
});
Instead of targeting the whole of the card with a click listener, Target just the front. This way when the whole card is flipped the front of the card is now at the back allowing you to target the closeButton and clicking anywhere else in the card without being flipped .
$(".front").click(function() {
$(".card").toggleClass('flipped');
});
$(".closeButton").click(function() {
$(".card").toggleClass('flipped');
});
codepen example https://codepen.io/anon/pen/vaaePJ
Edit: for multiple instances change to.
$(".front").click(function () {
$(this).parent().toggleClass('flipped');
});
$(".closeButton").click(function () {
$(this).parent().parent().toggleClass('flipped');
});
First card
click event will add only the flipped
class if card
doesn't have the flipped class.
closeButton
click event will remove the flipped
class from card
elemnt and I use stopPropagation
to stop click event from bubbling up and rise the card
click.
$(".card").click(function () {
if (!$(this).hasClass('flipped')) {
$(this).addClass('flipped');
}
});
$('.closeButton').click(function(e){
e.stopPropagation()
$(this).closest('.card').removeClass('flipped');
})
codepen example
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I've added the following code to myhtaccess file and the gzip is working for all the filenames matched below
Embed codes like Labnol's described in this answer, require 2 clicks to play the embedded video from mobile phones, as Labnol clarifies from the start
The problem is, I want my production server to throw an error to https://sentryio/ if there is an error because of nesting level more than x step