Mode layar penuh. Saya membuat sebuah aplikasi/widget kecil untuk membuat posting di blog menjadi memiliki alternatif tampilan “layar penuh”. Tidak benar-benar layar penuh sebenarnya, karena widget ini hanya bekerja dengan cara menyisipkan tabir baru berisi duplikat judul dan konten posting. Kalau Anda ingin membuat fitur full screen sungguhan yang bisa memenuhi seluruh layar, Anda bisa mempelajari API JavaScript ini ⇒ MDN – Using Full Screen Mode
Selektor elemen HTML dimana di dalamnya berisi teks judul. Di atas Saya menggunakan selektor document.querySelector('.post-title') untuk memperoleh teks judul dari dalam elemen <h3 class='post-title'></h3>. Sebagai alternatif, Anda bisa mencoba untuk menggunakan selektor document.title untuk memperoleh judul dari address bar.
contentSource
Selektor elemen HTML dimana di dalamnya terdapat konten artikel/posting. Pengaturannya sama persis dengan opsi titleSource.
background
Digunakan untuk menentukan warna latar tabir layar penuh.
color
Digunakan untuk menentukan warna teks mode layar penuh. inherit artinya warna menyesuaikan dengan warna teks posting.
fontSize
Digunakan untuk menentukan besar teks di artikel layar penuh.
padding
Digunakan untuk menentukan padding tabir layar penuh.
maxWidth
Digunakan untuk menentukan lebar maksimal area artikel layar penuh.
openText
Digunakan untuk menentukan teks tombol pemicu layar penuh.
closeText
Digunakan untuk menentukan teks tombol penutup tampilan layar penuh.
createButton
Digunakan untuk membuat tombol kustom. Lihat penjelasan di bawah.
appendButtonTo
Nilai berupa selektor elemen HTML. Jika nilainya null, tombol akan secara otomatis disisipkan di bawah posting. Jika nilainya false, tombol tidak akan disisipkan secara otomatis (bermanfaat jika Anda ingin membuat tombol pemicu tersendiri secara terpisah).
beforeInit
Lihat penjelasan di bawah.
afterInit
Lihat penjelasan di bawah.
Penjelasan Ekstra
createButton
Opsi ini digunakan sebagai alternatif jika Anda tidak suka dengan tampilan tombol pemicu layar penuh secara normal. Anda bisa memanfaatkan opsi ini untuk menentukan/membuat elemen tombol kustom. Sebagai contoh di sini Saya menggunakan elemen tautan sebagai tombol:
var buttonMarkup = document.createElement('a');
buttonMarkup.className = "custom-button";
buttonMarkup.style.display = "block";
buttonMarkup.style.marginTop = "20px";
postFullScreen({
openText: "Layar Penuh!",
createButton: buttonMarkup
});
/*
akan menghasilkan ini:
<a class="custom-button" style="display:block;margin-top:20px;">Layar Penuh!</a>
*/
Atau Anda juga bisa menentukan nilainya sebagai objek yang sudah ada. Sebagai contoh Anda membuat tombol pemicu secara manual di tempat tertentu, misalnya di sidebar:
Jangan lupa untuk mengatur opsi appendButtonTo menjadi false karena jika tidak tombol tersebut mungkin akan berpindah tempat. Secara umum akan berpindah ke bagian akhir posting:
Opsi ini digunakan untuk menentukan ke mana tombol pemicu tampilan layar penuh akan disisipkan. Berikut ini adalah sebuah contoh jika Anda ingin menyisipkan tombol pemicu layar penuh di dalam elemen #button-container:
Ini adalah opsi untuk membuat fungsi bebas yang akan tereksekusi sebelum (untuk beforeInit) dan sesudah (untuk afterInit) markup tabir tersisip ke blog. Yang paling berguna adalah beforeInit. Fungsi ini bisa Anda gunakan untuk memastikan bahwa manipulasi konten posting yang dilakukan oleh JavaScript telah dilakukan sebelum widget ini tereksekusi. Misalnya mengenai Syntax Highlighter atau JavaScript emotikon. Jika Syntax Highlighter atau JavaScript emotikon tidak diaktifkan sebelum widget ini aktif, maka kemungkinannya posting-posting kode yang berada di dalam artikel layar penuh tidak akan berwarna, dan emotikon-emotikon di dalam artikel tidak akan berubah menjadi gambar:
Elemen-elemen formulir.Mendesain elemen UI itu bukan cuma soal menentukan efek gradiasi yang bagus, efek bayangan yang realistis dan juga pewarnaan yang cocok dengan lingkungan. Web tidak sama dengan sekedar mendesain grafis, yang artinya bahwa semuanya tidak akan bisa semudah itu dibuat menjadi tampak sama pada semua peramban. Setiap peramban memiliki spesifikasinya sendiri-sendiri, dan terkadang mereka juga memiliki spesifikasi yang sangat berbeda, yang menurut kita mungkin sangat mengganggu. Namun tentunya spesifikasi tersebut memiliki tujuan tersendiri yang sangat khusus untuk peramban terkait agar bisa bekerja dengan baik/lebih baik dibandingkan dengan peramban-peramban yang lain. Kita tidak bisa melakukan apa-apa.
Membuat desain tampilan menjadi tampak sama —atau setidaknya nyaris sama— itu tidak mudah untuk elemen-elemen formulir. Anda harus mengikuti beberapa tahapan pembentukan ulang… dan yang terpenting adalah mengenai prioritas dalam hal kestabilan tampilan dibandingkan dengan keindahan tampilan.
Memulai dengan Tahap Pembentukan Ulang
Langkah awal yang harus Anda lakukan adalah menentukan posisi, jarak, padding dan beberapa pengaturan warna serta tipe fon secara global sebisa mungkin ke semua elemen formulir yang ada:
button,
input,
select,
textarea {
display:inline-block; /* alternatif yang lebih baik dibandingkan `display:inline` */
vertical-align:middle; /* posisikan elemen ke tengah secara vertikal terhadap teks */
width:170px; /* tentukan lebar elemen secara umum */
margin:1px 0; /* tentukan `margin` elemen secara umum */
padding:4px; /* tentukan `padding` elemen secara umum */
font:normal normal 13px/normal Arial,Sans-Serif; /* tentukan tipe fon secara umum */
color:#333; /* tentukan warna teks secara umum */
line-height:normal; /* tentukan `line-height` secara umum (deklarasi `line-height` pada selektor `font` di atas biasanya tidak bekerja pada elemen `<button>`) */
background-color:white; /* tentukan warna latar secara umum */
border:1px solid #333; /* tentukan `border` secara umum */
/* deklarasikan `box-sizing` yang seragam */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
/* hapus outline jika mungkin */
outline:none;
outline-offset:-2px;
}
Pada kode di atas Saya juga menentukan ukuran lebar sebesar 170px secara global. Penentuan lebar elemen ini sebenarnya Saya tujukan hanya kepada elemen select dan elemen inputyang berfungsi untuk menyisipkan teks (misalnya elemen formulir bertipe date, email, number, tel, text dan url). Namun karena Saya menerapkannya pada selektor CSS berupa inputtanpa adanya penambahan atribut type secara spesifik, maka deklarasi lebar ini juga akan mempengaruhi semua elemen input yang tidak kita kehendaki, misalnya pada elemen inputbertipe button dan checkbox. Oleh karena itulah setelah pendeklarasian tersebut dilakukan, kita juga harus mengembalikan ukuran lebar pada elemen-elemen formulir yang tidak kita kehendaki memiliki ukuran lebar tetap.
Kebetulan di sini Saya mengatur nilai lebar kembali menjadi auto pada elemen-elemen formulir berupa tombol, sehingga pada saat yang bersamaan Saya juga bisa menambahkan beberapa warna baru pada elemen-elemen ini untuk membedakan tampilannya dengan elemen-elemen formulir berupa masukan teks:
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
width:auto; /* mengembalikan ukuran lebar ke keadaan semula */
background-color:#333; /* tentukan warna latar yang berbeda untuk elemen-elemen tombol */
color:white; /* tentukan warna teks yang berbeda untuk elemen-elemen tombol */
/* buat `padding` kiri dan kanan menjadi lebih lebar untuk membuatnya lebih gemuk */
padding-right:8px;
padding-left:8px;
font-weight:bold; /* buat teks menjadi tebal */
cursor:pointer; /* ubah kursor menjadi `pointer` untuk kenyamanan */
border-color:transparent; /* opsional */
}
box-sizing
Sedikit catatan mengenai deklarasi box-sizing yang Saya tambahkan. Itu berfungsi untuk mengatasi masalah ukuran lebar yang tidak seragam terutama pada elemen formulir berupa masukan teks dan selectbox: Membandingkan ukuran elemen input dengan elemen select yang sudah dimodifikasi tanpa adanya deklarasi box-sizing yang seragam.Dari gambar di atas terlihat bahwa meskipun keduanya sama-sama Saya beri ukuran lebar sebesar 170 piksel, padding sebesar 2 piksel dan border setebal 1 piksel (gambar perbandingan yang ke dua), pada kenyataannya elemen masukan teks akan menghasilkan lebar sebesar 173 piksel (border-left-width + padding-left + width + padding-right + border-right-width✗), sedangkan elemen selectbox akan memiliki lebar sebesar 170 piksel (width✓). Ini berarti bahwa elemen selectbox telah memiliki deklarasi box-sizing sebagai border-box secara normal, sedangkan elemen yang lain tidak —telah ditentukan oleh User Agent Stylesheet.
Anda bisa memilih untuk menentukan nilai properti ini menjadi border-box atau padding-boxkarena tujuan utama pendeklarasian properti ini memang hanya untuk menyamakan logika CSS Box-Model mereka saja. Tapi Saya sarankan untuk menggunakan border-box saja karena deklarasi ini memiliki satu keuntungan lain yaitu akan mempermudah Anda di dalam mengatasi masalah penentuan lebar elemen menuju ukuran 100% dengan hasil tampilan yang benar.
Kembalikan semua ukuran lebar elemen input bertipe checkbox dan radio serta image. Hilangkan juga deklarasi border, padding dan background yang kita deklarasikan sebelumnya:
/* hilangkan nilai `width`, `border`, `padding`, `background` yang telah dibuat sebelumnya pada elemen-elemen ini */
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
width:auto;
padding:0;
background:none;
border:none;
cursor:pointer;
}
Setelah itu atur posisi elemen label menjadi berada di tengah secara vertikal. Atur juga tipe kursor menjadi pointer untuk menambahkan kenyamanan bagi pengguna. Bisa juga digabungkan dengan select, input[type="color"] dan input[type="file"] untuk meringkas kode CSS (meskipun properti display dan vertical-align sebenarnya sudah ditentukan sebelumnya):
Mungkin Anda pernah mengalami ini. Masalahnya bukan karena kode CSS Anda yang salah, tetapi karena Firefox memiliki elemen DOM bayangan yang mengitari bagian sebelah dalam elemen button dan elemen input bertipe button, submit atau reset seperti ini, yang telah membuat ukuran tombol menjadi lebih gemuk di Firefox: ::-moz-focus-inner pada peramban Firefox.CSS ini bisa mengatasi masalah tersebut:
Internet Explorer secara normal memiliki tampilan elemen textarea yang akan tetap meninggalkan scrollbar vertikal meskipun isinya kosong. Gunakan deklarasi overflow:autountuk menghilangkan scrollbar pada elemen ini agar tampilannya sama dengan apa yang terlihat di peramban lain:
textarea {overflow:auto}
Beberapa deklarasi lain yang umum untuk membuat elemen ini menjadi lebih stabil:
textarea {
overflow:auto;
display:block; /* set sebagai elemen blok */
width:100%; /* buat lebarnya menjadi 100% */
resize:vertical; /* agar `textarea` hanya bisa diubah ukurannya secara vertikal (lainnya: `both`, `horizontal`, `none`) */
}
Efek :focus, :hover dan :active
Tentukan efek fokus secara global. Target utamanya adalah elemen input bertipe date, email, number, tel, text dan url serta select dan textarea:
Bisa menggunakan selektor pseudo kelas :disabled, tapi Saya sarankan untuk menggunakan selektor atribut saja yang memiliki dukungan peramban lebih bagus:
Berikut ini beberapa selektor CSS elemen pseudo dengan prefiks khusus yang berbeda-beda pada setiap peramban. Untuk alasan yang tidak Saya tahu, semua selektor ini tidak bisa digabungkan dengan tanda koma:
Berikut ini adalah hasil akhir untuk semua hal yang telah Saya jelaskan di atas. Ini bisa dikatakan sebagai kerangka dasar, sehingga Anda bisa cukup salin-tempel kode ini saja dengan aman ke dalam berkas CSS pada setiap awal mendesain:
/* TAHAP PEMBENTUKAN ULANG */
button,
input,
select,
textarea {
display:inline-block; /* alternatif yang lebih baik dibandingkan `display:inline` */
vertical-align:middle; /* posisikan elemen ke tengah secara vertikal terhadap teks */
width:170px; /* tentukan lebar elemen secara umum */
margin:1px 0; /* tentukan `margin` elemen secara umum */
padding:4px; /* tentukan `padding` elemen secara umum */
font:normal normal 13px/normal Arial,Sans-Serif; /* tentukan tipe fon secara umum */
color:#333; /* tentukan warna teks secara umum */
line-height:normal; /* tentukan `line-height` secara umum (deklarasi `line-height` pada selektor `font` di atas biasanya tidak bekerja pada elemen `<button>`) */
background-color:white; /* tentukan warna latar secara umum */
border:1px solid #333; /* tentukan `border` secara umum */
/* deklarasikan `box-sizing` yang seragam */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
/* hapus outline jika mungkin */
outline:none;
outline-offset:-2px;
}
/* TOMBOL */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
width:auto; /* mengembalikan ukuran lebar ke keadaan semula */
background-color:#333; /* tentukan warna latar yang berbeda untuk elemen-elemen tombol */
color:white; /* tentukan warna teks yang berbeda untuk elemen-elemen tombol */
/* buat `padding` kiri dan kanan menjadi lebih lebar untuk membuatnya lebih gemuk */
padding-right:8px;
padding-left:8px;
font-weight:bold; /* buat teks menjadi tebal */
cursor:pointer; /* ubah kursor menjadi `pointer` untuk kenyamanan */
border-color:transparent; /* opsional */
}
/* PERBAIKI DIMENSI BEBERAPA ELEMEN INI */
/* hilangkan nilai `width`, `border`, `padding`, `background` yang telah dibuat sebelumnya pada elemen-elemen ini */
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
width:auto;
padding:0;
background:none;
border:none;
cursor:pointer;
}
/*
Anda mungkin akan membutuhkan ini untuk memastikan agar
posisi checkbox dan radio bisa berada tepat di tengah secara vertikal.
Saya mengomentari deklarasi CSS ini dan tidak menjelaskannya
secara khusus di atas karena Saya pikir ini adalah
praktek Magic Number yang tidak disarankan.
input[type="checkbox"],
input[type="radio"] {
position:relative;
top:-2px;
}
*/
/* set tipe kursor ke `pointer` untuk kenyamanan */
input[type="color"],
input[type="file"],
label,
select {
display:inline-block;
vertical-align:middle;
cursor:pointer;
}
/* textarea */
textarea {
overflow:auto;
display:block; /* set sebagai elemen blok */
width:100%; /* buat lebarnya menjadi 100% */
resize:vertical; /* agar `textarea` hanya bisa diubah ukurannya secara vertikal (lainnya: `both`, `horizontal`, `none`) */
}
/* MENORMALKAN ::-moz-focus-inner PADA TOMBOL-TOMBOL DI FIREFOX */
button::-moz-focus-inner,
input::-moz-focus-inner {
margin:0;
padding:0;
border:none;
outline:none;
}
/* PSEUDO KELAS - :hover, :focus, :active */
/* focus */
input:focus,
select:focus,
textarea:focus {background-color:#ffa}
/* focus */
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {background-color:#00f}
/* hover */
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {background-color:#444}
/* active */
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {background-color:#111}
/* FIELDSET & LEGEND */
fieldset {
margin:0 0 1em;
padding:1em;
border:1px solid #333;
}
legend {
margin:0;
padding:0 10px;
font-weight:bold;
}
/* DISABLED */
button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
opacity:.7; /* buat warnanya menjadi kabur */
cursor:default; /* fallback */
cursor:not-allowed; /* CSS3 */
}
/* READONLY */
input[type="date"][readonly],
input[type="email"][readonly],
input[type="number"][readonly],
input[type="tel"][readonly],
input[type="text"][readonly],
input[type="url"][readonly],
textarea[readonly],
input[type="date"][readonly]:focus,
input[type="email"][readonly]:focus,
input[type="number"][readonly]:focus,
input[type="tel"][readonly]:focus,
input[type="text"][readonly]:focus,
input[type="url"][readonly]:focus,
textarea[readonly]:focus {
background-color:#eee;
cursor:default;
}
/* PLACEHOLDER */
::-webkit-input-placeholder {color:#999} /* WebKit */
:-ms-input-placeholder {color:#999} /* IE 9+ */
::-moz-placeholder {color:#999} /* Firefox 19+ */
:-moz-placeholder {color:#999} /* Firefox 18- */
:placeholder {color:#999} /* W3C */
:focus::-webkit-input-placeholder {color:#b9b989}
:focus:-ms-input-placeholder {color:#b9b989}
:focus::-moz-placeholder {color:#b9b989}
:focus:-moz-placeholder {color:#b9b989}
:focus:placeholder {color:#b9b989}
Setiap kali Anda mendesain elemen atom, selalu pastikan untuk menyelesaikan masalah-masalah di atas terlebih dahulu. Jika tidak, mungkin Anda akan mengalami berbagai kesulitan saat menangani masalah penampilan pada peramban-peramban tertentu.
Selain itu setidaknya Anda baru bisa/boleh mendesain tampilan elemen-elemen formulir setelah Anda menyelesaikan masalah tampilan elemen-elemen artikel. Setelah itu, Anda bisa memulai untuk menambahkan efek gradiasi, bayangan dan menyesuaikan warna-warna elemen-elemen formulir yang ada sesuai kehendak:
Pembaharuan: Kode sumber yang telah Saya perbaharui sekarang sudah berpindah ke akun GitHub Saya.
Setelah memperbaharui beberapa widget dan kemudian mengunggahnya kembali ke proyek Google Code yang baru, pada saat yang bersamaan sebenarnya Saya juga telah membuat salinannya di DropBox dengan harapan apabila suatu hari nanti terdapat masalah lagi pada proyek Google Code Saya, maka Saya bisa memberikan alternatif kepada kalian semua untuk mengunduh berkas salinan yang sudah Saya unggah di DropBox.
Semua tautan di bawah ini bukanlah tautan yang akan mengarahkan Anda menuju berkas secara langsung. Ini adalah tautan yang akan mengarahkan Anda menuju ke halaman unduhan, sehingga Anda harus mengunduh berkasnya terlebih dahulu, kemudian setelah mengunduh Anda harus mengunggahnya ke akun Google masing-masing. Bisa ke Google Drive atau ke Google Code:
Cara terbaik yang Saya sarankan untuk menghindari hal-hal yang tidak diinginkan pada widget Anda adalah dengan mengunduh berkas eksternal yang ada pada setiap artikel agar bisa kalian unggah ke dalam akun Google masing-masing. Atau cukup dengan cara menempelkan berkas JavaScript dan CSS secara inline di dalam templat. Hanya saja kekurangannya mungkin Anda akan ketinggalan pembaharuan yang terjadi jika sewaktu-waktu Saya melakukan pembaharuan pada widget tersebut. Tapi jangan khawatir! Sampai saat ini sepertinya semua widget buatan Saya sudah bisa berjalan dengan stabil tanpa keluhan, sehingga Saya rasa Saya tidak akan melakukan pembaharuan lagi pada widget-widget tersebut.
Mengenai permintaan penambahan fitur, diskusi pembaharuan atau saran modifikasi biasanya sudah Saya jelaskan pada komentar-komentar yang ada di bawah masing-masing artikel yang terkait dengan berkas tersebut. Anda tinggal membacanya saja dan mempelajarinya untuk kemudian menerapkannya sendiri.
Semua berkas di atas secara umum berada di bawah lisensi Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License dengan beberapa keringanan yang Saya buat setelah mempertimbangkan banyak hal, yang rencananya akan Saya buat tersendiri di dalam sebuah halaman khusus. Tapi saat ini belum ada. Untuk sementara Anda boleh berpedoman pada lisensi tersebut saja.
Saya tidak tahu apakah masih ada halaman lain di dalam blog ini yang memiliki tautan rusak. Kalau Anda kebetulan menemukan halaman seperti itu, mohon jangan sungkan-sungkan untuk mengeklik tombol Sunting yang tersedia pada setiap artikel agar Saya bisa segera memperbaiki kerusakan yang ada. Terima kasih.
Kursor pada scrollbar berubah menjadi pointer.Mungkin ini tidak penting tapi terkadang kita merasa bahwa menggeser-geser scrollbar dengan kursor bertipe pointer akan terasa lebih “enak” dibandingkan dengan menggeser-geser scrollbar dengan kursor bertipe default. Akan tetapi mengubah tipe kursor pada scrollbar tidak mungkin bisa dilakukan karena scrollbar tidak termasuk ke dalam elemen HTML (pengecualian jika kita menggunakan manipulasi seperti JavaScript Custom Scrollbar, karena setiap item penggulung dibuat menggunakan elemen HTML). Bahkan selektor CSS scrollbar milik WebKitpun tidak bisa dimanipulasi:
::-webkit-scrollbar-thumb {
cursor:pointer; /* tidak bekerja! :( */
}
Satu cara sederhana yang bisa kita lakukan untuk mengubah tipe kursor pada scrollbar adalah dengan menerapkan tipe kursor menjadi pointer secara keseluruhan kepada area yang diinginkan, kemudian mengembalikan tipe kursor ke keadaan semula pada bagian dalam. Di sini kita membutuhkan elemen pembungkus ekstra:
HTML
<div class="scrollable-area">
<div class="scrollable-area-content">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
Contoh lain, mengubah tipe kursor menjadi n-resize pada scrollbar vertikal dengan tampilan kustom (buka halaman demo menggunakan peramban Google Chrome atau Safari):
Dalam JavaScript, istilah throttle dan debounce biasa digunakan untuk menyatakan mengurangi atau menunda eksekusi fungsi yang bekerja berkali-kali, misalnya ketika pengguna sedang mengubah ukuran layar atau menggerak-gerakkan pointer mouse. Tujuan utama dari metode ini adalah untuk memastikan agar eksekusi fungsi bisa bekerja seefektif dan seefisien mungkin sekaligus juga sejarang mungkin, sehingga peramban tidak akan terlalu terbebani di dalam mengeksekusi fungsi yang terjadi berkali-kali, yang belum tentu juga fungsi tersebut memang perlu untuk dijalankan sesering itu.
Throttle
Metode ini berdasar pada sebuah usaha untuk membuat jumlah eksekusi fungsi menjadi lebih jarang dari event yang terjadi. Di sini, fungsi bernama foo() akan dieksekusi setiap 1 detik sekali selama kita menggerak-gerakkan pointer mouse di atas dokumen dan bukannya setiap kali pointer mouse berkerak:
var delay = 1000, // Interval pembatas/penundaan eksekusi berikutnya (milidetik)
previousCall = new Date().getTime(); // Set waktu kadaluarsa awal
document.onmousemove = function() {
var time = new Date().getTime();
// Bandingkan antara waktu terakhir kali eksekusi dengan waktu setiap kali event bekerja.
// Jika selisihnya sudah mencapai/melebihi `delay`, jalankan fungsi `foo()`
if ((time - previousCall) >= delay) {
foo();
previousCall = time; // Set ulang waktu kadaluarsa
}
};
function foo() {
console.log('test!');
}
Metode ini berdasar pada sebuah usaha untuk membuat fungsi tereksekusi hanya jika pengguna telah berhenti melakukan suatu event yang berulang, atau hanya dieksekusi sekali saja saat pertama kali event terjadi. Misalnya ketika pengguna berhenti menggerakkan pointer mouse saja atau ketika pengguna mulai menggerakkan pointer mouse saja. Yang paling umum diterapkan adalah kasus yang pertama.
Fungsi di bawah ini terdiri dari penunda berupa setTimeout di dalam jenis event sensitif yang bisa mengeksekusi fungsi berkali-keli setiap kali pengguna menggerakkan pointer mouse di atas dokumen. Namun karena pada saat yang bersamaan fungsi clearTimeout menggagalkan setTimeout untuk mencapai akhir waktu tunda, maka fungsi foo() tidak akan pernah bisa tereksekusi sebelum pengguna benar-benar menghentikan gerakkan pointer mouse mereka:
var timer = null;
document.onmousemove = function() {
if (timer) clearTimeout(timer); // Hentikan `setTimeout` sesegera mungkin agar `foo()` tidak tereksekusi
timer = setTimeout(function() {
foo(); // Jalankan fungsi `foo()` jika timer tidak lagi dihentikan oleh `clearTimeout`
timer = null;
}, 300);
};
function foo() {
console.log('test!');
}
Waktu penunda selama 300 milidetik dibuat hanya sebagai toleransi saja untuk memastikan agar waktu eksekusi berjalan lebih lambat dari pergerakkan pointer mouse pengguna:
Beberapa Event JavaScript yang Masuk dalam Kategori Sensitif
Saya menyebutnya sebagai event yang sensitif karena event ini bisa mengeksekusi fungsi berkali-kali dengan cepat jika sedang dikerjakan oleh pengguna. Beberapa di antaranya adalah:
onmousemove (menggerakkan)
onscroll (menggulung)
onresize (mengubah ukuran)
onkeyup (mengetik)
onkeydown (mengetik)
onkeypress (mengetik)
Contoh Penerapan dalam Kasus Nyata
Berikut ini adalah sebuah gambaran penerapan debounce untuk mencegah AJAX memanggil data berkali-kali pada saat pengguna mengetik kata kunci pencarian. Di sini, data hanya akan terpanggil hanya jika pengguna telah berhenti mengetik:
Saya tidak begitu sering melihat penerapan metode throttle dalam kasus yang nyata. Tapi pada intinya, metode ini berfungsi untuk menunda fungsi agar fungsi tersebut tereksekusi dalam interval waktu tertentu saja pada saat pengguna menjalankan event.
Beberapa manfaat lain dari metode ini:
Membuat aplikasi yang dapat menyimpan data secara otomatis setiap kali pengguna berhenti mengetik.
Fitur penelusuran dengan AJAX yang memungkinkan pengguna untuk memanggil data tanpa harus memaksa pengguna untuk menekan tombol Submit. Cukup dengan mengetik kata kunci dan berhenti, maka hasil penelusuran akan segera dimuat.
Mengubah dan mengatur ulang posisi elemen dalam jumlah yang banyak dengan perhitungan yang rumit setiap kali pengguna mengubah ukuran layar pada interval tertentu.
Saya secara alami sering dan suka memperhatikan hal-hal yang detail, terutama pada elemen-elemen UI di dalam web-web terkenal seperti Google, Facebook dan juga berbagai frameworkweb. Kali ini Saya akan membahas mengenai tampilan menu dropdown pada frameworkBootstrap ini: Menu dropdown pada Bootstrap.Tampilannya terlihat sangat tajam dan dimensinya juga terlihat sangat tipis! Bagi Anda yang sudah terbiasa bekerja dengan aplikasi Photoshop dan sejenisnya mungkin tidak begitu asing dengan teknik untuk membuat efek seperti ini.
Pada kenyataannya, menciptakan elemen kotak dengan efek bayangan saja tidak cukup untuk memberikan kesan sisi yang tajam dan dimensi yang tipis seperti gambar di atas:
Deklarasi di atas sudah cukup untuk menciptakan efek kotak bergaris batas dan berbayang, namun tidak cukup utuk memberikan efek tajam pada elemen tersebut. Jika Anda memperhatikan dengan seksama pada menu dropdown di gambar pertama, maka seharusnya Anda akan menyadari bahwa garis batas pada menu tersebut ternyata tembus pandang: Pembesaran tampilan.Efek semacam ini tidak cukup dibuat hanya dengan warna solid dan bayangan, melainkan kita membutuhkan warna semi transparan pada border. Kita bisa menggunakan kode warna RGBAatau HSLA pada border:
Tapi sekarang efek transparan pada border justru menampilkan warna latar dari elemen .box di bagian bawahnya karena warna latar secara normal memang akan menembus sampai ke sisi terluar dari border (Anda bisa mengeceknya dengan mencoba mengubah tipe border menjadi dashed atau dotted). Untuk mencegah warna latar agar tidak melebihi batas dalam lingkar border, kita bisa menggunakan CSS background-clip dengan nilai padding-box:
Berikut ini adalah gambar cuplikan hasil tampilan pada efek sebelum dan efek sesudah: Efek sebelum dan sesudah.
Penggunaan Properti background-clip Lainnya
Fungsi CSS background-clip adalah untuk menentukan apakah latar belakang elemen, baik warna atau gambar, akan meluas ke bagian bawah perbatasan atau tidak. Nilai padding-boxpada properti ini memungkinkan warna latar yang secara normal akan melebar dan melebihi batas sebelah dalam dari lingkar border menjadi tidak melebihi batas tersebut. Selengkapnya mengenai CSS background-clip bisa Anda pelajari di sini
Secara pribadi Saya jarang menggunakannya untuk kepentingan dekorasi. Melainkan, Saya lebih sering menggunakan properti ini untuk memperbaiki tampilan yang sedikit rusak karena renderpiksel yang tidak terlalu baik pada beberapa peramban. Sebagai contoh adalah pada elemen tombol dengan efek rouded corner di sekelilingnya seperti ini: Gambar sebelah kiri adalah tampilan standar tombol yang dibuat tanpa mendeklarasikan background-clip:padding-box. Jika Anda meperhatikannya dengan seksama, maka pada bagian sisi-sisi lengkungnya akan tampak sedikit warna latar yang melebihi batas. Saya tidak tahu mengapa, tetapi ini hanya terjadi pada elemen tombol yang dikenai deklarasi display:inline, sedangkan tombol dengan deklarasi display:inline-block atau display:block tidak mengalami masalah ini. Ini terjadi di Google Chrome.
Gambar sebelah kanan adalah hasil tampilan sesudah Saya menerapkan deklarasi background-clip:padding-box pada tombol. Terlihat lebih rapi, karena warna latar tidak menembus bagian sisi tombol.
Kembali kepada efek tajam dan super tipis pada menu dropdown, Google Chrome juga mengimplementasikan hal yang sama, hanya saja sepertinya dia menggunakan latar gambar, bukan CSS: Menu dropdown pada Google Chrome.Pada Google Chrome versi lama, Anda pasti pernah melihat sebuah menu di bagian kanan bawah bernama “Barusan Ditutup” yang jika diklik akan menampilkan daftar histori munculan yang juga memiliki kesan yang sama seperti yang sedang kita bahas sekarang, akan tetapi efek itu diciptakan menggunakan metode yang sedikit berbeda dan Saya pikir ini sudah tidak standar lagi karena hasilnya yang kurang rapi dan tidak konsisten. Bukan menggunakan border semitransparan dan CSS background-clip, melainkan menggunakan outline semitransparan. Hasilnya kurang bagus karena outline tidak bisa mengikuti efek lengkung di ujung-ujung kotak. Saya menambahkan ini sebagai pengetahuan tambahan saja. Seharusnya Saya membahas ini sebelum peramban tersebut diperbaharui sampai yang seperti sekarang: Outline tidak bisa mengikuti garis lengkung.
Ini adalah teknik tersingkat, karena kita bahkan tidak memerlukan properti background-clipuntuk menciptakan efeknya di sini. Hanya saja, jika peramban tidak mendukung CSS bayangan atau tidak mendukung CSS bayangan berganda atau tidak mendukung nilai spread pada CSS bayangan, maka efek garis batasnya tidak akan terlihat. Border memungkinkan kita untuk menciptakan fallback agar tampilan elemen tidak menjadi terlalu buruk pada peramban yang tidak mendukung CSS bayangan dan warna RGBA. Begini maksudnya:
.box {
background-color:white;
border:1px solid #bbb; /* warna fallback untuk peramban yang tidak mendukung warna RGBA */
border:1px solid rgba(0,0,0,.3); /* warna border yang seharusnya */
background-clip:padding-box;
box-shadow:0 4px 15px -4px rgba(0,0,0,.6);
}
Teknik ini sudah pernah dibahas dengan cukup detail di CSS-Tricks. Hanya saja Saya tidak habis pikir mengapa beliau tetap mempertahankan deklarasi column-count untuk memecah area menjadi beberapa kolom dan menggunakan media queries untuk mengurangi jumlah kolom pada saat ukuran layar peramban menyempit. Padahal jika kita sudah menentukan lebar masing-masing item dengan ukuran yang sama, kita bisa menggunakan column-width untuk menentukan lebar kolom tetap tanpa harus melibatkan media queries untuk mengurangi jumlah kolom pada saat ukuran layar semakin sempit. column-width akan menciptakan kolom-kolom dengan jumlah yang bisa menyesuaikan diri berdasarkan ruang yang tersisa. Sudah tertulis dengan jelas dalam spesifikasi:
Ada satu hal yang harus diperhatikan jika Anda ingin menciptakan efek/tata letak seperti ini pada elemen yang bukan merupakan gambar, yaitu deklarasi display berupa inline-block. Mendeklarasikan perintah ini akan mencegah perpotongan yang tak terduga pada masing-masing item karena CSS3 Kolom secara normal akan berusaha untuk membuat masing-masing kolom menjadi sama tinggi. Beberapa harus terpaksa dipotong di bagian bawah mengingat properti CSS ini memang sebenarnya berbasis teks:
Ini yang Saya maksud sebagai perpotongan yang tidak diduga dan tidak dikehendaki: Teks terpotong pada bagian bawah untuk memastikan agar masing-masing kolom memiliki tinggi yang sama.
Meski masih ada sedikit kekurangan karena fungsi sortir ini hanya memakai logika berdasarkan abjad. Coba Anda klik pada header Harga. Hasilnya tidak akan sesuai dengan apa yang kita harapkan. Masih sedang mencari solusi yang paling mudah untuk menangani satuan harga pada fungsi ini…
Halaman browse foto di SXC.Pertama kali Saya melihat tooltip semacam ini di situs SXC. Saya mencoba untuk membuat replikanya dengan tanpa menyertakan dukungan untuk peramban-peramban lawas. document.all itu sudah sangat ketinggalan zaman!
Keistimewaan dari tooltip ini adalah dia bisa bergerak mengikuti gerakan pointer serta bisa mempertahankan posisinya agar tetap berada pada area yang terlihat di halaman agar Anda tidak mengalami masalah-masalah seperti: tooltip keluar terlalu jauh ke sebelah kanan atau ke sebelah bawah dari area terlihat pada halaman. JavaScript ini juga bisa digunakan untuk menggantikan salah satu plugin JQuery Saya yang tidak begitu terkenal dan tidak sering diperbaharui lagi:
JavaScript
/*! JavaScript Image Trail Tooltip by Taufik Nurrohman <http://gplus.to/tovic> */
(function(w, d) {
var tooltip = d.createElement('div'),
noImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", // 1 x 1 pixel transparent GIF
top = 0,
left = 0,
docWidth = 0,
docHeight = 0,
offsetTop = 20, // Default top distance of the tooltip to the mouse pointer
offsetLeft = 20, // Default left distance of the tooltip to the mouse pointer
wait = null;
// Get the correct width of the document without scrollbars
function getDocWidth() {
return d.documentElement.clientWidth;
}
// Get the correct height of the document
function getDocHeight() {
return Math.max(
d.body.scrollHeight, d.documentElement.scrollHeight,
d.body.offsetHeight, d.documentElement.offsetHeight,
d.body.clientHeight, d.documentElement.clientHeight
);
}
tooltip.id = "trail-image";
tooltip.className = "trail-image";
tooltip.innerHTML = '<img src="' + noImage + '" alt="Loading..." style="float:none;display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;border:none;outline:none;background:none;margin:0;padding:0;">';
// Just like `DOMContentLoaded` event, but only to
// wait for the existence of the `<body>` element
// to insert the tooltip markup in the proper area
function waitForBodyExist() {
if (!d.body) {
wait = setTimeout(waitForBodyExist, 100);
} else {
clearTimeout(wait);
d.body.appendChild(tooltip);
docWidth = getDocWidth();
docHeight = getDocHeight();
w.onresize = function() {
docWidth = getDocWidth();
docHeight = getDocHeight();
};
w.onscroll = hideTrail;
}
// console.log('Still waiting...');
} waitForBodyExist();
// Function to show the tooltip
// `width` => the tooltip width
// `height` => the tooltip height
// `file` => the URL of the image to show
function showTrail(width, height, file) {
tooltip.style.visibility = "visible";
tooltip.children[0].src = file;
tooltip.style.width = parseInt(width, 10) + "px";
tooltip.style.height = parseInt(height, 10) + "px";
d.onmousemove = function(e) {
if (!e) e = w.event;
if (e.pageX || e.pageY) {
left = e.pageX;
top = e.pageY;
} else if (e.clientX || e.clientY) {
left = e.clientX + d.body.scrollLeft + d.documentElement.scrollLeft;
top = e.clientY + d.body.scrollTop + d.documentElement.scrollTop;
}
tooltip.style.top = parseInt(((top >= docHeight - (height + offsetTop + 10)) ? top - (height + offsetTop) : top + offsetTop), 10) + "px";
tooltip.style.left = parseInt(((left >= docWidth - (width + offsetLeft + 10)) ? left - (width + offsetLeft) : left + offsetLeft), 10) + "px";
};
}
// Function to hide the tooltip
function hideTrail() {
d.onmousemove = "";
tooltip.style.top = "-9999px";
tooltip.style.left = "-9999px";
tooltip.style.visibility = "hidden";
tooltip.children[0].src = noImage;
docWidth = getDocWidth();
docHeight = getDocHeight();
}
// Add to the window object as an external/global function
w.showTrail = showTrail;
w.hideTrail = hideTrail;
})(window, document);
Ada dua fungsi utama dalam skrip di atas, yaitu showTrail dan hideTrail. showTraildigunakan untuk menampilkan tooltip sedangkan hideTrail digunakan untuk menyembunyikannya. Anda bisa menerapkannya pada atribut onmouseover dan onmouseoutseperti ini:
Menuliskan fungsi berkali-kali secara inline mungkin akan melelahkan. Untuk itu Anda bisa memodifikasinya dengan cara memasukkan setiap URL gambar yang lebih besar di dalam atribut HTML5 data-*:
(function() {
var img = document.getElementsByTagName('img');
for (var i = 0, len = img.length; i < len; ++i) {
if (img[i].getAttribute('data-image-preview')) {
img[i].onmouseover = function() {
showTrail(this.offsetWidth * 3, this.offsetHeight * 3, this.getAttribute('data-image-preview'));
};
img[i].onmouseout = hideTrail;
}
}
})();
Pada kode di atas Saya menerapkan this.offsetWidth * 3 dan this.offsetHeight * 3untuk menciptakan skala tooltip menjadi tiga kali lipat dari gambar thumbnail yang didekati pointer. Jadi anggap saja URL yang berada di dalam atribut data-image-preview memiliki ukuran sebesar tiga kali lipat dari thumbnail.
Pastikan DOM sudah berada dalam keadaan siap:
Kita tahu bahwa kita bisa mengubah resolusi gambar yang disimpan di Picasa dengan cara mengubah path/sN pada setiap gambar. Berikut ini adalah contoh penerapan fungsi showTraildan hideTrail tanpa memerlukan adanya atribut data-image-preview. Sekali Anda menerapkan fungsi ini, maka semua gambar yang berasal dari Picasa dengan ukuran lebar tidak lebih dari 100 piksel akan bisa menampilkan tooltip dengan lebar gambar 400 piksel:
(function() {
var img = document.getElementsByTagName('img');
for (var i = 0, len = img.length; i < len; ++i) {
var valid = (img[i].src && /\/s[0-9]+(\-c)?\/.*?\.(bmp|gif|jpg|jpeg|png)/i.test(img[i].src) && img[i].offsetWidth <= 100);
if (valid) {
img[i].onmouseover = function() {
showTrail(this.offsetWidth * 4, this.offsetHeight * 4, this.src.replace(/\/s[0-9]+(\-c)?/, "/s400$1"));
};
img[i].onmouseout = hideTrail;
}
}
})();
Pembaharuan: Pengecekan lebar gambar yang Saya terapkan di atas terkadang tidak bekerja karena mungkin fungsi telah tereksekusi sebelum dimensi gambar terbentuk, sehingga lebar gambar akan sama dengan 0 dan itu membuatnya bisa lolos dari pengecekan. Anda bisa mengeluarkan logika img[i].offsetWidth <= 100 dan memasukkannya ke dalam eventonmouseover seperti ini untuk memastikan agar pengecekan lebar gambar bisa dilakukan setelah dimensi gambar terbentuk setiap kali Anda mendekatkan pointer ke atas gambar:
Pastikan deklarasi <!DOCTYPE html> dinyatakan pada dokumen HTML Anda agar skrip ini bisa bekerja dengan baik. Selain itu, menambahkan tag meta ini sedekat mungkin dengan <head>juga bisa mencegah Internet Explorer untuk berubah ke mode compatibility view tanpa kita kehendaki:
Bagaimana caranya memposisikan judul dan ringkasan posting di samping thumbnail, atau bagaimana cara memposisikan thumbnail di atas judul dan ringkasan posting (biasanya untuk membuat templat List & Masonry Grid)? Di sini Saya mencoba untuk membuat kode XML posting khusus yang Saya buat sefleksibel mungkin untuk keperluan modifikasi di masa datang. Kode ini sudah mencakup modifikasi ringkasan posting, sehingga jika Anda sudah mengimplementasikan modifikasi ini, maka Anda tidak perlu lagi repot-repot untuk mengimplementasikan tutorial pembuatan posting auto read-more.
Namun sebelum melakukan modifikasi ini, perlu dipertimbangkan bahwa nanti Anda akan mengubah struktur posting secara keseluruhan, sehingga beberapa kustomisasi lama Anda seperti penambahan widget artikel terkait, widget berbagi dan kustomisasi-kustomisasi lain yang terkait dengan posting semuanya akan menghilang. Disarankan untuk menyimpan salinan templat Anda terlebih dahulu sebelum melakukan modifikasi ini.
Kode XML
Langkah pertama adalah mengedit XML templat. Kode XML ini cukup diterapkan sekali saja. Mengenai pengaturan posisi setiap elemen bisa kita lakukan dengan CSS yang sudah Saya tuliskan di bawah:
Kode yang Saya beri tanda adalah resolusi gambar yang akan Anda terapkan. Ini tergantung dari ukuran standar masing-masing gambar posting di atas, yang sudah Saya sertakan dalam komentar CSS.
Simpan perubahan.
Struktur Posting yang Tercipta
Berikut ini adalah diagram markup HTML yang akan tercipta secara garis besar. Semoga bisa sedikit membantu untuk memberikan gambaran modifikasi lanjutan:
Catatan Tambahan: Setelah ini lebih baik Anda hapus beberapa kode CSS yang memiliki selektor seperti ini. Markup posting sudah berubah secara total, sehingga CSS ini sudah tidak diperlukan lagi:
Fungsi ini bisa digunakan untuk memuat file JavaScript secara asinkron, sekaligus juga memungkinkan pengguna untuk mengeksekusi fungsi sesaat setelah data tersebut berhasil termuat:
Sebagai contoh, Anda ingin memuat skrip Syntax Highighter secara tidak langsung. Namun pada saat yang bersamaan Anda juga ingin memastikan agar eksekusi plugin terjadi hanya jika skrip tersebut telah termuat:
Tidak ada komentar
Posting Komentar