Click here to Skip to main content
15,171,993 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have two different div flip options. But each one is overlapping to another one. how to resolve it.

JavaScript
$(document).ready(function() {
  $('.vclick').click(function() {
    $(this).closest('.vflipper').toggleClass('vflip');
  });
});
$(function() {
  $(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() {
      return $(this).next().html();
    }).get();
    $("#lbl1").html(arr.join(','));
  });
});
$(document).ready(function() {
  $('.vclick1').click(function() {
    $(this).closest('.vflipper1').toggleClass('vflip1');
  });
});
$(function() {
  $(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() {
      return $(this).next().html();
    }).get();
    $("#lbl2").html(arr.join(','));
  });
});



CSS
#newTab {
  height: 50px;
  width: 100%;
  position: relative;
}
#model {
  height: 50px;
  width: 100%;
  position: relative;
}
.vfront {
  background-color: lightgrey;
}
.vfront1 {
  background-color: lightgrey;
}
.vback {
  background-color: lightblue;
}
.vback1 {
  background-color: lightblue;
}
.vflipper {
  position: absolute;
  perspective: 600px;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}
.vflipper1 {
  position: absolute;
  perspective: 600px;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}
.vflipper .vfront,
.vflipper .vback {
  -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;
  -o-transition: transform .6s ease-in-out;
  -moz-transition: transform .6s ease-in-out;
  -webkit-transition: transform .6s ease-in-out;
  transition: transform .6s ease-in-out;
}
.vflipper1 .vfront1,
.vflipper1 .vback1 {
  -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;
  -o-transition: transform .6s ease-in-out;
  -moz-transition: transform .6s ease-in-out;
  -webkit-transition: transform .6s ease-in-out;
  transition: transform .6s ease-in-out;
}
/* vertical flipping stuff */

.vflipper1 {
  -webkit-transform-origin: 100% center;
  -moz-transform-origin: 100% center;
  -ms-transform-origin: 100% center;
  transform-origin: 100% center;
}
.vflipper1 .vfront1 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 200;
  width: inherit;
  height: inherit;
}
.vflipper1.vflip1 .vfront1 {
  z-index: 900;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.vflipper1 .vback1 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 800;
  width: inherit;
  height: 150px;
  -webkit-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.vflipper1.vflip1 .vback1 {
  z-index: 1000;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.vflipper {
  -webkit-transform-origin: 100% center;
  -moz-transform-origin: 100% center;
  -ms-transform-origin: 100% center;
  transform-origin: 100% center;
}
.vflipper .vfront {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 200;
  width: inherit;
  height: inherit;
}
.vflipper.vflip .vfront {
  z-index: 900;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.vflipper .vback {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 800;
  width: inherit;
  height: 150px;
  -webkit-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.vflipper.vflip .vback {
  z-index: 1000;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
#lbl {
  display: inline;
}
#lb2 {
  display: inline;
}



<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><br />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><br />
<br />
<!DOCTYPE html><br />
<html lang="en"><br />
<br />
<head><br />
  <meta charset="UTF-8"><br />
  <title>Title</title><br />
</head><br />
<br />
<body><br />
  <div id="newTab" class="vflipper"><br />
    <div class="vclick vfront"><br />
      <div class="pull-left">Model :</div><br />
      <label id="lbl1"></label><br />
    </div><br />
    <div class="vback "><br />
      <input type="checkbox" class="chk" /><br />
      <label>One</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Two</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Three</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Four</label><br />
      <button type="button" class="vclick btn btn-primary">Save</button><br />
    </div><br />
  </div><br />
  <br><br />
  <div id="model" class="vflipper1"><br />
    <div class="vclick1 vfront1"><br />
      <div class="pull-left">Model :</div><br />
      <label id="lbl2"></label><br />
    </div><br />
    <div class="vback1 "><br />
      <input type="checkbox" class="chk" /><br />
      <label>One</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Two</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Three</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Four</label><br />
      <button type="button" class="vclick1 btn btn-primary">Save</button><br />
    </div><br />
  </div><br />
</body><br />
<br />
</html>


What I have tried:

http://i.stack.imgur.com/2j2j4.png[^]


http://i.stack.imgur.com/UkH7N.png[^]
Posted
Comments
Suvendu Shekhar Giri 6-Oct-16 22:13pm
   
So what is the issue here?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900