Bazen jQuery ve CSS olmasaydı ne yapardım diye düşünmeden edemiyorum. Artık olay benim açımdan öyle bir hal aldı ki, tasarladığım her yeni sayfadan <title> tagını bile eklemeden önce jquery kütüphanesini çağırıyorum.
Olayımıza gelince; elimizde genişliğini ve yüksekliğini pencere değerlerine göre dinamik olarak ayarlamak istediğimiz bir tasarım elemanı (div) olduğunu düşünelim. Bu elemanı hem yatay hem de dikey olarak pencereye sığdırmak veya kenarlardan sadece bir kaç piksel boşluk bırakarak boyutlandırmak istiyoruz. Bunun için tek başına CSS ile çözüm üretmeye çalıştığımızda biraz tırmalamamız gerekebilir. Oysa eğer sayfamız halihazırda jQuery kütüphanesini yüklüyorsa bu işi bir kaç satır kodla kolayca halledebiliriz.
İşlem yapmak istediğimiz elemana .container gibi bir class atadığımızı varsayalım. Öncelikle pencere yükseklik/genişlik değerlerini alan ve o değerleri dinamik olarak bu elemana atayan bir fonksiyon oluşturalım:
1
2
3
4
5
6
7
8
9
10
| function boyutlandirHele() {
// Pencere değerlerini alıyoruz
var winwidth = $(window).width(); // pencere genişliği
var winheight = $(window).height(); // pencere yüksekliği
// Aldığımız değerleri .container'a dinamik olarak atıyoruz
$(".container").css({'height': winheight, 'width': winwidth});
} |
Ardından bu fonksiyonu sayfa yüklenirken çağıralım:
1
2
3
| $(document).ready(function(){
boyutlandirHele();
}); |
Bu eylem elemanımızı pencerenin içine hem yatay hem de dikey olarak cuk diye sığdırdı. Peki ya kullanıcı pencereyi küçültüp büyütür, yani herhangi bir sebeple yeniden boyutlandırma ihtiyacı hissederse? İşte o zaman bizim .container kalas gibi sabit kalır ve ortaya istenmeyen scrollbarlar (kaydırma çubukları) çıkar. Bunu aşmak için de “Hey jQuery, pencere yeniden boyutlandırıldığında aynı işlemleri tekrar yap dude!” demeliyiz, şöyle ki:
1
2
3
| $(window).resize(function() {
boyutlandirHele();
}); |
Hepsi bu kadar. Bakınız ne kadar hoş, ne kadar şirin ve latif bir olay değil mi? Bu basit işlemlerden sonra nur topu gibi otomatik olarak pencere boyutlarına ayak uyduran .container class’lı bir elemanınız olmazsa gelin beni bulun, döverim onu.
Scriptin çalışan örneğini inceledikten sonra heyecanınız daha da artacak. Fakat işlevlerini ve kaynak kodlarını incelerken “Hacı bu ne ya bir sürü şey yapmışsın, konumuzla ne alakası var tüm bunların?” demeyin, çünkü ben biraz tembel bir blog yazarıyım. Bir sonraki dersimizde site veya tasarım elemanlarının arkaplan resimlerini plugin kullanmadan manuel veya x sürede otomatik olarak değiştirmekten bahsedeceğim, tahmin etmiş olabileceğiniz üzere hepsi için aynı demoyu kullanmak niyetindeyim. Yazinin devamini okuyun »
