mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Kayan (Floating) Alan Yapımı
Bu yazımda jquery ile kayan (floating) alan yapımını anlatmaya çalışacağım. Birçok haber sitesi ve blog da gördüğüm bu uygulamayı jquery ile hazırladım ve sizlerle paylaşıyorum. Aslında css yardımı ile sayfanın bir yerinde sabit duran bir alanı yapabiliriz. Ancak css ile yaptığımız bu alan her zaman sabit olarak durmaktadır. Javascript yardımı ile yapacağımız uygulama da ise sayfanın scroll olması durumunda belli bir yerde olması gereken alanımız slayt şeklinde hareket ederek yerine geliyor. Böylece css ile yaptığımız uygulamaya göre daha görsel bir alan elde ediyoruz. Şimdi bu uygulamayı nasıl yapacağımıza bakalım.

Öncelikle script kodlarımız şöyle olmalı:

  var alan = "#sabit";
  var uzunluk = null;
  $(document).ready(function(){
    uzunluk = parseInt($(alan).css("top").substring(0,$(alan).css("top").indexOf("px")))
    $(window).scroll(function () {
      offset = uzunluk+$(document).scrollTop()+"px";
      $(alan).animate({top:offset},{duration:300,queue:false});
    });
  });

Görüldüğü gibi script kodlarımızda kayacak olan alanı belirtip onun özellikleri ile oynayarak ekranda belirttiğimiz yere sayfa scroll olduğunda gelmesini sağlıyoruz. Html ve css ile oynayarak istediğimiz şekilde bir uygulama elde edebiliriz. Benim yaptığım uygulamayı, html ve css özelliklerini  buradan görebilirsiniz.

Böylece uygulamalarımızda daha görsel alanlar yaratabiliriz.

Örnek uygulamayı buradan görebilir, buradan da indirebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 02 Ocak Cuma 2009 3 24708 4,3
Javascript Web Tasarım jQuery Jquery Tasarım-Görsellik İnternet Css İndir Scroll
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar jQuery ile Dinamik Alanlar Oluşturma (Scroll Olmadan ve Yatay) Asp.net'te Jquery ve Ajax ile Server Zamanını Alma Asp.net ile Dizine ve Dizindeki Dosyalara Ulaşma Asp.net ve Veritabanı ile XML Oluşturma ve Xsl ile Şekillendirme Yoğunluk, Yaşanan Problemler
Yorumlar
Yorum Yaz
RSS Yorum Takibi
ömer 07 Şubat Cumartesi 2009 13:27 #1
eline sağlık dostum
Metin METE 29 Nisan Çarşamba 2009 20:31 #2
Merhabalar. Gerçekten çok güzel çalışma, ellerinize sağlık. Yanlız ben şöyle bir şeyi merak ettim. Şimdi animasyonlu olarak aşağı doğru kayıyor. ben bunu uğraştım ama bir türlü css`deki "background-attachment:fixed;" tarzında sabit birşey yapamadım. Acaba o animasyon nasıl kalkıcak. NOT "$(alan).animate({top:offset},{duration:300,queue:false});" Kodunu kaldırıyorum ama olmuyor!!!
Mehmet Duran 30 Nisan Perşembe 2009 23:43 #3
Merhaba. Anladığım kadarıyla animasyonu kaldırmak istiyorsunuz. Bunun için jquery veye scrpt kullanmanıza gerek yok. Direk olarak css ile bunu yapabilirsin. İlgili elemente position:fixed değerini vererek sabit kalmasını sağlayabilirsin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Şans bir uğraşının eseridir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009