Saturday, March 2, 2013

Eksperimen Infinite Scroll dengan JSON Blogger

Blogger Infinite Scroll Experiment
Blogger Infinite Scroll Experiment

Eksperimen membuat infinite scroll dengan JSON Blogger. Sebuah sistem yang akan memperbaharui jumlah item posting setiap kali pengguna mencapai batas akhir layar ketika pengguna sedang menggulung halaman. Metode ini sebenarnya sudah pernah Saya tuliskan di sini. Saya mengganti kondisional batas akhir yang tadinya berupa perbandingan antara tinggi kontainer dengan batas akhir gulungan area seperti ini:

container.onscroll = function() {
    if ((this.scrollTop + this.offsetHeight) == inner.offsetHeight) {
        myFunction();
    }
};

Menjadi berdasarkan perbandingan antara tinggi layar dengan batas akhir gulungan layar seperti ini:

window.onscroll = function() {
    if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1 || navigator.userAgent.toLowerCase().indexOf("safari") > -1) {
        if (document.documentElement.scrollHeight == (document.body.scrollTop + document.documentElement.clientHeight)) {
            myFunction();
        }
    } else {
        if (document.documentElement.scrollHeight == (document.documentElement.scrollTop + document.documentElement.clientHeight)) {
            myFunction();
        }
    }
};

Lihat Demo

Selengkapnya mengenai potongan kode untuk mengecek batas akhir gulungan layar bisa Anda baca di sini.

Silakan dipelajari dan dimodifikasi sesuka hati Anda dengan mengikuti persetujuan yang Saya tuliskan di dalam kode sumbernya. Eksperimen ini akan diperbaharui jika memang ada yang perlu diperbaharui. Begitu.

Labels: , , ,

16 Comments:

At Saturday, March 2, 2013 at 8:38:00 PM GMT+7, Blogger Unknown said...

sejenis load more post tapi versi scroll.. :)

 
At Saturday, March 2, 2013 at 9:38:00 PM GMT+7, Blogger Beben Koben said...

yang repotnya kalo arsip sudah sampe 10 tahunan, ampe kapan kita mau scroll2an :D
gimana kalo ditambahin links arsip \o/

 
At Sunday, March 3, 2013 at 2:41:00 AM GMT+7, Blogger Beben Koben said...

napigasi gito loh :)

 
At Sunday, March 3, 2013 at 6:15:00 AM GMT+7, Anonymous Anonymous said...

emang lebih cocok kalo di terapkan di arsip.. :D

 
At Monday, March 4, 2013 at 9:42:00 AM GMT+7, Anonymous Anonymous said...

ini kayak daftar isinya blog ini :D

 
At Monday, March 4, 2013 at 7:01:00 PM GMT+7, Blogger Beben Koben said...

eksperimen tp sudah ada di daptar isi ternyata :D

 
At Tuesday, March 5, 2013 at 7:22:00 AM GMT+7, Blogger Taufik Nurrohman said...

Kalau yang di daftar isi, pemuatan ulang terjadi saat pengguna mengeklik tombol. Kalau yang ini cuma berdasarkan perhentian gulungan sampai di batas akhir layar.

 
At Sunday, March 17, 2013 at 12:09:00 PM GMT+7, Blogger Mr.Randy said...

lama gak nongol disni udah byk aja kemajuan didunia koding, wah keknya mantap law buat arsip ya bang?

 
At Sunday, April 7, 2013 at 6:22:00 PM GMT+7, Blogger Sodikin Kurniawan said...

Wah saya sudah pelajari.. tapi saya masih bingung buat nerapin di blog dengan mengganti scrooll dengan tombol.. atau meganti blog-pager dengan fungsi seperti ini mohon pencerahannya atau mungkin ditulisakan di artikrl berikutnya bang taufik.. makasih.

 
At Tuesday, April 9, 2013 at 11:34:00 AM GMT+7, Blogger Taufik Nurrohman said...

Pakai plugin Infinite Ajax Scroll ⇒ http://www.thesimplexdesign.com/2013/02/infinite-scrolling-or-load-more-effect.html

 
At Tuesday, April 9, 2013 at 7:31:00 PM GMT+7, Blogger Sodikin Kurniawan said...

Oke bang makasih.. saya ke tkp dulu...

 
At Sunday, May 12, 2013 at 1:58:00 PM GMT+7, Blogger Unknown said...

Mas taufik... kalau seperti kAPAN LAGI.COM gimana ya....?

 
At Monday, March 10, 2014 at 4:47:00 PM GMT+7, Blogger Niaga88 said...

Gan, ane sangat frustasi dengan infinite scroll ini. Dah puluhan kali coba ga pernah berhasil. Ga tau masalahnya dimana... :(

 
At Friday, June 26, 2015 at 12:54:00 AM GMT+7, Blogger najatulwan said...

Kalo yang versi load more post ada ?

 
At Saturday, October 7, 2017 at 8:40:00 PM GMT+7, Blogger Giri Diwa Adam said...

bisa langsung di gunakan di blogger gan ??

 
At Monday, December 31, 2018 at 8:26:00 AM GMT+7, Blogger lutfiyah said...

Asumsikan kita punya 10 blog dari Blogger. Dari 10 blog tersebut, dapatkan kita ambil data json dari semuanya, untuk kemudian kita parse bersama-sama (menyeluruh) berdasarkan urutan tanggal posting dari semua blog berjumlah 10 tersebut, dan kita tampilkan sebagai markup html di satu halaman tertentu, misalnya hanya judul, url gambar pertama, potongan artikel, tanggal posting, dan/atau label--kesemuanya tampil sebagai markup html berdasarkan waktu posting setiap blog. Jika ini (maksudnya, mengambil dan parse json dari 10 blog berbeda dan menampilkan pada satu halaman, baik secara infinit skrol atau even klik) dimungkinkan, barangkali akan bermanfaat bagi pengguna Blogger yang suka bereksperimen.

 

Post a Comment

<< Home