jquery - In mobile view we want to display div bottom of each div -
in desktop view, output proper in mobile view want generate each div has own description.
now problem description display after 4 elements , want display bottom of each div in mobile view.
anyone me of jquery. trying use offset , height of jquery not work.
$(".trust-datail").hide(); $(".trust-wrap").each(function (i) { $(this).attr('id', +i); }); $(".trust-datail").each(function (i) { $(this).addclass("tab_" + i); }); $(".trust-wrap").click(function () { $(".trust-datail").slideup(); var id = $(this).attr('id'); if ($(".tab_" + id).is(':visible')) { $(".tab_" + id).slideup(); } else { $(".tab_" + id).slidedown(); } }); $(".close-new").click(function () { $(this).parent(".trust-datail").slideup(); });.trust-wrap { border-radius: 5px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); margin-bottom: 30px; text-align: center; transition: 0.2s ease 0s; } .trust-wrap img { border-top-left-radius: 5px; border-top-right-radius: 5px; margin:0 auto; } .trust-wrap h4 { font-weight: bold; margin: 25px 0; font-size:15px; } .trust-datail { background: #000; border-radius: 5px; margin: auto auto 50px; padding: 20px; position: relative; width: 100%; } .close-new { cursor: pointer; position: absolute; right: 20px; text-align: right; } .trust-datail h5 { color: #fff; font-size: 18px; font-weight: bold; margin: 0 0 15px; } .trust-datail p { color: #fff; margin: 0; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="member_wrap"> <div class="member_box"> <div class="row"> <div class="col-sm-3 chand"> <div class="trust-wrap" id="8"> <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive"> <h4>lorem ipsum1</h4> <div class="clearfix"></div> </div> </div> <div class="col-sm-3 chand"> <div class="trust-wrap" id="9"> <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive"> <h4>lorem ipsum2</h4> <div class="clearfix"></div> </div> </div> <div class="col-sm-3 chand"> <div class="trust-wrap" id="10"> <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive"> <h4>lorem ipsum3</h4> <div class="clearfix"></div> </div> </div> <div class="col-sm-3 chand"> <div class="trust-wrap" id="11"> <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive"> <h4>lorem ipsum4</h4> <div class="clearfix"></div> </div> </div> </div> </div> <div class="trust-datail tab_8" style="display: none;"> <div class="close-new"> <img src="images/close-new.png"> </div> <h5>lorem ipsum1</h5> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries</p> </div> <div class="trust-datail tab_9" style="display: none;"> <div class="close-new"> <img src="images/close-new.png"> </div> <h5>lorem ipsum2</h5> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries</p> </div> <div class="trust-datail tab_10" style="display: none;"> <div class="close-new"> <img src="images/close-new.png"> </div> <h5>lorem ipsum3</h5> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries</p> </div> <div class="trust-datail tab_11" style="display: none;"> <div class="close-new"> <img src="images/close-new.png"> </div> <h5>lorem ipsum4</h5> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries</p> </div> </div> </div>
updated answer you
this work you.
what did made function , called in $(window).load , $(window).resize -
var clonefun = function() { if ($(window).width() <= 420) { $(".trust-datail").each(function(i) { var clonid = "#" + i, clon = $(this).clone(); $(clonid).find('.clearfix').before(clon); $(this).addclass('mob-none'); }); } else { $(".trust-datail").removeclass('mob-none'); } }; $(window).load(function() { clonefun(); }); $(window).resize(function() { clonefun(); }); this function checks window size , if it's below 420px makes clone of div , paste inside .trust-wrap
and use .mob-none hide details in mobile view.
$(".trust-datail").hide(); $(".trust-wrap").each(function(i) { $(this).attr('id', +i); }); $(".trust-datail").each(function(i) { $(this).addclass("tab_" + i); }); $(".trust-wrap").click(function() { $(".trust-datail").slideup(); var id = $(this).attr('id'); if ($(".tab_" + id).is(':visible')) { $(".tab_" + id).slideup(); } else { $(".tab_" + id).slidedown(); } }); $(".close-new").click(function() { $(this).parent(".trust-datail").slideup(); }); var clonefun = function() { if ($(window).width() <= 420) { $(".trust-datail").each(function(i) { var clonid = "#" + i, clon = $(this).clone(); $(clonid).find('.clearfix').before(clon); $(this).addclass('mob-none'); }); } else { $(".trust-datail").removeclass('mob-none'); } }; $(window).load(function() { clonefun(); }); $(window).resize(function() { clonefun(); });.trust-wrap { border-radius: 5px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); margin-bottom: 30px; text-align: center; transition: 0.2s ease 0s; } .trust-wrap img { border-top-left-radius: 5px; border-top-right-radius: 5px; margin: 0 auto; } .trust-wrap h4 { font-weight: bold; margin: 25px 0; font-size: 15px; } .trust-datail { background: #000; border-radius: 5px; margin: auto auto 50px; padding: 20px; position: relative; width: 100%; } .close-new { cursor: pointer; position: absolute; right: 20px; text-align: right; } .trust-datail h5 { color: #fff; font-size: 18px; font-weight: bold; margin: 0 0 15px; } .trust-datail p { color: #fff; margin: 0; } .mob-none { display: none !important; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="member_wrap"> <div class="member_box"> <div class="row"> <div class="col-sm-3 chand"> <div class="trust-wrap" id="8"> <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive"> <h4>lorem ipsum1</h4> <div class="clearfix"></div> </div> </div> <div class="col-sm-3 chand"> <div class="trust-wrap" id="9"> <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive"> <h4>lorem ipsum2</h4> <div class="clearfix"></div> </div> </div> <div class="col-sm-3 chand"> <div class="trust-wrap" id="10"> <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive"> <h4>lorem ipsum3</h4> <div class="clearfix"></div> </div> </div> <div class="col-sm-3 chand"> <div class="trust-wrap" id="11"> <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive"> <h4>lorem ipsum4</h4> <div class="clearfix"></div> </div> </div> </div> </div> <div class="trust-datail tab_8" style="display: none;"> <div class="close-new"> <img src="images/close-new.png"> </div> <h5>lorem ipsum1</h5> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries</p> </div> <div class="trust-datail tab_9" style="display: none;"> <div class="close-new"> <img src="images/close-new.png"> </div> <h5>lorem ipsum2</h5> <p> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries</p> </div> <div class="trust-datail tab_10" style="display: none;"> <div class="close-new"> <img src="images/close-new.png"> </div> <h5>lorem ipsum3</h5> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries</p> </div> <div class="trust-datail tab_11" style="display: none;"> <div class="close-new"> <img src="images/close-new.png"> </div> <h5>lorem ipsum4</h5> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries</p> </div> </div> </div>i have put discriptions you, hope helpfull you. if there else please ask me.
Comments
Post a Comment