jQuery card flip requires two clicks to work

jQuery card flip requires two clicks to work - javascript

On click, I want the clicked card to flip and reveal the backside. Everything is working smoothly, except for the fact that after the first click, two clicks are required to get the desired functionality.
The problem is that I would like this to only work with one click. I am very new to jQuery, so I'm expecting that this is probably a basic issue that I'm overlooking.
Here is the jQuery:
function flip() {
jQuery('.flip').click(function() {
jQuery(this).find('.card').toggleClass('flipped');
});
}
.ot-front {
background-color: blue;
}
.ot-back {
background-color: red;
}
.team-member {
display: inline-flex;
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform .3s;
transform-style: preserve-3d;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
position: absolute;
backface-visibility: hidden;
}
.card .ot-back {
background: #eee;
transform: rotateY( 180deg);
}
.card.flipped {
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-members">
<div class="team-member flip">
<div class="card" onclick="flip()">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
<div class="team-member flip">
<div class="card" onclick="flip()">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
<div class="team-member flip">
<div class="card" onclick="flip()">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
</div>

If you were to implement it like this:
function flip(wrapperContainingElementToFlip) {
wrapperContainingElementToFlip.find('.card').toggleClass('flipped');
}
jQuery('.flip').click(function () {
flip($(this));
});
You will bind the click when the script is loaded.
You could also bind the click eventhandler on page load, by wrapping your code in a page load event handler, like so:
$(document).ready(function() {
//Put your code here
});
By implementing your code as above, when clicking the element, a function will be called. The click event will be bound before calling the flip function, and will therefore execute.
I think this will solve your issue.

It's probably because of the fact, that you wrapped your jQuery into a function.
So for this to work, you need to click once to call a function to work, and then another one, for jQuery function to work.
Try deleting the outer function flip() and see if it's working.

Just remove the outer function. It should look something like this:
$('.flip').click(function(){
$(this).find('.card').toggleClass('flipped');
});
It does work just fine in codepen.

Your logic is doubled. You invoke flip on click and then subscribe to click, and then only do the flipping in the handler. Removing the outer function, the handlers in the HTML (and jQuery):
Array.from(document.querySelectorAll(".card")).forEach(element =>
element.addEventListener("click", () =>
element.classList.toggle('flipped')
)
);
.ot-front {
background-color: blue;
}
.ot-back {
background-color: red;
}
.team-member {
display: inline-flex;
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
-o-transition: -o-transform .3s;
transition: transform .3s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .ot-back {
background: #eee;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
<div class="team-members">
<div class="team-member flip">
<div class="card">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
<div class="team-member flip">
<div class="card">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
<div class="team-member flip">
<div class="card">
<div class="ot-front">FRONT</div>
<div class="ot-back">BACK</div>
</div>
</div>
</div>

Related

jQuery Card Flip on Mouseenter/Mouseexit - triggering multiple times

The issue is that if you do the mouseenter and wiggle your mouse around fast, it will trigger the flipping action multiple times, making it flicker or look strange. Is there a better way to do what I'm doing here?
jQuery('.card').mouseenter(function(e) {
e.stopPropagation();
jQuery(this).addClass('flipped');
}).mouseleave(function(e) {
e.stopPropagation();
jQuery(this).removeClass('flipped');
});
.card {
width: 150px;
height: 300px;
position: absolute;
cursor: pointer;
background-color: purple;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .front h3 {
font-size: 30px;
}
.card .back p {
height: 75px;
}
.card .front .card-text {
padding: 0 25px;
height: 100px;
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
background-color: #ffffff;
text-align: center;
display: flex;
align-items: center;
}
.card .back {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .apply-link {
text-decoration: none;
background-color: #fff;
color: #000;
padding: 8px 20px;
}
.card .back h3 {
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="front">
<h3>Big Header</h3>
<div class="card-text">Info text here</div>
</div>
<div class="back" style="background-color: #b24377">
<h3>Up to 40% off</h3>
<p>Text here </p>
Apply Now
</div>
</div>
The issue is that if you do the mouseenter and wiggle your mouse around fast, it will trigger the flipping action multiple times, making it flicker or look strange. Is there a better way to do what I'm doing here?

One way to solve the issue is to add a wrapper around the card and listen to events on the wrapper instead of the card
jQuery('.wrapper').mouseenter(function(e) {
e.stopPropagation();
let $this = jQuery(this).find('.card');
if(!$this.hasClass('flipped')){
$this.addClass('flipped');
}
}).mouseleave(function(e){
e.stopPropagation();
jQuery(this).find('.card').removeClass('flipped');
});
.wrapper{
width: 150px;
height: 300px;
}
.card {
width: 100%;
height: 100%;
cursor: pointer;
background-color: purple;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .front h3 {
font-size: 30px;
}
.card .back p {
height: 75px;
}
.card .front .card-text {
padding: 0 25px;
height: 100px;
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
background-color: #ffffff;
text-align: center;
display: flex;
align-items: center;
}
.card .back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .apply-link {
text-decoration: none;
background-color: #fff;
color: #000;
padding: 8px 20px;
}
.card .back h3 {
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="card">
<div class="front">
<h3>Big Header</h3>
<div class="card-text">Info text here</div>
</div>
<div class="back" style="background-color: #b24377">
<h3>Up to 40% off</h3>
<p>Text here </p>
Apply Now
</div>
</div>
</div>

Change javascript instead of hover to a set time

I found this flip animation on the internet and I was wondering: How can I change the javascript that instead of hovering over the image will cause the flip, a set time wil? So for instance after 3 seconds, the animation will start.
I am not so good with javascript yet and I am hoping someone can help me out
Thank you very much If you know the solution!
$(document).ready(function() {
$(".container").hover(function() {
$(".card").toggleClass('flipped')
}, function() {
$(".card").toggleClass('flipped')
});
})
h1 {
text-align: center;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

Why not do it with CSS?
On hover pseudo class with a transition:
h1 {
text-align: center;
}
.container {
--card-transition-duration: 1s;
--card-transition-delay: 4s;
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
transform-style: preserve-3d;
transform-origin: right center;
}
.container:hover .card {
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Or by itself with #keyframes animation:
h1 {
text-align: center;
}
.container {
--card-transition-duration: 1s;
--card-transition-delay: 4s;
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
transform-style: preserve-3d;
transform-origin: right center;
animation-name: flip;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
#keyframes flip {
0% {
transform: translateX( 0%) rotateY( 0deg);
}
35% {
transform: translateX( 0%) rotateY( 0deg);
}
65% {
transform: translateX( -100%) rotateY( -180deg);
}
100% {
transform: translateX( -100%) rotateY( -180deg);
}
}
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

First, that's not justjavascript, it's jQuery. If you want the animation to start with a delay using the jquery code, you can add a setTimeout.
And if you use the callback function of the hover method, use add/remove class not toggle.
You could do it in multiple ways, even with just CSS and animations.
$(document).ready(function() {
$(".container").hover(function() {
setTimeout(() => { $(".card").addClass('flipped')},3000)
}, function() {
$(".card").removeClass('flipped')
});
})
h1 {
text-align: center;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

Change the ready function to the one below.
$(document).ready(function () {
window.setInterval(function () {
$(".card").toggleClass("flipped");
}, 3000);
});

Multiple Flip Boxes - But only flip the one clicked on

my challenge is that I have two rows of boxes that I want to flip independently. Can't use hover as that is too chaotic, visually, for some users. So I have a JQuery script that toggles between classes, BUT, when applied to multiple boxes I get all of the boxes turning at once. I'd like to be able to turn over only the one clicked on like the hover effect. I can get that to happen if I give each box a separate class but that is a lot of extra CSS and I know that there has to be a better, cleaner way. Please help. :)
Here is the jquery code: $('.card') is what I'd like to use instead of ('cardOne', '.cardTwo', etc.)
function flip() {
$('.card').toggleClass('flipped');
}
And here is the CSS (it's too cumbersome):
.container {
width: 200px;
height: 200px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.cardOne, .cardTwo, .cardThree, .cardFour, .cardFive, .cardSix, .cardSeven, .cardEight {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.cardOne div {
display: block;
height: 100%;
width: 100%;
/*line-height: 200px;*/
color: #000;
text-align: center;
/*font-weight: bold;*/
font-size: 18px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.cardOne .front, .cardTwo .front, .cardThree .front, .cardFour .front, .cardFive .front, .cardSix .front, .cardSeven .front, .cardEight .front {
background: #9ddae5;
line-height: 180px;
}
.cardOne .back, .cardTwo .back, .cardThree .back, .cardFour .back, .cardFive .back, .cardSix .back, .cardSeven .back, .cardEight .back {
background: blue;
line-height: 18px;
-webkit-transform: rotateX( -180deg );
-moz-transform: rotateX( -180deg );
-o-transform: rotateX( -180deg );
transform: rotateX( -180deg );
}
.cardOne.flipped, .cardTwo.flipped, .cardThree.flipped, .cardFour.flipped, .cardFive.flipped, .cardSix.flipped, .cardSeven.flipped, .cardEight.flipped {
-webkit-transform: rotateX( -180deg );
-moz-transform: rotateX( -180deg );
-o-transform: rotateX( -180deg );
transform: rotateX( -180deg );
}
And then, of course, the HTML (but I'll cut it to two boxes):
<div class="container">
<div class="cardOne" onclick="flipOne()">
<div class="front">
<!-- front content -->
<p>anxiety</p>
</div>
<div class="back">
<!-- back content -->
<p>Occasional anxiety is a normal part of life. You might feel anxious when faced with a problem at work, before taking a test, or making an important decision. But anxiety disorders involve more than temporary worry or fear. </p>
</div>
</div><!-- end flipper -->
</div>
</div> <!-- end col-1 -->
<div class="col-1">
<div class="container">
<div class="cardTwo" onclick="flipTwo()">
<div class="front">
<!-- front content -->
<p>infertility</p>
</div>
<div class="back">
<!-- back content -->
<p>Grief is a real part of infertility. It may be heightened in miscarriages or stillbirths, but it is just as real when a couple cannot conceive.</p>
</div>
</div>
</div>
</div><!-- end col-1 -->

Use the following:
$('.container').on('click', '.card', function(){
$(this).toggleClass('flipped');
});
Using this logic, we bind with the script an event handler to the parent container of the cards. Any time a card is clicked, it will toggle the flipped class on the card that was clicked.
$('.container').on('click', '.card', function() {
$(this).toggleClass('flipped');
});
.card {
display: inline-block;
min-width: 100px;
min-height: 80px;
border: 1px solid black;
}
.card.flipped { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
<div class="card"></div>
</div>

Try this:
$('.card').on('click', function() {
$(this).toggleClass('flipped');
}
And you'll only need one class .card reducing writng and so on.
Ps: remove the function declation and replaced it with the code above and remove all onclick="flip()" from your HTML.

Adding preventDefault() and stopPropagation()

I am new in coding in general, most especially javascript.
I made a flip div effect. But I noticed that when clicking one .button to trigger the flip effect, all the other divs that are similar in a page are also triggered. So I am trying to add both .preventDefault() and .stopPropagation() when flipping a div, so far its a big FAIL
As a starter, I came up with this code..
$('.insidecontent .button').click(function () {
$('.insidecontent').addClass('flipped');
$('.insidecontent').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
$('.insidecontent').removeClass('flipped');
$('.insidecontent').addClass('unflipped');
});
Demo here: http://jsfiddle.net/uriri/ke7kqvvk/3/
A friend of mine suggested that I should use .parents() on the current target inside the .click() function. But after reading the jQuery documentation, I am totally lost!

You don't need to stop click event or prevent default. You just need to flip right element. Right not you are adding/removing classes to/from all .insidecontent, while you need to select only parent element of the clicked button:
$('.insidecontent .button').click(function () {
$(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
$(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});
Demo: http://jsfiddle.net/ke7kqvvk/5/
Or shorter optimized version can be:
$('.insidecontent').find('.button, .button-c').click(function () {
$(this).closest('.insidecontent').toggleClass('flipped unflipped');
});
Demo: http://jsfiddle.net/ke7kqvvk/6/

preventDefault() and stopPropagation() won't help here. You need to use a selector that's more specific than all the elements with the same class.
$('.insidecontent .button').click(function () {
$(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
$(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});
.content{
position: relative;
background: #ffffff;
width:100%;
text-align:center;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
._hasdata .insidecontent {
position: relative;
background: #ffffff;
margin-bottom:30px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000;
perspective: 1000px;
}
._hasdata .insidecontent .front {
position: relative;
z-index: 900;
width: 200px;
height: 200px;
background: #ededed;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
._hasdata .insidecontent .front .fcontent {
position:relative;
top:30%;
}
._hasdata .insidecontent.flipped .front {
z-index: 900;
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
transform: rotateX(0deg) rotateY(180deg);
}
._hasdata .insidecontent .back {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
z-index: 800;
-webkit-transform: rotateX(0deg) rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateX(0deg) rotateY(-180deg);
}
._hasdata .insidecontent.flipped .back {
z-index: 1000;
background: #E7E7E7;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
._hasdata .insidecontent .front,
._hasdata .insidecontent .back {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
._hasdata .insidecontent .button,
._hasdata .insidecontent.flipped .button-c {
z-index: 15;
display: block;
position: absolute;
bottom: 0;
margin: -30px 20px 20px;
opacity: 0;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity .1s linear;
transition: opacity .1s linear;
}
._hasdata .insidecontent:hover .button,
._hasdata .insidecontent.flipped:hover .button-c {
opacity: 0.8;
}
._hasdata .insidecontent.unflipped .button-c {
display: none;
}
._hasdata .insidecontent.flipped ._lar {
height: 100%;
}
._hasdata .insidecontent.unflipped .bcontent {
display: none;
}
._hasdata .insidecontent.flipped .bcontent {
top: 30%;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="_hasdata">
<div class="insidecontent initalized unflipped">
<div class="front">
<span class="fcontent">FRONT CONTENT<br />HERE</span>
<a class="btt button">info</a>
</div>
<div class="back _lar">
<div class="bcontent">BACK INFO HERE</div>
<a class="btt button-c">go back</a>
</div>
</div>
</div>
<div class="_hasdata">
<div class="insidecontent initalized unflipped">
<div class="front">
<span class="fcontent">FRONT CONTENT<br />HERE</span>
<a class="btt button">info</a>
</div>
<div class="back _exif">
<div class="bcontent">BACK INFO HERE</div>
<a class="btt button-c">go back</a>
</div>
</div>
</div>
</div>

Have you learned about the "this" keyword yet? In a JQuery click handler, $(this) refers to the element that the handler is called on. So, if you put removeClass and addClass methods on $(this) it will only affect that one element. You can traverse using this too... so your code would look like this:
$('.insidecontent .button').click(function () {
$(this).parent().find('.insidecontent').addClass('flipped');
$(this).parent().find('.insidecontent').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
$(this).parent().find('.insidecontent').removeClass('flipped');
$(this).parent().find('.insidecontent').addClass('unflipped');
});
you may not even need the find method in your case, but it is better to be explicit.

Code not working in internet explorer [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This code working good in mozilla and opera .But not working in IE. Please help.The JavaScript is ok. But in IE 10 only back panel is coming ..
Thank you..
http://codepen.io/syedrafeeq/pen/eCkFt
CSS 3D FLIP BOX
Flipping content to a div (Transitions and 3D Transforms)
<div class="wrapper">
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
<div class="col_third end">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #ecf0f1;
margin: 20px;
font-family: Arial, Tahoma;
font-size: 20px;
color: #666666;
text-align: center;
}
p { color: #ffffff; }
/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */
.wrapper{ width: 980px; margin: 0 auto; background-color: #bdd3de; hoverflow: hidden;}
.panel {
margin: 0 auto;
height: 130px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.panel .front,
.panel .back {
text-align: center;
}
.panel .front {
height: inherit;
position: absolute;
top: 0;
z-index: 900;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel .back {
height: inherit;
position: absolute;
top: 0;
z-index: 1000;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
background-color: #14bcc8;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.box2{
background-color: #ff7e70;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
$(document).ready(function(){
// set up hover panels
// although this can be done without JavaScript, we've attached these events
// because it causes the hover to be triggered when the element is tapped on a touch device
$('.hover').hover(function(){
$(this).addClass('flip');
},function(){
$(this).removeClass('flip');
});
});

CSS3 3D Transforms Doesn't support to IE version Upto 8 and 9. And IE version 10 and 11 Partial support.
Partial support menas not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
Reference Link.

Develop Reference

JavaScript is the programming language of the Web.

jQuery card flip requires two clicks to work - javascript

It's probably because of the fact, that you wrapped your jQuery into a function. So for this to work, you need to click once to call a function to work, and then another one, for jQuery function to work. Try deleting the outer function flip() and see if it's working.

Just remove the outer function. It should look something like this: $('.flip').click(function(){ $(this).find('.card').toggleClass('flipped'); }); It does work just fine in codepen.

Related

jQuery Card Flip on Mouseenter/Mouseexit - triggering multiple times

Change javascript instead of hover to a set time

Multiple Flip Boxes - But only flip the one clicked on

Adding preventDefault() and stopPropagation()

Code not working in internet explorer [closed]

Categories

Resources