user3438096 user3438096 - 2 months ago 11
Javascript Question

Flip effect after clicking an image inside a div in jQuery

I have a flip effect working now when I click the whole div; see this link:

But what I want to achieve is, it will flip only when I click the I image or the info image at the top right of the div. Same with the image bar when I want to go back to the chart div.

This is what I have but when I change the

.flip
to the class name of the image it is not working.

$(".flip").click(function(){
$(this).find(".card").toggleClass("flipped");
return false;
});


My code;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.flip {
-webkit-perspective: 300;
-ms-perspective: 300;
-moz-perspective: 300;
-o-perspective: 300;
width: 100%;
height: 500px;
position: relative;
margin:auto;
margin-top:20px;
}
.flip .card.flipped {
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
text-align: center;
line-height: 100%;
backface-visibility: hidden; /* W3C */
-webkit-backface-visibility: hidden; /* Safari & Chrome */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
-o-backface-visibility: hidden; /* Opera */

}
.flip .card .front {
height: 100%;
position: absolute;
z-index: 1;
color: white;
cursor: pointer;
}
.flip .card .back {
height: 100%;
position: absolute;
cursor: pointer;

transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */

}
</style>
<script type="text/javascript">
/* card flip */
$( document ).ready(function() {

$(".flip").click(function(){
$(this).find(".card").toggleClass("flipped");
return false;
});

});
</script>
</head>
<body>

<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">

<div class="flip">
<div class="card">
<div class="face front">

<div class="col-sm-12 col-md-12 col-lg-12">
<!-- BAR CHART -->
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Overall Sales & Profit</h3>
<div class = "flips" align="right" style="padding:8px; padding-right:13px;">
<img src="img/info2.png" width = "35" height = "35" alt="Info">
</div>
</div>
<div class="box-body chart-responsive">
<div class="chart" id="gross-chart"></div>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>

</div>
<div class="face back">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Overall Sales & Profit</h3>
<div class = "flips" align="right" style="padding:8px; padding-right:13px;">
<img src="img/graph.png" width = "35" height = "35" alt="Info">
</div>
</div>
<div class="box-body chart-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr class="active">
<th>&nbsp;</th>
<th style="text-align:left">Title</th>
<th style="text-align:center">Sales</th>
<th style="text-align:center">Profit</th>
</tr>
</thead>
<tbody style="text-align:left">
<tr>
<td><img src="img/check.png" width = "20" height = "20" alt="Info"></td>
<td>Jan</td>
<td style="text-align:right">80,456.00</td>
<td style="text-align:right">12,120.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Answer

When you change the $(".flip") to $(".flips"), don't forget to change $(this) part, because it's no longer $(".flip"), instead it's $(".flips")..

Maybe this is what you want:

$(".flips").click(function(){
  $(".flip").find(".card").toggleClass("flipped");
  return false;
});
Comments