Sibudi </>

Month: September 2011

  • 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>

  • PHP: Single Quote Vs. Double Quote

    php

    Beda pemakaian single quote (‘) dan double quote (“) pada bahasa PHP adalah:

    1. Pada single quote, parser php akan menganggap seluruh karakter (string) yang dibatasi oleh  single quote adalah benar-benar string, yang tidak perlu diperiksa apakah ada variable / escape character di dalamnya.

    2. Pada double quote, parser php akan memeriksa seluruh isi string, mulai dari karakter pertama sampai habis, untuk mencari kemungkinan adanya variable / escape character yang harus disesuaikan isinya.

    Penjelasan lebih awam beserta contohnya:

    1. Pada single quote, parser PHP menjadi begitu naif, sehingga hampir* semua karakter akan diterjemahkan/ditampilkan secara literal (apa adanya), termasuk variable dan escape character.

    2. Pada double quote, parser PHP lebih cerdas dalam memahami seluruh karakter yang ada di dalamnya, variable akan diterjemahkan menjadi isinya dan mampu menangani escape character.

    Saya menemukan sebuah contoh bagus yang akan menjelaskan perbedaan ini dengan baik:

    $str = 'hello';
echo $str . 'world';
echo "$str world";

    Kedua contoh echo di atas akan menghasilkan keluaran yang sama, yaitu mencetak tulisan “hello world”. Saya yakin kesan pertama yang akan Anda katakan adalah: “Siapa yang peduli dengan perbedaan tersebut? Toh keduanya menghasilkan keluaran yang sama.” Jawabannya adalah:

    Variable parsing di dalam sebuah string membutuhkan lebih banyak memory daripada dengan menggunakan string concatenation (rangkaian/sambungan string). Jadi jika Anda peduli dengan penggunaan memory, pertimbangkan untuk menggunakan operator concatenation (.) daripada variable parsing.

    *Saya katakan hampir karena ada pengeculian untuk mencetak karakter single quote dan backslash di dalam single quote. Untuk mencetak karakter single quote harus menggunakan escape character (\’), sedangkan untuk mencetak karakter backslash menggunakan escape character (\\).

    Pustaka: http://php.net/manual/en/language.types.string.php