$('[placeholder]').each(function() { var plc = $(this).attr('placeholder'); $(this).addClass('blur').removeAttr('placeholder').val(plc).on("focus blur", function(e) { // Add a `blur` class to fade the text color for the default placeholder text $(this)[(e.type == "blur" && (this.value === "" || this.value == plc)) ? "addClass" : "removeClass"]('blur'); // Set the value to `plc` on blur if the element value is empty if (e.type == "blur" && this.value === "") $(this).val(plc); // Set the value to empty on focus if the element value is same with the default placeholder text if (e.type == "focus" && this.value == plc) $(this).val(""); }); });
Saya harus mengatakan bahwa widgetrandom post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:
Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post —termasuk juga widget artikel terkait— tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).
Mengacak Indeks Permulaan
Saya menyadari terdapat sebuah peluang untuk menciptakan widget random post yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih baik jika kita mengacak nilai start-index pada feed sehingga kita bisa memuat posting dari urutan sembarang:
function randomPosts(json) { // Ubah JSON menjadi HTML... }
var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');
Ada satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda saat ini, maka widget random post ini tidak akan bekerja. Oleh karena itu kita harus membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari 1 dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.
Untuk mendapatkan jumlah posting secara keseluruhan kita bisa mengambilnya melalui objek json.feed.openSearch$totalResults.$t:
// Konfigurasi var homePage = 'http://nama_blog.blogspot.com', maxResults = 7;
// Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
// Mendapatkan indeks pemulai yang aman untuk memanggil feed utama function createRandomPostsStartIndex(json) { // Buat angka acak dengan nilai tidak boleh kurang dari `1` dan tidak boleh lebih dari `total posting - posting yang ingin ditampilkan` var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults)); // Tampilkan pesan log console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); }
Pada bagian akhir URL feed terdapat parameter callback=randomPosts. randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON Blogger menjadi widget:
function randomPosts(json) { var link, ct = document.getElementById('random-post-container'), entry = json.feed.entry, skeleton = "<ul>"; for (var i = 0, len = entry.length; i < len; i++) { for (var j = 0, jen = entry[i].link.length; j < jen; j++) { link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; } skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>'; } ct.innerHTML = skeleton + '</ul>'; }
Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan fungsi ini sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:
// Fungsi untuk mengacak array function shuffleArray(arr) { var i = arr.length, j, temp; if (i === 0) return false; while (--i) { j = Math.floor(Math.random() * (i + 1)); temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } return arr; }
// Widget function randomPosts(json) { var link, ct = document.getElementById('random-post-container'), entry = shuffleArray(json.feed.entry), skeleton = "<ul>"; for (var i = 0, len = entry.length; i < len; i++) { for (var j = 0, jen = entry[i].link.length; j < jen; j++) { link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; } skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>'; } ct.innerHTML = skeleton + '</ul>'; }
Hasil Akhir
<div id='random-post-container'>Memuat...</div>
<script> //<![CDATA[ // Feed configuration var homePage = 'http://nama_blog.blogspot.com', maxResults = 7, containerId = 'random-post-container'; // Function to generate random number limited from `min` to `max` // Used to create a valid and safe random feed `start-index` function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Function to shuffle arrays // Used to randomize order of the generated JSON feed function shuffleArray(arr) { var i = arr.length, j, temp; if (i === 0) return false; while (--i) { j = Math.floor(Math.random() * (i + 1)); temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } return arr; } // Get a random start index function createRandomPostsStartIndex(json) { var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults)); // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); } // Widget's main function function randomPosts(json) { var link, ct = document.getElementById(containerId), entry = shuffleArray(json.feed.entry), skeleton = "<ul>"; for (var i = 0, len = entry.length; i < len; i++) { for (var j = 0, jen = entry[i].link.length; j < jen; j++) { link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; } skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>'; } ct.innerHTML = skeleton + '</ul>'; } document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>'); //]]> </script>
Ketika Posting Acak Dikirim Secara Langsung oleh Server
Dalam sebuah forum Saya pernah menemukan seseorang yang mencoba menyarankan Blogger untuk menyertakakan parameter orderby baru berupa random dan popular. Saya pikir ini adalah ide yang bagus. Karena berdasarkan dokumentasi, kalau tidak salah hanya ada dua macam nilai untuk parameter orderby, yaitu published dan updated:
Jika suatu saat Blogger merealisasikan masukan dari pengguna ini, maka kita tidak perlu lagi menerapkan hack semacam ini. Cukup dengan membuat widget recent post biasa, kita bisa mengubah parameter URL feed dari orderby=published menjadi orderby=random untuk menciptakan widget random post atau orderby=popular untuk menciptakan widget posting populer. Tapi kasus ini masih dalam tahap “seandainya”.
function shuffleArray(arr) { var i = arr.length, j, temp; if (i === 0) return false; while (--i) { j = Math.floor(Math.random() * (i + 1)); temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } return arr; }
Penggunaan
var myArray = shuffleArray(["Aku", "Cinta", "Kamu"]); document.write(myArray.join(' '));
Hasil keluaran nantinya akan menghasilkan teks Aku Cinta Kamu atau Kamu Cinta Aku atau Cinta Aku Kamu atau Cinta Kamu Aku atau Kamu Aku Cinta atau blablabla...
/*! http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation */ function scrollTo(element, to, duration) {
// http://robertpenner.com/easing/ // t = current time, b = start value, c = change in value, d = duration Math.easeInOutQuad = function(t, b, c, d) { t /= d / 2; if (t < 1) return c / 2 * t * t + b; t--; return -c / 2 * (t * (t - 2) - 1) + b; };
var start = element.scrollTop, change = to - start, currentTime = 0, increment = 20, animateScroll = function() { currentTime += increment; var val = Math.easeInOutQuad(currentTime, start, change, duration); element.scrollTop = val; if (currentTime < duration) { setTimeout(animateScroll, increment); } };
animateScroll();
}
Penggunaan
element digunakan untuk mewakili elemen yang ingin diberi efek animasi, to mewakili jarak arah gulungan ke atas, duration mewakili durasi animasi:
<button onclick="scrollTo(document.body, 0, 1000);">Scroll to Top</button>
