[]
Scroll İndikçe veri yükleme
nette tutorial buldum bu konuyla ilgili, ancak bir türlü kendime uyarlayamadım. hala çalışıyorum hala uyarlayamıyorum. Şimdi size dosyalarımı paylaşayım, siteye nasıl yazı gönderiyorum, nasıl yazıları listeliyorum vs. gibi. eğer bana, scroll işini nasıl yapacağıma dair tavsiye verirseniz minnettar kalırım.
ajax.php : codeupload.com (yazı gönderme işlemimi kontrol ettiğim yer)
post.js : codeupload.com (javascript kodum tabiki)
sistematiksel.php :
1. konuları anasayfada listeleme fonksiyonum codeupload.com (burda tüm sitemdeki fonksiyonları yapıyorum.)
2. konuları ekleme fonksiyonum : codeupload.com (burada da konu eklemeyi hallediyorum)
lazım olursa eğer anasayfa.php sayfam: codeupload.com
ajax.php : codeupload.com (yazı gönderme işlemimi kontrol ettiğim yer)
post.js : codeupload.com (javascript kodum tabiki)
sistematiksel.php :
1. konuları anasayfada listeleme fonksiyonum codeupload.com (burda tüm sitemdeki fonksiyonları yapıyorum.)
2. konuları ekleme fonksiyonum : codeupload.com (burada da konu eklemeyi hallediyorum)
lazım olursa eğer anasayfa.php sayfam: codeupload.com
listeleme scriptini parametreler eşliğinde ajax ile çağırıcaksın. script yazıcak vaktim yok ama tekniğini anlatıcam.
örneğin: listele.php?kactane=2 gibi.
sayfa ilk yüklendiğinde, ziyaretciye yetecek kadar listeleme.. listele.php?kactane=5..
scroll aşağı indiğinde, scroll 4 konu boyunu aştığında, ajax > listele.php?kactane=2..
bu kadar.
örneğin: listele.php?kactane=2 gibi.
sayfa ilk yüklendiğinde, ziyaretciye yetecek kadar listeleme.. listele.php?kactane=5..
scroll aşağı indiğinde, scroll 4 konu boyunu aştığında, ajax > listele.php?kactane=2..
bu kadar.
- Dr. Kissingher (29.01.12 14:30:55)
$(function(){
$("#blok").scroll(function(){
if ($(this).scrollTop() === $(".blok").height() - $(this).height()){
$("#loader").show();
var id = $(".blok ul li:last").attr("id");
$.ajax({
type: "post",
url: "ajax.php",
data: {"id":id},
success: function(veri){
if (veri == 'bos'){
$("#loader").html("Başka Veri Yok!..")
}else {
$(".blok ul").append(veri);
$("#loader").hide();
}
}
});
}
});
});
gibi bir kod buldum ben. Ancak bendeki scriptler konuları li ile sıralamıyor, burdaki ajax metodundaysa li ile yapmış. ben bunu kendi scriptime nasıl adapte ederim ki?
$("#blok").scroll(function(){
if ($(this).scrollTop() === $(".blok").height() - $(this).height()){
$("#loader").show();
var id = $(".blok ul li:last").attr("id");
$.ajax({
type: "post",
url: "ajax.php",
data: {"id":id},
success: function(veri){
if (veri == 'bos'){
$("#loader").html("Başka Veri Yok!..")
}else {
$(".blok ul").append(veri);
$("#loader").hide();
}
}
});
}
});
});
gibi bir kod buldum ben. Ancak bendeki scriptler konuları li ile sıralamıyor, burdaki ajax metodundaysa li ile yapmış. ben bunu kendi scriptime nasıl adapte ederim ki?
- tchuck (29.01.12 15:07:43)
niçin li'den bu kadar korkuyorsunuz ben anlamıyorum.. işin içine css girdiğinde html kadar esnek bir dil yok bu alemde.. bence bu aradaki bağlantıyı yakalayamayıp böylesi bir sorunda sunucu yükünü değil, işin li'sinde div'indeyseniz, seviyenize göre alıştırmalarla ilgilenin derim.
bu arada ul > div geçişi.
ul'yi div yap, li'leri div yap oldu bitti yani.
<div class="ul_div" style="position:relative;width:660px;min-height:300px;">
<div class="li_div" style="width:100%;height:100px;display:block">
1.div
</div>
<div class="li_div" style="width:100%;height:100px;display:block">
2.div
</div>
<div class="li_div" style="width:100%;height:100px;display:block">
3.div
</div>
</div>
bu arada ul > div geçişi.
ul'yi div yap, li'leri div yap oldu bitti yani.
<div class="ul_div" style="position:relative;width:660px;min-height:300px;">
<div class="li_div" style="width:100%;height:100px;display:block">
1.div
</div>
<div class="li_div" style="width:100%;height:100px;display:block">
2.div
</div>
<div class="li_div" style="width:100%;height:100px;display:block">
3.div
</div>
</div>
- Dr. Kissingher (29.01.12 15:22:12 ~ 15:23:18)
uğraştım ettim, veri yüklemeyi yapabildim. ancak bir divimin yanına scrollbar ekleyerek yapabiliyorum.
tüm sayfaya yönelik nasıl yapabilirim? yani ana scroll barı indirdikçe veri yüklemesini nasıl yapabilirim? (mesela ortada, yazı yazdığım div'imde scrollbar çıkması görüntü bakımından çok kötü oluyor. ben anasayfanın scrollbarını indireyim ama veriler ortadaki div'e yüklensin nasıl yapabilirim?)
kodum yukarıda verdiğim ajax kodu. tekrar yazayım hatta:
$(function(){
$("#blok").scroll(function(){
if ($(this).scrollTop() === $(".blok").height() - $(this).height()){
$("#loader").show();
var id = $(".blok ul li:last").attr("id");
$.ajax({
type: "post",
url: "ajax.php",
data: {"id":id},
success: function(veri){
if (veri == 'bos'){
$("#loader").html("Başka Veri Yok!..")
}else {
$(".blok ul").append(veri);
$("#loader").hide();
}
}
});
}
});
edit: anlatmak istediğim şu: imageshack.us caps'te açık mavi yerler scrollbar oluyorlar. yani, şuan yaptığıma göre orta div'imde ajax ile veri çektirmek için ek bir scrollbar çıkıveriyor ortaya. ama ben öyle bir scrollbar çıkmasını istemiyorum, yalnızca en sağdaki scrollbar'ı indirdiğimde ortadaki div'e veri yükleme yapılsın istiyorum.
});
tüm sayfaya yönelik nasıl yapabilirim? yani ana scroll barı indirdikçe veri yüklemesini nasıl yapabilirim? (mesela ortada, yazı yazdığım div'imde scrollbar çıkması görüntü bakımından çok kötü oluyor. ben anasayfanın scrollbarını indireyim ama veriler ortadaki div'e yüklensin nasıl yapabilirim?)
kodum yukarıda verdiğim ajax kodu. tekrar yazayım hatta:
$(function(){
$("#blok").scroll(function(){
if ($(this).scrollTop() === $(".blok").height() - $(this).height()){
$("#loader").show();
var id = $(".blok ul li:last").attr("id");
$.ajax({
type: "post",
url: "ajax.php",
data: {"id":id},
success: function(veri){
if (veri == 'bos'){
$("#loader").html("Başka Veri Yok!..")
}else {
$(".blok ul").append(veri);
$("#loader").hide();
}
}
});
}
});
edit: anlatmak istediğim şu: imageshack.us caps'te açık mavi yerler scrollbar oluyorlar. yani, şuan yaptığıma göre orta div'imde ajax ile veri çektirmek için ek bir scrollbar çıkıveriyor ortaya. ama ben öyle bir scrollbar çıkmasını istemiyorum, yalnızca en sağdaki scrollbar'ı indirdiğimde ortadaki div'e veri yükleme yapılsın istiyorum.
});
- tchuck (29.01.12 17:55:27 ~ 18:00:21)
ileride ihtiyaç duyan olursa, cevabı buldum:
function last_msg_funtion() {
$('#loader').show();
var string = 'id='+ $(".blok ul li:last").attr("id");
$.ajax({
type: "POST",
url: "tema/standart/konuliste.php",
data: string,
cache: false,
success: function(html) {
$(".blok ul").append(html);
$('#loader').hide();
}
});
}
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
});
function last_msg_funtion() {
$('#loader').show();
var string = 'id='+ $(".blok ul li:last").attr("id");
$.ajax({
type: "POST",
url: "tema/standart/konuliste.php",
data: string,
cache: false,
success: function(html) {
$(".blok ul").append(html);
$('#loader').hide();
}
});
}
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
});
- tchuck (29.01.12 18:15:33)
1