pillinetwork hesabınızla giriş yapın.

javascript ile basit, icerik kaydirma

mutlaka baslikta belirttigim olayi daha önce görmüssünüzdür.
görmeyenler suradan ajax ile yapilmis demolarini görebilirler.

aslinda yapilan sey cok basit, divimize belli bir genislik verip, overflow özelligini hidden yapiyoruz, böylece icerik saga veya sola tassa bile biz onu kaydirmadan gözükmüyor. kaydirma islemini de yukaridaki buttonlarin click eventine kaydirma funktioni vererek hallediyoruz.

mantigini anladigimiza göre koda gecelim.

ilk olarak javascript eventi verecegimiz buttonlari koyalim.

1
2
3
4
 
<div style="display:block;text-align:right;">

            <img id="solimg" onclick="solaKay(0);" src="left.gif" />

            <img id="sagimg" onclick="sagaKay(0);" src="right.gif"/>                

        </div>

sonra en distaki divimizi olusturuyoruz. bu divin icine de bir table atiyoruz. her bir icerigimiz table'in bir sutununa yaziyoruz. table' in her sutununun genisligi en distaki div kadar oldugu icin digerleri ilk basta gözükmüyor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="kayan" style="width:250px;overflow:hidden;">

<table>

<tbody>

<tr>

<td><div style="display:block;width:250px;">Icerik 1</div></td>

<td><div style="display:block;width:250px;">Icerik 2</div></td>

<td><div style="display:block;width:250px;">Icerik 3</div></td>

<td><div style="display:block;width:250px;">Icerik 4</div></td>

<td><div style="display:block;width:250px;">Icerik 5</div></td>

<td><div style="display:block;width:250px;">Icerik 6</div></td>

<td><div style="display:block;width:250px;">Icerik 7</div></td>

</tr>

</tbody>

</table>

</div>

evet, örnek olarak 7 tane icerik yazdim, ama tabii gercekte icerik databaseden okunacak.

simdi de isi yapan javascript funksiyonlarini yazalim. yukarida zaten img taglarina click eventi olarak sagaKay() ve solaKay() diye verdik. simdi bu fonktionlari yazacagiz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function sagaKay(a) {

    var mydiv = document.getElementById('kayan');

    if(a < 250)

    {

        mydiv.scrollLeft += 4;

        a += 4;

        setTimeout("sagaKay("+a+")",1);

    }

}



function solaKay(a) {

    var img1 = document.getElementById('solimg');

    var img2 = document.getElementById('sagimg');



    var mydiv = document.getElementById('kayan');   

    if(a < 250)

    {

        mydiv.scrollLeft -= 4;

        a += 4;

        setTimeout("solaKay("+a+")",1);

    }

}

basitce anlatmak gerekirse, fonktiona gelen parametremiz 250 olana kadar overflow:hidden olan div imizi saga ya da sola 4 piksel kaydirip, parametreyi arttirip 1 milisaniye sonra tekrar ayni fonksiyona gönderdik.
böylece icerimigiz kayarak yerine yeni icerik geliyor.

son olarak, baslikta da dedigim gibi bu, bu isi yapmanin cok basit bir yöntemiydi, muhakkak daha komplike ve optimal yöntemler vardir.

/* Etiketler: , , , , , , , , , , */
/* isgvder yazdı. 26 Mart 2009 11:33. 7 yorum var */

Yorumlar

bir sorunum oldu bunun çözümü nedir acaba? örneği göz önüne alalım, 7. içeriğe gelince ve bir defa daha ileri butonuna tıklandığında satırda ki ilk harf kayboluyor ve geri gelindiğinde tüm içeriklerin ilk harflerinin olmadığı görülüyor. bunu nasıl çözebiliriz?

/* Qanser */
/* Qanser | 26 Nisan 2009 03:35 */

javascript functionlarina bakarsaniz (sagaKay, solaKay), hep 4er pixel kaydiriyoruz div'i. kontrolü de 250den kucuk mu diye veriyoruz.
iki türlü cözüm olabilir,
ya div genisliklerini 4ün kati bir deger verilir,
ya da her adimda kaydirma 1px yapilabilir (hatta bir if daha eklenip 240dan büyükse 1px kaydir da olabilir).
Umarim yardimci olabilmisimdir, kolay gelsin.

/* isgvder | 26 Nisan 2009 10:47 */

arkadaşım div genişliği 148 yaptım 4'ün katı ve js dosyandaki if(a < 148) bu satırlarıda değiştirdim fakat sorun yine aynı... ayrıca vermiş olduğun kod çok işime yaradı teşekkür ederim paylaşım için...

/* Qanser */
/* Qanser | 26 Nisan 2009 12:47 */

Öyleyse tahminimce table'in cellpadding ve cellspacing ayarlariyla ilgili bisey var. 2sini de 0 yaparsan olmasi lazim.

/* isgvder | 26 Nisan 2009 14:35 */ 

1
 
<td><div style="display:block;width:250px;cellpadding:0px;cellspacing:0px;">Icerik 1</div></td>

olarak cellpaddingn ve cellspacing ayarlarını "0" olarak atadım ama sonuç yine aynı, bence çözüm şu şekilde olabilir döngü sağlasak yani 7.dive geldiğinde tekrar başa dönse. bunu nasıl yapabiliriz acaba? yada normal haliyle bu sorunu nasıl çözeriz?

/* Qanser */
/* Qanser | 26 Nisan 2009 17:09 */

cellpadding ve cellspacing ayarini div icin degil, table icin yapmak gerekiyor.

son contente gelince tekrar basa dönmesini saglamak icin, contentlerin sayisi global bir degiskende tutulur (ya da content * genislik) sag tusa her basista arttirilir, sol tusa her basista azaltilir. fonksiyonlarda kontrol edilir, sonuncu content gözüküyorsa, tekrar en basa döndürülür. soyle ki:

function sagaKay(a) { var mydiv = document.getElementById('kayan');
if(globalVar == contentSayisi)
{ if(a < 250 * contentSayisi) { mydiv.scrollLeft -= 4; a -= 4; setTimeout("sagaKay("+a+")",1); }
globalVar = 0;
}
else { if(a < 250) { mydiv.scrollLeft += 4; a += 4; setTimeout("sagaKay("+a+")",1); }
}
}

/* isgvder | 26 Nisan 2009 18:00 */

arkadaşım kusura bakma ama son birşey daha sorucam zahmet olmazsa üstte vermiş olduğun koda eklermisin bunu? karıştırdım sanırım birazcık herşey için teşekkürler...

/* Qanser */
/* Qanser | 26 Nisan 2009 18:45 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork