You Now Here »

Tutorial Javascript float left CSS auto height dynamic with jquery resizing  (Read 2070 times - 78 votes) 

DANNY

G-Plus Author
  • ADMINISTRATOR
  • More Share Forum Topic
  • [MS] kepala suku
  • *
  • DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!
  • Rep Power: 6
  • Join: September 30, 2009
  • Posts: 11,931
  • Poin: 194.174
    • WWW
  • IP member tracker Logged


Sekedar berbagi ilmu lagi, masalah kali ini kita akan membahas mengenai auto height dalam posisi css float left. dalam beberapa kasus float left akan mendapatkan posisi tinggi style tag berbeda-beda tergantung isi konten didalamnya, lalu bagaimana kita akan mensejajarkan agar float left ini menghasilkan tinggi yang sama?

oke langsung saja simak code berikut

Code: [Select]
<style>
div.left {
    background: #666;
    position: absolute;
    min-height: 400px;
    width: 49%;
}
div.right{
    background: #000;
    min-height: 533px;
    width: 50%;
    float: right;
}
</style>

<script>
   $(document).ready(function(){
        var high = $(".right").height();
        $(".left").height(high);
    });
</script>

<div id="body">
    <div class="left">&nbsp;</div>
    <div class="right">&nbsp;</div>
</div>


Script diatas mampu berjalan dengan bantuan plugin javascript jquery! rumus diatas akan melakukan panggilan javascript untuk mendapatkan berapa tinggi tag div sebelah kanan dan disimulasikan pada float left sebelah kiri sehingga div tag left sebelah kiri akan memiliki tinggi dinamis sesuai tinggi sebelah kanan.

dimengerti kah?
silakan anda kustom sendiri

regards
moreshare
  :cool


View Mobile Web Short URL: