jQuery ile elemanlara otomatik genişlik/yükseklik değerleri vermek

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.

Scriptin Çalışan Örneği:
Demo

Scripti İndir (5.2 MB):
Download

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

14 Yorum

  1. Caner biliyorsun ben Java ve türevlerinden pek hazzetmiyorum ama eline emeğine aklına fikrine sağlık.. Çok takdir ettim vallahi ne zamandır benim aklımda da böyle birşey var ama malum java, ajax, jquery.. vb bilmediğimden hayal olarak duruyordu hep.. Sen de iş var aga ne diyem..

  2. “Ön taraftaki taralı alanın (nerenin?)” Parantez içini okumadan önce (parantez içindekiyle) aynı kelimeyi telaffuz etmiş olmam seninle aynı zihinsel sorunları yaşıyor olmamı mı gösterir acaba? O.o N’oldu bize Caner?!?

    Neyse ben şu “Şişsin, ben böyle şeylere takılmam” butonuna 8962. kez basmaya devam edeyim…

  3. Caner vaktim olsa inan okuyacaktım ama eminim 2-3 gün sonra benimde işime yarayacak. bu ara yorumun altında siyasi olduğunu düşündüğüm eklenti de dikkatimi çekti.

  4. Halil

    Merhabalar çok güzel bir çalışma olmuş ellerinize sağlık hocam, bu işerle yeni hevesli biri olaraktan, belki basit bişydir ama bilmeyince çooooooook zor 🙂
    Sorum şıuydu; hani burda \”nerenin?\” kısmına tıkladığımzda taralı alanı yeniden boyutlandırıyor ya onu her resim değişmesinde otomatik nasıl yaptırabilirz???

    Saygılarımla

  5. Alperen Polat

    Merhabalar ;
    Sol bar ve sağ bar var sol barın genişliği değişken ve buna bağlı olarak sol barın genişliğine göre sağ barın o genişlik kadar soldan ilerlemesi lazım nasıl yapılır ki acep ?

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir