Kategori JavaScript

jQuery veya CSS ile dikey ortalama

Farkettim ki uzun zamandır hiç işe yarar bir şeyler paylaşmıyor, hem kendi dünyamda olup bitenleri yazıyorum. Bunun üzerine yakın zamanda yaşadığım bir sorunun çözümünü paylaşmak istedim. Sorun XHTML/CSS ile bir nesnenin dikey ortalanması.

Biliyorsunuz, css ile bir div’i doğrudan dikey ortalamak mümkün değil. Ancak, çeşitli tekniklerle tabii ki mümkün. Bu konuda daha detaylı bilgi ve yöntemlerden biri Fatih Hayrioğlu’nun CSS ile Dikey Ortalama başlıklı makalesinde mevcut.

CSS ile dikey ortalamak için Tolga Arıcan‘dan öğrendiğim başka bir yöntem ise şöyle;
Dikey ortalanacak divimizi kapsayan, position:relative bir div oluşturmak. Ortalanacak div’imizi ise  position:absolute; yapıyor ve içerik yüksekliği kadar yukarıdan eksi margin veriyoruz. Örnek kodlar şu şekilde:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dikey ortalama</title>
<style>
.tasiyici {width:300px; height:600px; position:relative; background:#e1deee;}
.icerik{ position:absolute; top:50%; left:0; margin-top:-30px; width:200px; text-align:center; background:#fea200;}
</style>
</head>
<body>
  <div class="tasiyici">
    <div class="icerik">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  </div>
</body>
</html>

Bu kod ile gözlemlediğim kadarıyla browser’lar arası bir uyum problemi yaşanmıyor. Fakat bu yöntem de yüksekliği belirsiz alanlarda hiçbir işe yaramayacaktır. Bu noktada imdadımıza bir jQuery fonksyonu koşuyor.

Fonksyonu bir kaç gün önce, ufak bir Google araması ile buldum. Bugün makalesinin linkini almak için Fatih Hayrioğlu’nun bloguna girince bu fonksyona açılan bir linki görmem de sürpriz oldu. Her neyse…

Aşağıdaki jQuery fonksyonu üzerinde bir değişiklik yapmadan JavaScript dosyanıza, çalışma belgenize ya da uygun bulduğunuz bir yere kopyalayın:

(function ($) {
$.fn.vAlign = function() {
	return this.each(function(i){
	var ah = $(this).height();
	var ph = $(this).parent().height();
	var mh = (ph - ah) / 2;
	$(this).css('margin-top', mh);
	});
};
})(jQuery);

Daha sonra dikey ortalanmasını istediğiniz nesne(ler) ile birlikte şu şekilde fonksyonu çağırabilirsiniz.

$('.ortalanacakDiv').vAlign();

Veya çoklu kullanım için

$('.ortalanacakDiv1, .ortalanacakDiv2, .ortalanacakDiv3').vAlign();

Bu fonksyonun yapmaya çalıştığı şey aslında CSS ile yaptıklarımızın bir tekrarı niteliğinde. Ancak fonksyon burada kapsayıcı div ve içerik div’inin yüksekliklerini (biz height değeri vermesek dahi) bularak, margin ve top değerlerini kendi hesaplıyor, bize zahmet vermeden nesnelerin CSS’lerini kendi düzenliyor.

Eğer yapmak istediğiniz şey nesneyi ekrana göre ortalamak ise Volkan Görgülü’nün jQuery ile Dikey Ortalama başlıklı video paylaşımı da oldukça işinize yarayacaktır.

Ocak 05 / 2010
Yazar Simto ALEV
Kategori CSS, JavaScript
Yorumlar 10 Yorum

IE6 PNG Fix

Artık kimse Internet Explorer 6 için destek vermeye gönüllü değil. Müşteri faktörü olmasa belki hiçbir site IE6 ile açılmayacak, biliyorum. Fakat IE6 desteği gerektiği sürece, sorunlara çözüm bulmamız da şart.
Biraz olsun deneyimli geliştiricilerin (developer) aşina olduğu IE6 sorunlarından biri, transparan PNG dosyalarıdır. Transparan alanlar illa ki gri görünecektir. Bunu çözmek için de türlü CSS numaraları (trick), JavaScript’ler ve 40 taklalık alternatif çözümler var.  Yine pek çok geliştirici bu sorunun çözümlerini bilir.

Benim kısa zaman önce bulduğum bir JavaScript uygulaması ise, IE6’da PNG Fix’leme konusunda en pratik ve başarılı olanı: DD_belatedPNG.  Tüm imajları, css sınıflarını, arkaplan (background) resimlerini düzeltebiliyor. Script’in web sitesinde gerekli tüm bilgiler mevcut. Ben yine de kısaca kullanımından bahsedeceğim.

Öncelikle, buradan DD_belatedPNG’nin son sürümünü indirin. Eğer tarayıcınız dosyayı direkt açıyorsa, “pngfix.js” adıyla kaydedebilirsiniz. Daha sonra sayfanızın head tagları arasına aşağıdaki satırları ekleyin ve DD_belatedPNG.fix fonksyonu içine, düzeltmek istediğiniz etiket veya CSS sınıflarını ekleyin/değiştirin.

Örnek Kod:

<script src=”pngfix.js”></script>
<script type=”text/javascript”>
DD_belatedPNG.fix(“img, .baslik, .menu a, #icerik, #kutu1, #kutu2”);
</script>

Hepsi bu kadar. Hayırlı olsun. (:

Mayıs 20 / 2009
Yazar Simto ALEV
Yorumlar 5 Yorum

JQuery ile seçili radio değerini bulma

Geçtiğimiz hafta bir form kontrolü için seçili radio butonun değerini bulmam gerekiyordu. Bunun için de illa ki Javascript kullanmalıydım. Bilgim yetmedi, bulduğum onlarca farklı ama benzer fonksyon ise işime yaramadı. Sonrasında JQuery ile örnek bulmaya çalıştım. Ve mucizeyi gördüm. Eğer sitenizde JQuery kullanıyorsanız ve aynı sorundan muzdaripseniz, buyrun ilgili koda bakın:

[JS]
var degisken = $(“input[@name=’radio_adi’]:checked”).val();
[/JS]

Kasım 03 / 2008
Yazar Simto ALEV
Kategori JavaScript
Yorumlar Yorum Yok

Preload İmages…

“Resim önyüklemesi” diyelim. Sayfanızda herhangi bir şekilde (onClick’le, onMouseOver’la vs.) gözükecej resimler var. onMouseOver’la çalıştığımızı farzedelim. Linkin ya da butonun üzerine geliyorsunuz, sonra 2 saat resmin yüklenmesini bekliyorsunuz. Olacak iş mi şimdi bu?
Eğer aşağıdaki JavaScript kodunu kullanırsanız, bu dertten kurtulursunuz. Çünkü sayfa açılır açılmaz resimler de cache’e yüklenmeye başlıyor..

function preloader()
{
	var i = 0;
	imageObj = new Image();
	images = new Array();
	images[0]="1.jpg";
	images[1]="2.jpg";
	sayi=images.length;
	for(i=0; i&lt;=sayi; i++)
	{
		imageObj.src=images[i];
	}

}

body tagını da şöyle değiştirelim:

<body onLoad="preloader()">
Mart 01 / 2008
Yazar Simto ALEV
Kategori JavaScript
Yorumlar 6 Yorum