Salah satu kelemahan menggunakan div adalah menyamakan tinggi beberapa div untuk kolom serta membuat div tersebut expandable mengikuti tinggi window. Liat screenshot berikut:
Secara default tinggi div kolom berbeda-beda mengikuti isi dari div tersebut. Belum lagi jika tinggi dari div kurang dari ukuran window browser sehingga footer tampak seperti melayang diatas. Ada beberapa teknik tertentu untuk membuat tinggi kolom tampak sama antara lain menggunakan cara faux column. Kali ini kita akan membuat agar semua kolom mempunyai tinggi sama dan jika kurang dari tinggi window browser maka secara otomatis akan menyamakan-nya. Yg kita perlukan adalah jQuery, plugin equalizeCols dan sedikit teknik css. Hasil akhir akan seperti ini:
berikut html & css-nya
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<script type="text/javascript" src="jquery.js"></script>
-
<script type="text/javascript" src="jquery.equalizecols.js"></script>
-
<style type="text/css">
-
<!--
-
#header {
-
height:100px;
-
clear:both;
-
color:green;
-
}
-
#wrapper {
-
float:left;
-
}
-
#sidebar {
-
float:left;
-
width:200px;
-
color:red;
-
}
-
#contentbar {
-
float:left;
-
width:400px;
-
color:yellow;
-
}
-
#otherbar {
-
float:left;
-
width:200px;
-
color:blue;
-
}
-
#footer {
-
clear:both;
-
height:30px;
-
color:green;
-
}
-
-->
-
</style>
-
<script type="text/javascript">
-
$(document).ready(function() {
-
if ($(window).height()> $('body').height()) {
-
var selisih = $(window).height() - $('body').height();
-
$("#wrapper").height($("#wrapper").height() + selisih);
-
$("#sidebar").height($("#wrapper").height());
-
$("#otherbar").height($("#wrapper").height());
-
} else {
-
$("#wrapper, #sidebar, #otherbar, #contentbar").equalizeCols();
-
}
-
});
-
</script>
-
</head>
-
<div id="header">
-
this is header
-
</div>
-
<div id="wrapper">
-
<div id="sidebar">
-
left column
-
</div>
-
<div id="contentbar">
-
main content
-
</div>
-
<div id="otherbar">
-
right column
-
</div>
-
</div>
-
<div id="footer">
-
copyright info
-
</div>
-
</body>
-
</html>
tidak ada yg spesial di css tersebut kecuali penggunaan float:left pada wrapper. Hal ini dilakukan agar wrapper mengikuti tinggi dari div yg paling tinggi. Pastikan juga jquery dan plugin equalizeCols sudah didownload dan path sudah benar. Sekarang kita bahas sedikit kode javascript diatas.
Seluruh kode ada didalam
-
$(document).ready(function() {
-
-
});
agar semua berjalan saat document ready. Kemudian kita cek apakah tinggi dari window browser lebih besar dari tinggi body halaman menggunakan:
-
if ($(window).height()> $('body').height()) {
-
-
}
Jika ya maka kita akan menambahkan tinggi wrapper dengan selisih dari tinggi window browser dan body halaman. Untuk mendapatkan tinggi dari element di jquery cukup menggunakan $(element).height(); dalam hal ini
-
var selisih = $(window).height() - $('body').height();
-
$("#wrapper").height($("#wrapper").height() + selisih);
-
$("#sidebar").height($("#wrapper").height());
-
$("#otherbar").height($("#wrapper").height());
perhatikan bagaimana kita merubah tinggi dari wrapper dengan mudah dengan memasukkan nilai kedalam atribut height() dari wrapper. Terakhir jika ternyata tinggi body halaman lebih besar atau sama dengan tinggi window browser kita menggunakan plugin dari jquery yg berguna untuk menyamakan tinggi dari beberapa div dengan mudah dengan perintah:
-
$("#wrapper, #sidebar, #otherbar, #contentbar").equalizeCols();
Detail plugin tersebut bisa diliat disini.
Mudah kan? Jika tanpa jQuery, mungkin kode javascript-nya bisa berpuluh2 baris. Menggunakan jQuery, hidup kita jadi lebih mudah
happy jQuerying !
Binun Om… (*garuk2 kepala*)
Tanpa Jscript dan Image bisa gak? Soalnya gak suka javascript ni
bingung juga mas aku…
[quote comment=""]bingung juga mas aku… :P[/quote]
[quote comment="1115"]Binun Om… (*garuk2 kepala*)[/quote]
yg nulis aja bingung kok
[quote comment="1128"]Tanpa Jscript dan Image bisa gak? Soalnya gak suka javascript ni[/quote]
kalo gak suka jgn dipacarin
becanda…
bermanfaat banget, langsung saya pakai
terimakasih bro!
Permisi Tuan Guru…. Ilmunya mau langsung saya coba… Sekalian mo nanya nih, kalu PHP itu makluk apaan yah , dan kodenya bagaimana?