JQuery ile Sayfayı Otomatik Kaydırmak

Her ne kadar şu "otomatik" kelimesini sevmesem de burada kullanmam gerekiyordu :) Bir projede gerekli olduğu için bu tarz bir uygulamaya ihtiyaç duydum.

Örneğin sayfanızın üst kısmı çok uzun görsel ve menülerden oluşuyor ve içeriğiniz alt tarafta kalıyor. Bu durum ana sayfa için doğal karşılanırken detay sayfalarda içeriği görüntülemek için sayfayı aşağı scroll ettirmek gerekiyor. Hal böyle olunca pek çok ziyaretçi sayfadaki içeriği göremeden sayfadan ayrılabiliyor ve sayfanın yenilendiğini bile farkedemeyebiliyor. Bu durumda ne yapmamız gerekiyor? Detay sayfalarda, sayfa yüklendiğinde otomatik olarak sayfayı içeriğin olduğu bölüme odaklamak !

Bu işlemi yapabilmek için tabiki JQuery'den faydalandım. Sayfayı çeşitli noktalara, farklı efektlerle kaydırabilmek için geliştirilmiş ScrollTo isimli bir plugin mevcut. Bu plugini kullanabilmek için tabiki öncelikle JQuery'yi sayfanıza dahil etmeniz gerekiyor:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Daha sonra da şuradan ScrollTo eklentisini indirip sayfanıza eklemelisiniz.

Bu işlemlerden sonra sayfanıza eklemeniz gereken kod ise şu şekilde:

<script type="text/javascript">
$(document).ready(kaydir);
function kaydir()
{
$.scrollTo( '#content', 800, {duration:3000} );
}
</script>

Burada sayfa yüklendiğinde #content id'sine sahip element'imiz sayfanın odak noktası oluyor. Sondaki duration değeri ise bu kaydırma işleminin yapılacağı süreyi belirliyor. Bunun gibi easing, axis,margin vs. gibi çeşitli pek çok parametre de bulunuyor.

Umarım bu uygulama pek çok kişinin işine yarar ;)

Yorumlar

Facebook Yorumları
Tekno Dergi Yorumları

Yeni yorum ekle

İlgili Yazılar

JQuery ile hayatımızı kolaylaştıran uygulamalardan bahsetmeye devam ediyoruz. Bu sefer web sitelerimizin artık her alanında bulunan formları, nasıl istediğimiz kriterlere göre doldurtabileceğimizi göreceğiz.

Drupal ile geliştirdiğiniz projenize Jquery için hazırlanmış pluginleri ekleyerek çeşitli fonksiyonlar kazandırmak isteyebilirsiniz. Zaten Drupal varsayılan javascript framework'ü olarak da JQuery'yi kullanıyor. Yani JQuery kodu yazmak istediğinizde, dosyanızın başına kendinizin JQuery'yi dahil etmesine gerek kalmıyor. Ancak pluginleri tabiki eklemeniz gerekli. Bunun da bir kaç yöntemi var;

İlk yöntem temanızın .info dosyasını kullanarak eklemek. Tema klasörünüzdeki temaismi.info dosyasını açıp, içerisine scripts[] = scriptdosyasiadi.js kodunu eklediğinizde otomatik olarak o javascript dosyası sayfanıza eklenir.

İkinci yöntem olarak da page.tpl.php dosyanızı elle düzenleyerek <head></head> etiketleri arasına javascript kodunuz eklemek olacaktır. Tabii bu pek sistematik bir çözüm değil.

Bana kalırsa en iyi javascript framework'u olan Jquery ve genel olarak javascript ipuçlarını , alıştırmalarını içeren bir yazı hazırlamış smashingmagazine.Eğer jquery kullanıcısı iseniz göz atmakta fayda var.

JQuery form seçicilerini kullanarak, form elemanları üzerinde çeşitli işlemleri yapmak çok kolay. Eğer Multiple özelliği aktif olan bir Select Box'daki tüm öğeleri bir olay sonucu (bir butonun tıklanması vs.) seçmek istiyorsanız aşağıdaki kodu kullanabilirsiniz:

JQuery ile hazırlanmış pek çok accordion eklentisi mevcut. Accordion'u ister menü isterseniz de direkt içeriğinizi sunmak için kullanabilirsiniz.