Flip effect after clicking an image inside a div in jQuery

Question

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 1

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;
});

Flip effect after clicking an image inside a div in jQuery

Question

1 answers

solution1
1 ACCPTED 2014-06-28 09:59:04

Flip effect after clicking an image inside a div in jQuery

Question

1 answers

solution1 1 ACCPTED 2014-06-28 09:59:04

solution1
1 ACCPTED 2014-06-28 09:59:04