Home > Menengah > Web Desain > Tutorial Javascript > Menyamakan Tinggi Kolom DIV yang Berbeda dengan JQuery

.

Tidak ada komentar BYAdmin Ilmuwebsite

Bagi seorang web designer, tampilan merupakan hal nomor satu yang harus diperhatikan. Bukan hanya karena seorang web designer di bayar untuk itu semua, namun seorang web designer pun bertanggung jawab bagaimana mendatangkan visitor yang banyak karena ketertarikan visitor akan interface website yang begitu ringan, akses yang cepat, menarik enak dipandang, dinamis, dan harmonis. Harmonis… ya harmonis… memang terdengar seperti rumah tangga. Tapi sekali lagi, web designer lah yang memiliki tanggung jawab bagus tidaknya suatu tampilan, bukan yang lain.
Masih dalam poin pembahasan yang sama, disini penulis akan coba membawakan satu buat tutorial css memanfaatkan jquery, bagaimana menyamakan tinggi atau height dari beberapa div berbeda kolom. Sebenarnya apa sih maksud yang ingin disampaikan penulis? Baik-baik, penulis akan coba Ilustrasikan.

Misalkan anda membuat tampilan sebuah interface dengan 3 kolom seperti ini, dengan letak div yang berbeda, artinya div body itu berada diluar dari sidebar,.

apabila content itu diisi, maka terlihat seperti ini …

di sini terlihat div contentnya panjang, sedangkan sidebarnya tetap pendek, bagi beberapa desain hal ini tidak bermasalah, namun bagaimana jika seorang webdesigner ingin memanfaatkan border, desain ini terlihat aneh, karena sidebar terlihat terpotong, tidak sampai ke bawah.

begitu juga jika ketika contentnya itu berisi sedikit, misalnya hanya terdiri satu atau dua kalimat, sedangkan sidebarnya itu panjang ke bawah penuh dengan menu atau iklan, seperti ini …

hal ini terlihat jelek bukan, membuat desain menjadi aneh, apalagi jika sidebarnya itu menggunakan style float:left; benar-benar merusak desain. Desain yang rusak seperti ini pun akan anda temui jika anda meletakkan content didalam sidebar, sidebar yang panjang tidak mempengaruhi kepada content, seperti gambar di bawah ini …

content tidak memiliki tinggi yang sama dengan sidebar

sedangkan semua designer menginginkan kondisi sidebar dan content yang sama tingginya, meskipun div nya itu berbeda, artinya satu div tidak berada didalam div lainnya, dan hasilnya adalah div nya memiliki tinggi yang sama. Seperti pada gambar ini :

Bagaimana melakukan ini semua?? Sebenarnya hal ini bisa di manipulasi oleh JQuery, JQuery memungkinkan perubahan height/tinggi dari suatu div itu bisa dikontrol menggunakan script.

Misalkan struktur dari layoutnya seperti ini


<div id=”wrap”>
<div id=”sidebarkanan”></div>
<div id=”content”>div>
</div>

anda cukup menyisipkan jquery di bagian header


<head>
<script src=”jquery-1.4.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
if ($(‘#content’).height() >= $(‘#sidebarkanan’).height())? {
$(‘#sidebarkanan’).height($(‘#content’).height());
} else {
$(‘#content’).height($(‘#sidebarkanan’).height());
}
});
</script>

Contoh implementasi dari script di atas, bisa anda lihat disini. Script racikan penulis ini bisa anda kembangkan lagi, atau mungkin anda memiliki script yang lebih baik, silahkan gunakan.

Apa yang sebenarnya terjadi pada script tersebut? Ketika div content lebih tinggi dari sidebar, maka lakukan penyamaan tinggi, begitu juga ketika sidebar lebih tinggi dari content maka samakan tingginya. Cukup mudah bukan??

Silahkan download script di sini

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



No Responses

eXTReMe Tracker