Sibudi </>

Tag: Snippet

Catatan Sibudi

  • Tab Sederhana dengan jQuery

    simple tab

    Keuntungan yang didapat dengan membuat sebuah navigasi tab dengan jQuery adalah halaman tidak perlu dimuat ulang hanya untuk berganti tab yang aktif. Kenapa hal itu bisa terjadi? Karena sebenarnya semua halaman yang ada di seluruh tab sudah dimuat sejak pertama kali kita membuka web. Teknik ini yang dipakai untuk bizcard saya. Berikut ini adalah kode jQuery yang digunakan.

    $(document).ready(function() {
  $('#tab1').fadeIn('slow');
  $('ul#nav li a').click(function() {
    $('ul#nav li a').removeClass('aktif');
    $(this).addClass("aktif");
    $('.tab_konten').hide();
    var aktif = $(this).attr('href');
    $(aktif).fadeIn('slow');
    return false;
  });
});

    Sedangkan ini adalah HTML-nya.

    <ul id="nav"><!-- navigasi -->
  <li><a href="#tab1" class="about aktif"><span>About Me</span></a></li>
  <li><a href="#tab2" class="network"><span>Networks</span></a></li>
  <li><a href="#tab3" class="contact"><span>Contact</span></a></li>
</ul>
 
<div id="konten"><!-- mulai konten -->
  <div style="display: none;" id="tab1" class="tab_konten">
    <!-- konten #tab1 -->
  </div>
  <div style="display: none;" id="tab2" class="tab_konten">
    <!-- konten #tab2 -->
  </div>
  <div style="display: none;" id="tab3" class="tab_konten">
    <!-- konten #tab3 -->
  </div>
</div>

    Penjelasannya adalah sebagai berikut. Pada kondisi awal, ketiga tab dalam posisi tidak aktif (style=”display: none;”). Kemudian pada saat halaman web dimuat pertama kali, #tab1 diaktifkan (lihat baris ke-2 kode JavaScript) dengan efek fade in, sekaligus menampilkan isinya.

    Berikutnya adalah ketika ada sebuah tab yang diklik, semua class=”aktif” dihilangkan kecuali pada tab yang dipilih (baris ke-4 dan ke-5 kode JavaScript). Begitu pula dengan isinya, semua disembunyikan kecuali tab yang dipilih.

    Bagaimana cara untuk menemukan tab yang aktif? Cari attribute href pada class yang aktif, value-nya menunjukkan mana tab yang harus ditampilkan (baris ke-7 dan ke-8 kode JavaScript).

    Catatan ini disadur dan ditulis ulang dengan modifikasi seperlunya dari blog ini. Gambar juga diambil dari situ.

  • Multiple File Upload dengan PHP dan HTML5

    Multiple upload HTML5
    Jika kita ingin melakukan upload lebih dari satu file, biasanya akan menggunakan kode HTML sebagai berikut:

    <form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="berkas&#91;&#93;" />
  <input type="file" name="berkas&#91;&#93;" />
  <input type="submit" value="Upload" />
</form>

    Kelemahannya adalah kita harus menekan tombol browse sebanyak jumlah file yang ingin di-upload. Selain itu membutuhkan bantuan Javascript jika diinginkan fasilitas untuk penambahan field upload.

    Melanjutkan catatan file upload yang lalu, kali ini adalah tentang mengunggah (upload) banyak berkas (file) dengan PHP dan HTML5. Ternyata HTML5 sudah mampu mengunggah banyak file sekaligus tanpa bantuan Javascript, hanya dengan sebuah form <input type=’file’>. Namun ada 2 hal yang membedakan dengan file upload biasa, pertama pada attribute name, yaitu di belakangnya ditambahkan tanda kurung kotak “[ ]” yang akan menyebabkan PHP memperlakukannya sebagai sebuah array. Perbedaan yang kedua yaitu adanya attribute multiple, yang baru diperkenalkan pada HTML5.

    <form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="berkas2&#91;&#93;" />
  <input type="submit" value="Upload" />
</form>

    Jika kita coba tampilkan di layar menggunakan perintah print_r($_FILES) (baca catatan file upload yang lalu) maka hasilnya adalah kurang lebih sebagai berikut:

    Array
(
    [berkas2] => Array
        (
            [name] => Array
                (
                    [0] => 125586922.jpg
                    [1] => afpheh5e.jpg
                    [2] => baby nirvana.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                    [1] => image/jpeg
                    [2] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/phpuBSQsq
                    [1] => /tmp/phpOJajKX
                    [2] => /tmp/phpW93N1u
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                    [2] => 0
                )

            [size] => Array
                (
                    [0] => 91835
                    [1] => 41895
                    [2] => 36404
                )

        )

)

    Sekarang kita punya array multidimensi yang bentuknya sedikit aneh karena alih-alih dikelompokkan berdasarkan indeks 0, 1, 2, dst melainkan indeks name, type, tmp_name, dst. Menggunakan operator foreach kita bisa membagi file menurut indeks numeriknya tanpa harus melakukan transformasi array yang rumit.

    foreach($_FILES['berkas2']['tmp_name'] as $key => $tmp_name) {
  move_uploaded_file($tmp_name, "uploads/{$_FILES['berkas2']['name'][$key]}");
}

    Kini mengunggah banyak file sekaligus jadi lebih mudah, tekan tombol ctrl pada keyboard atau cukup drag mouse untuk memilih file-file yang ingin di-upload. Berikut ini adalah kode sumber lengkapnya:

    <!DOCTYPE html>
<html>
  <head>
    <title>upload 1 file</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <form action="" method="post" enctype="multipart/form-data">
        <p>
          <input type="file" name="berkas2&#91;&#93;" multiple="multiple" />
          <input type="submit" value="Upload" />
        </p>
      </form>
    </div>
  </body>
</html>
 
<pre>
<?php
  if(isset($_FILES&#91;'berkas2'&#93;)) {
    foreach($_FILES&#91;'berkas2'&#93;&#91;'tmp_name'&#93; as $key => $tmp_name) {
      move_uploaded_file($tmp_name, "uploads/{$_FILES['berkas2']['name'][$key]}");
    }
  }
?>

  • Mengubah Element Position secara Dinamis dengan jQuery

    jQuery fixed-element behavior
    Baru-baru ini situs jejaring sosial Facebook menambah sebuah widget kecil di sebelah kanan atas pada halaman Home masing-masing user, yang berisi aktifitas terbaru dari teman-teman kita. Uniknya, ketika saya menggulir halaman ke bawah, alih-alih menghilang dari layar monitor, widget tersebut malah menempel pada menu bar biru yang menjadi ciri khas Facebook.

    Meskipun beberapa orang menganggap fitur tersebut tidak penting, tapi efek yang dihasilkannya sangat keren. Sebenarnya saya pernah menggunakan efek seperti itu pada beberapa proyek dengan bantuan jQuery. Di bawah ini adalah kode yang saya gunakan untuk menghasilkan efek tersebut.

    $(document).ready(function() {
 
  var menu = $("#menu");
  var menuOriTop = menu.offset().top;
  var view = $(window);
 
  view.bind("scroll resize", function(){
 
    var menuViewTop = view.scrollTop();
    if ((menuViewTop > menuOriTop) && !menu.is(".menu-fixed")){
 
      menu.removeClass("menu-absolute").addClass("menu-fixed");
    }
 
    else if ((menuViewTop <= menuOriTop) && menu.is(".menu-fixed")){
 
      menu.removeClass("menu-fixed").addClass("menu-absolute");
    }
  });
});
&#91;/code&#93;
Penjelasannya, kode <strong>jQuery</strong> di atas akan memeriksa apakah elemen menu telah digulir melewati batas atas mula-mula, jika sudah melewati, maka atribut <em>position</em> dari elemen menu akan diubah menjadi <em>fix</em>. Sebaliknya, jika elemen menu kurang dari batas atas mula-mula, maka atribut <em>position</em> akan diubah menjadi <em>absolute</em>.

Untuk lebih memahami, akan saya berikan kode HTML dan CSS sederhana. Semoga cukup untuk menambah koleksi potongan kode Anda ;)
[code lang="js" htmlscript="true"]
<!DOCTYPE HTML>
<html>
<head>
<title>Float Menu</title>
<style type="text/css">
  #header { height: 200px; width:800px; background-color: #3333FF; }
  .sidebar { float: left; width: 110px; border: 1px solid #e6e6e6; }
  .content { float: left; height: 2000px; width: 690px; margin-right:10px; background-color:#00FF00 }
  #menu { width:100px; height:200px; background-color: #F0F0F0; }
  div.menu-absolute {	position: absolute; top: 210px; }
  div.menu-fixed { solid #E0E0E0;	top: 10px; position: fixed; }
  .footer { clear: both; width: 800px; background-color:#FF3399 }
 
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 
  var menu = $("#menu");
  var menuOriTop = menu.offset().top;
  var view = $(window);
 
  view.bind("scroll resize", function(){
 
    var menuViewTop = view.scrollTop();
    if ((menuViewTop > menuOriTop) && !menu.is(".menu-fixed")){
 
      menu.removeClass("menu-absolute").addClass("menu-fixed");
    }
 
    else if ((menuViewTop <= menuOriTop) && menu.is(".menu-fixed")){
 
      menu.removeClass("menu-fixed").addClass("menu-absolute");
    }
  });
});
 
</script>
</head>
<body>
  <div id="header">Header</div>
  <div class="content">content here</div>
  <div class="sidebar">
  <div id="menu" class="menu-absolute">Menu Float</div>
  </div>
  <div class="footer">footer</div>
</body>
</html>