Adi Setiawan weblog » Javascript http://ex3me.org blog about website development, trend, technology and personal interest Mon, 14 May 2012 16:09:48 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Check/uncheck checkbox in jQuery 1.6 http://ex3me.org/2011/10/11/check-uncheck-checkbox-in-jquery-1-6/ http://ex3me.org/2011/10/11/check-uncheck-checkbox-in-jquery-1-6/#comments Tue, 11 Oct 2011 09:21:56 +0000 http://ex3me.org/?p=383 Continue reading →]]> Here’s a short snippet to have check/uncheck to all checkbox using jQuery 1.6

3
4
5

$('.checkall').click(function () {
  $(this).parents().find(':checkbox').prop('checked', $(this).prop('checked'));
});

And for HTML

5
6
7
8
9
10

<input type="checkbox" class="checkall" name="checkall" /> Check All
<ul>
  <li><input type="checkbox" value="1" name="id[]" /> One</li>
  <li><input type="checkbox" value="2" name="id[]" /> Two</li>
  <li><input type="checkbox" value="3" name="id[]" /> Three</li>
</ul>

And you obviously want to put the script inside ready function.

]]> http://ex3me.org/2011/10/11/check-uncheck-checkbox-in-jquery-1-6/feed/ 0 Full height column. CSS & jQuery http://ex3me.org/2007/11/07/full-height-column-css-jquery/ http://ex3me.org/2007/11/07/full-height-column-css-jquery/#comments Wed, 07 Nov 2007 08:44:09 +0000 http://ex3me.org/2007/11/07/full-height-column-css-jquery/ Continue reading →]]> Salah satu kelemahan menggunakan div adalah menyamakan tinggi beberapa div untuk kolom serta membuat div tersebut expandable mengikuti tinggi window. Liat screenshot berikut:

tiga kolom sebelum

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:

tiga kolom sesudah

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">
<head>
<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>
<body>
<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 !

]]> http://ex3me.org/2007/11/07/full-height-column-css-jquery/feed/ 2 jQuery zebra list http://ex3me.org/2007/08/12/jquery-zebra-list/ http://ex3me.org/2007/08/12/jquery-zebra-list/#comments Sun, 12 Aug 2007 08:32:12 +0000 http://ex3me.org/2007/08/12/jquery-zebra-list/ Continue reading →]]> Akhir-akhir ini lagi seneng2nya utak-atik jQuery. Penggunaan yg simpel dan mudah membuat banyak orang yg awam di javascript terutama DOM seperti web designer atau hobbyist seperti saya menyukainya. Contoh berikut memperlihatkan bagaimana membuat zebra list dengan mudah dan cepat menggunakan jQuery, unordered list dan sedikit CSS, contoh script diambil dari tutorial di 15 days of jQuery

Demo jQuery zebra list bisa dilihat disini

]]> http://ex3me.org/2007/08/12/jquery-zebra-list/feed/ 0