Dengan memasukkan tag <meta> penyegar halaman ke dalam tag <noscript>, kode di bawah ini akan mengirim pengunjung ke sebuah halaman yang Saya sebut sebagai no-js-page.html jika JavaScript dinonaktifkan:
Membuat tampilan artikel berbentuk daftar atau grid berdasarkan tombol perintah dengan jQuery Masonry sebagai pembangun grid dan bantuan JavaScript Cookie sebagai pengingat sesi:
Pertanyaan yang seringkali terlintas dalam kepala saat melihat ini adalah, elemen mana yang akan dikenai deklarasi display:block?
CSS Menu navigasi bertingkat
Oke. Pada dasarnya selektor CSS itu memiliki peraturan yang tidak jauh berbeda dengan kode HTML. Yaitu kita diminta untuk membaca dari luar menuju ke dalam, atau sebaliknya, dari dalam menuju ke luar dan bukan membaca dari atas ke bawah atau menyamping seperti saat membaca tulisan.
Katakan saja kita memiliki beberapa elemen <article>, <div> dan <span> yang tersusun seperti ini:
Kita akan memberikan warna merah pada tulisan "Lorem ipsum". Untuk melakukannya caranya sangat mudah. Cukup tuliskan:
span {color:red;}
Begitu saja! Tapi, setelah itu mungkin akan muncul keinginan lain. Misalnya, kita ingin warna merah diterapkan hanya pada teks yang berada di dalam elemen <span> yang berada di dalam .post-body. Untuk membuat selektornya menjadi lebih spesifik, maka kita tuliskan .post-body sebelum span seperti ini:
.post-body span {color:red;}
Kode di atas akan memberi warna merah pada teks yang berada di dalam elemen <span>, dimana elemen <span> tersebut harus berada di dalam elemen <div class="post-body">.
Ingin lebih spesifik lagi? Urutkan selektor CSS yang ditemukan berdasarkan posisi elemen seperti contoh di atas:
article .post-body span {color:red;}
Kesimpulannya adalah, pada dasarnya ketiga selektor di atas memiliki tugas yang sama persis, yaitu memberi warna merah pada teks di dalam elemen <span>. Hanya spesifikasinya saja yang berbeda-beda. Contoh lain:
li {color:blue;}
ul li {color:blue;}
nav li {color:blue;}
nav ul li {color:blue;}
Semua selektor di atas pada dasarnya memiliki target elemen yang sama, yaitu elemen <li>. Tapi, selektor pertama akan memberi warna biru pada semua elemen <li>tanpa terkecuali.
Selektor ke dua akan memberi warna biru pada elemen <li>yang berada di dalam elemen<ul>.
Selektor ke tiga akan memberi warna biru pada elemen <li>yang berada di dalam elemen<nav>.
Selektor ke empat sama dengan selektor ke tiga, hanya saja lebih spesifik. Dia akan memberi warna biru pada elemen <li>yang berada di dalam elemen<ul>, dimana elemen <ul> tersebut berada di dalam elemen<nav>
Dasar-Dasar
Selektor Keturunan (Descendant Selector)
Baru saja Saya jelaskan di atas. Setiap selektor yang datang lebih awal adalah induk elemen dari selektor berikutnya. Selektor terakhir adalah elemen yang akan dikenai perintah. Pada gambar di bawah, terlihat bahwa CSS akan menargetkan semua elemen <div> yang berada di dalam <article>:
Selektor Anak Terdekat (Child Selector)
Terbentuk dari dua atau lebih item selektor CSS yang dipisahkan oleh simbol >, berfungsi untuk menyeleksi anak terdekat dari elemen induk. Pada gambar di bawah, terlihat bahwa CSS akan menargetkan elemen <div> yang menjadi lapisan dalam terdekat dari induk (anak terdekat dari artikel):
Selektor Bersebelahan (Adjacent Sibling Selector)
Terbentuk dari dua atau lebih item selektor CSS yang dipisahkan oleh simbol + atau ~, berfungsi untuk menyeleksi elemen yang berada setelah elemen yang menjadi subjek (selektor pertama).
Simbol + lebih spesifik dibandingkan simbol ~. Pada gambar di bawah, terlihat bahwa CSS akan menargetkan elemen <div> yang berada tepat setelah elemen <article> saat kita menggunakan pemisah berupa simbol + yang kemudian diikuti oleh selektor CSS berupa div, dan akan menyeleksi semua elemen <div> yang ditemukan bersebelahan setelah <article> saat kita menggunakan pemisah berupa simbol ~ yang kemudian diikuti oleh selektor div:
Coba Sendiri
Saya sudah membuat sebuah generator CSS sederhana untuk referensi ini. Cukup ganti selektor CSS sesuka hati berdasarkan contoh-contoh di atas dan lihat elemen mana yang akan dikenai garis batas berwarna merah. Beberapa contoh selektor CSS yang Saya sarankan:
article div {}
article > div {}
article + div {}
article ~ div {}
article .wrap-3 {}
article + div div {}
article ~ div > div {}
article + div > div {}
article .wrap-1 + div {}
Elemen mana yang akan dikenai deklarasi display:block pada gambar pertama?
Ini dia jawabannya:
CSS akan memberikan deklarasi display:block pada elemen <ul> yang berada tepat setelah elemen <a> yang terfokus (baru saja diklik), dimana elemen <a> terfokus tersebut berada di dalam elemen <li> yang berada di dalam elemen <ul> yang berada di dalam elemen <li> yang berada di dalam elemen <ul> yang berada di dalam elemen <li> yang berada di dalam elemen <ul> yang berada di dalam elemen <nav>, dimana elemen <nav> tersebut berada di dalam suatu elemen yang memiliki id="main"Kode CSS menu navigasi bertingkat untuk perangkat non-hover seperti Tablet PC :)
.each() digunakan untuk menjalankan fungsi pada beberapa elemen sekaligus. Biasanya digunakan untuk menangani elemen-elemen yang sama namun memiliki simpanan data yang berbeda. Data yang paling umum diambil dari elemen tentunya adalah atribut dan konten elemen itu sendiri. Sebagai contoh, di sini Saya akan menerapkan warna latar yang berbeda pada masing-masing elemen berdasarkan nilai kelas pada elemen tersebut:
Padahal yang kita inginkan adalah masing-masing elemen akan dikenai warna sesuai dengan nilai kelasnya.
.each() bisa kita gunakan untuk merayapi masing-masing elemen terlebih dahulu sebelum pada akhirnya kita bisa mengambil data di dalamnya untuk diterapkan sesuai keinginan tanpa harus mempengaruhi keadaan elemen sejenis yang lain:
$('div').each(function() {
var color = $(this).attr('class');
$(this).css('background-color', color);
});
StickyBar is a jQuery plugin to make the element keep stayed in the visible area when the page is being scrolled.
StickyBar jQuery Plugin
StickyBar adalah plugin jQuery untuk membuat elemen selalu berada pada tempat yang terlihat. Anda mungkin pernah melihat plugin semacam ini di luar sana. Jenisnya memang ada banyak, tapi mereka memiliki beberapa keterbatasan dalam segi opsi dan keamanan. Di sini Saya telah memberikan opsi-opsi penting tambahan yang lebih lengkap dan juga mencoba untuk menerapkan metode yang lebih aman:
Sebagian besar plugin sejenis hanya menerapkan posisi fixed pada elemen ketika elemen telah mencapai batas akhir area terlihat pada layar dan melepaskan posisinya jika elemen telah berada pada posisi awal. Bisa dilihat pada salah satu potongan kode yang pernah Saya catat di sini.
Padahal, menerapkan posisi fixed secara mendadak pada elemen bisa menyebabkan struktur elemen di sekelilingnya menjadi rusak/berantakan disebabkan ruangan tempat elemen yang menjadi target telah kosong.
Ini terjadi karena perpindahan posisi elemen termanipulasi secara mendadak dari posisi static yang memakan ruang menjadi posisi fixed yang tidak memakan ruang.
Saat elemen termanipulasi berubah menjadi fixed, maka elemen-elemen di sekelilingnya akan berloncatan berusaha menutupi kekosongan. Selain itu, posisi elemen static yang berubah menjadi fixed juga akan mengalami perubahan posisi dalam segi koordinat (terutama posisi atas dan kiri) sehingga kita akan membutuhkan lebih banyak perhitungan untuk itu. Intinya: terlalu rumit!
Lalu bagaimana kita bisa mengubah posisi elemen menjadi melayang tanpa harus menghilangkan ruang asal elemen? Caranya adalah dengan memperbaharui nilai top secara terus-menerus berdasarkan jarak gulungan layar. Cara ini akan membuat elemen seolah-olah melayang:
Metode yang sama juga Saya pakai untuk menciptakan plugin ini. Keuntungannya, kita tidak perlu khawatir dengan keadaan posisi elemen di sekitar target jika target telah mengalami manipulasi, karena di sini plugin akan memanipulasi posisi elemen dengan tetap menjaga jenis posisinya sebagai posisi relative, sehingga betatapun jauh elemen berpindah dari elemen-elemen lain, dia tidak akan mengganggu posisi elemen yang lain dan tidak akan mengosongkan ruang asalnya. (Ingat: top, right, bottom dan left berbeda dengan margin-top, margin-right, margin-bottom dan margin-left).
Pembaharuan: Saya memutuskan untuk menggunakan posisi fixed asli pada plugin ini karena beberapa kekurangan yang terjadi, namun tetap mempertahankan posisi fixed palsu untuk opsi StickyBar dengan efek animasi.
Konfigurasi Plugin StickyBar
Letakkan jQuery, plugin StickyBar dan kode eksekusi di atas </head> dengan susunan seperti ini, dan selesai sudah:
Digunakan untuk menentukan jarak atas elemen melayang (sticky element)
bottom
Digunakan untuk menentukan jarak bawah elemen termanipulasi terhadap elemen penghenti. Secara umum tidak terlalu penting, jadi abaikan saja jika tidak perlu.
animated
Jika bernilai true, elemen akan melayang dengan efek animasi. Demonya bisa dilihat di sini
speed
Digunakan untuk menentukan kecepatan animasi jika opsi animated bernilai true
easing
Digunakan untuk menentukan tipe easing jQuery. Demonya bisa dilihat di sini. Saya memakai tipe easing "easeOutElastic"
until
Digunakan untuk menentukan elemen penghenti posisi melayang pada elemen termanipulasi. Sehingga jika elemen melayang telah menyentuh elemen penghenti, maka elemen tersebut akan berhenti melayang. Jika bingung Anda bisa melihat contoh penerapannya di sini
fixedClass
Digunakan untuk menentukan nama kelas elemen termanipulasi saat elemen tersebut berada dalam kondisi fixed.
stoppedClass
Digunakan untuk menentukan nama kelas elemen termanipulasi saat elemen tersebut terhenti karena suatu elemen penghenti di bawahnya.
onFixed
Callback fungsi yang akan dijalankan jika elemen termanipulasi berada dalam kondisi fixed.
onStatic
Callback fungsi yang akan dijalankan jika elemen termanipulasi kembali pada posisi normal.
onStopped
Callback fungsi yang akan dijalankan jika elemen termanipulasi terhenti karena suatu elemen penghenti di bawahnya.
Dua Macam Kelas Baru
Dua macam kelas baru akan diterapkan pada elemen yang dimanipulasi berdasarkan keadaannya, yaitu kelas isFixed dan isStopped. Anda bisa menggunakan kelas-kelas tersebut untuk membedakan tampilan elemen saat berada dalam keadaan normal, keadaan melayang atau dalam keadaan terhenti oleh elemen penghenti melalui CSS:
.isFixed {
/* Kode CSS tampilan elemen melayang... */
}
.isStopped {
/* Kode CSS tampilan elemen terhenti... */
}
Atau, Anda juga bisa menentukan sendiri nama kelas-kelas tersebut melalui opsi fixedClass dan stoppedClass:
Kode ini dibuat berdasarkan efek plugin jQuery WayPoints, meskipun Saya tidak tahu apakah plugin WayPoints berisi seperti ini atau tidak. Di sini Saya cuma mengambil ciri khasnya yang menarik: Setiap item navigasi terkait akan berubah warna saat seksi yang menjadi tujuannya mencapai tempat yang tepat.
Markupnya cuma terdiri dari sebuah elemen <nav> dan beberapa elemen <section> dengan ID yang ditentukan berdasarkan hash pada masing-masing tautan:
Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat
Kode ini digunakan untuk mengeksekusi suatu perintah jika elemen telah mencapai area terlihat pada layar. Semacam prinsip yang biasanya digunakan pada plugin-plugin lazyLoader gambar dan infiniteScroll:
