Jquery ile Scroll indikçe Veri Yüklemek
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery ile Scroll indikçe Veri Yüklemek

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(8722)
RAPOR ET
Bu dersimizde scroll indikçe veri yüklemeyi göreceğiz.Bu günümüzde artık bir çok sitede var.En bilinenleri facebook veya twitter.

Mantığı şudur.Scroll oynarsa scroll boyutunu alıp en aşşağıdamı diye kontrol ederiz.En aşağıda ise ajaxla yeni veri çekip sayfaya koyarız.Kodlara geçelim.

indir : http://ustaderslik.com/dosya/scroll_indik%C3%A7e_veri_y%C3%BCklemek.rar

video :


Aşağıdaki örnek mysql alanlarını kendinize göre düzenleyin.

index.php

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){

var id=$("#mesaj:eq(0)").attr("name")-5;//idi mesaj olanın sayfada en üsttekinin namesini aldık.Sebebi o veritabanındaki en son veri.
//yukardaki idle sürekli 5 azaltıp 5 veri çekecez taki kalmayana kadar.

$(window).scroll(function(){//sayfadaki scroll oynarsa
var scroll=$(this).scrollTop();//scrolun yükseklik konumunu al
var uzunluk=$(document).height()-$(this).height();//documentin scroll boyunu bulduk.Yaniiçerikten pencere boyutunu çıkardık

if(scroll==uzunluk){//scroll konumu bulduğumuz uzunluğa eşitse .Yani dökümanın sonuna vardıysa
$(".yuke").html("<img src='loading.gif' id='load' />");//loading.gif i koy
var s=$(this).scrollTop();//o anki scrolun konumunu al
$.post("mesaj.php",{"id":id},function(veri){//ajaxla mesaj php ye son id i at 5 veriyi çek
if(veri!="yok"){//veri varsa
$(".mesaj_ana").append(veri);//verileri mesaj_ana clasının sonuna koy
id-=5;//id i 5 azalt
$(this).scrollTop(s);
}else{
$(".yukle").html('<div id="yok">Veri kalmadi</div>');//veri yoksa veri yoku yaz
}
});
}

});

});
</script>
<style type="text/css">
#mesaj{height:200px;background:#ddd;color:#fff;margin-bottom:10px;font-size:30px;}
#mesaj2{height:200px;background:#999;color:#fff;margin-bottom:10px;font-size:30px;}
#yok{height:200px;background:red;color:#fff;margin-bottom:10px;font-size:30px;}
</style>
</head>
<body>
<div class="mesaj_ana">
<?php
$baglan=mysql_connect("localhost","root","");//mysql başlantısı
$veritabani=mysql_select_db("pdo",$baglan);
if($veritabani){

$cek=mysql_query("select * from mesajlar order by id desc limit 5");//son 5 veriyi çekiyoz
$say=mysql_num_rows($cek);
if($say>0){
while($al=mysql_fetch_array($cek)){
echo "<div id='mesaj' name='".$al["id"]."'>".$al["mesaj"]."</div>";//verileri tek tek ekrana basıyoz.
}
}

}
?>
</div>

<div class="yukle"></div>

</body>
</html>


mesaj.php

<?php
$id=$_POST["id"];//idi aldık
$baglan=mysql_connect("localhost","root","");//mysql bağlantısı
$veritabani=mysql_select_db("pdo",$baglan);
if($veritabani){
if($id>0){
$cek=mysql_query("select * from mesajlar order by id desc limit $id,5");//gelen idten sonraki 5 veriyi aldık
$say=mysql_num_rows($cek);
if($say>0){
while($al=mysql_fetch_array($cek)){
echo "<div id='mesaj2' name='".$al["id"]."'>".$al["mesaj"]."</div>";//verileri yaz
}
}else{
echo "yok";//veri yoksa yok yaz
}

}else{
echo "yok";//id küçükse gene yok yaz
}

}
?>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol