[Javascript] Load More
oke kali ini saya akan menjawab pertanyaan dari sahabat saya yang bernama mas Ryan yaitu "Bagaimana caranya load more seperti facebook?? dimana ketika kita menscroll ke bawah secara otomatis langsung me load more content.". Saya tidak banyak kata-kata untuk kali ini, jadi langsung saya tampilkan source code dan akan saya jelaskan sourcenya :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style>
#box{
opacity: 0.8;
position:fixed;
top:0px;
left:0px;
background:#000;
color:#FFF;
padding:3px;
}
</style>
<script>
$(window).load(function(){
$(window).scroll(function(){
var limitz = $(document).height() - (600 + (10/100*$(document).height()));
if ($(window).scrollTop() >= limitz && limitz >= 150){
$("#box").html("Load More Area")
}else{
$("#box").html("Nothing to Do")
}
});
for(i = 0;i <= 100;i++){
$("body").html($("body").html() + i + "<br>")
}
$("body").html($("body").html() + "<div id='box'></div>")
$("#box").html("Nothing to Do")
});
</script>
</head>
<body>
</body>
</html>
oke saya jelaskan codingnya mulai dari awal :
- script yang paling atas hanya untuk meload jquery pada link tersebut
- style hanya desain untuk box yang saya buat sendiri sebagai notifikasi nantinya
- script yang ke 3 ini yang paling penting. Ketika halaman sudah di load semua maka coding di dalam .load(function) akan berjalan dimana ketika ia pertama kali memasangkan event ketika terjadi scroll terhadap halaman web tersebut akan mengecek daerah tersebut termasuk Load More area atau bukan. Dilanjutkan dengan pengulangan yang mencetak angka 1 - 100 dan menambahkan tag BR agar ke bawah untuk menciptakan scroll. Kemudian menambahkannya dengan div box sebagai notifikasi nantinya.
silahkan source tersebut di copy dan di simpan dengan extensi HTML agar kalian bisa mencobanya langsung dan tahu bagaimana cara kerjanya dari pada saya menjelaskan pada kalian perlinenya. jika kalian ada pertanyaan yang lain silahkan post ke grup :
- Google Plus
saya akan menjawab dan membantu anda sebisa saya. Untuk artikel akan saya posting di blog ini dan sebagai pemberitahuan ke kalian saya akan mengirimnya via pesan untuk facebook dan link ini akan saya posting juga di grup agar yang lain juga tau. Terima kasih.
By : L Shaf
Komentar
Posting Komentar