i'm creating "virtual business cards" give brief profile on person. when click on them, rotate , give more in depth profile on "back" of card.
the problem can't cards expand (height wise) fit content. i've tried every "clear fix" find , nothing has worked far. i've created fiddle, check out , you'll see i'm talking about.
how can left-most card fit it's content, , have other 2 match its' size?
(i'm trying keep cards same size having them expand size of largest card)
update: progress! have found out because parent positioned relatively, , child positioned absolutely.
however, puts , front of card together. if position children relatively, div's expand fit content (hooray!) "back" of card shows below "front" of card. (here second fiddle show mean)
any ideas on how overcome this?
<style> /* styles vcard container*/ .vcardcontainer{ display: inline-block; float: left; padding: 5px; margin: 10px; width: 200px; min-height: 250px; position: relative; perspective: 800px; } /* styles vcard whole */ .vcard{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } /* styles apply front , of vcard */ .vcard .vcardfront, .vcard .vcardback{ margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 5px; background: #939393; } /*styles front of vcard*/ .vcard .vcardfront{ border-top: 15px solid ; } /** styles of vcard: (the needs start rotated) */ .vcard .vcardback{ transform: rotatey(180deg); } /* flips entire vcard */ .vcard.flipped{ transform:rotatey(180deg); } <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 555-555-5555</p> <p>email: john.doe@gmail.com</p> <p>street: 555 main street</p> <p>unit number: 33</p> <p>city: new york</p> <p>state: ny</p> <p>zip: 55555</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 270-331-0169</p> <p>email: john.doe@gmail.com</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 270-331-0169</p> <p>email: john.doe@gmail.com</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 270-331-0169</p> <p>email: john.doe@gmail.com</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 270-331-0169</p> <p>email: john.doe@gmail.com</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> jquery(".vcard").click(function(){ jquery(this).toggleclass("flipped"); }); </script>
if want use more code, try this:
$(document).ready(function() { var objheight = 0; var list = []; $('.vcardfront').each(function(i, obj) { objheight = 0; $(this).children().each(function(i, obj) { objheight += $(this).height(); }); list.push(objheight); }); var large = 0; (var = 0; < list.length; i++) { if(large < list[i]){ large = list[i]; } } $('.vcardcontainer').height(large * 2); });document { display: none; } /* styles vcard container*/ .vcardcontainer{ display: inline-block; float: left; padding: 5px; margin: 10px; width: 200px; /*min-height: 250px;*/ position: relative; perspective: 800px; } /* styles vcard whole */ .vcard{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } /* styles apply front , of vcard */ .vcard .vcardfront, .vcard .vcardback{ margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 5px; background: #939393; } /*styles front of vcard*/ .vcard .vcardfront{ border-top: 15px solid ; } /** styles of vcard: (the needs start rotated) */ .vcard .vcardback{ transform: rotatey(180deg); } /* flips entire vcard */ .vcard.flipped{ transform:rotatey(180deg); }<div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 555-555-5555</p> <p>email: john.doe@gmail.com</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 270-331-0169</p> <p>email: john.doe@gmail.com</p> <p>street: 555 main street</p> <p>unit number: 33</p> <p>city: new york</p> <p>state: ny</p> <p>zip: 55555</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 270-331-0169</p> <p>email: john.doe@gmail.com</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab">fsdfsdfsdfsdf</li> <li class="tab">units bought: 4</li> <li class="tab">fsdfsdfsdfsdf</li> <li class="tab">units bought: 4</li> <li class="tab">fsdfsdfsdfsdf</li> <li class="tab">units bought: 4</li> <li class="tab">fsdfsdfsdfsdf</li> </ul> </ul> </div> </div> </div> <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 270-331-0169</p> <p>email: john.doe@gmail.com</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <div class="vcardcontainer"> <div class="vcard"> <div class='vcardfront'> <h3 class="leadname">john doe</h3> <p>phone: 270-331-0169</p> <p>email: john.doe@gmail.com</p> </div> <div class='vcardback hidden'> <h3 class="leadname">info on john doe</h3> <p>sales:</p> <ul> <li class="tab">naturals2go</li> <ul> <li class="tab">units bought: 4</li> <li class="tab"></li> </ul> </ul> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> jquery(".vcard").click(function(){ jquery(this).toggleclass("flipped"); }); </script>
Comments
Post a Comment