jQuery ile Dikey Ortalama
Yazar: Volkan Görgülü | Yayın Tarihi:
27 Eylül 2009 | Yorumlar:
37 Yorum
Kategori: jQuery
Herkese merhaba, yeni yayın döneminin ilk paylaşımına hoşgeldiniz.
Öncelikle bu paylaşımda sizler ile paylaşacağım jQuery çözümünü, benimle paylaşan iş arkadaşım Onur Özkan’a bir kez daha buradan teşekkkür etmek isterim.
Bu yeni paylaşımda, sabit yüksekliğe sahip ya da yüksekliği belli olmayan bir içeriği, jQuery kodları kullanarak, sayfaya nasıl dikey bir şekilde ortalayabileceğimizi göreceğiz.
Arkadaşlar, HTML ve CSS kodları kullanarak da içeriği sayfaya dikey olarak ortalamak mümkün ve Fatih Hayrioğlu’nun bu konuda, CSS ile Dikey Ortalama, bir paylaşımıda mevcut, bu paylaşımı ve paylaşımda belirtilen kaynakları inceleyerek ilgili çözüm hakkında bilgiler edinebilirsiniz.
Ben jQuery çözümünü tercih ediyorum çünkü;
- Ekstra HTML ve CSS kodları kullanmıyorum
- O tarayıcıda çalışır, bu tarayıcıda çalışmaz gibi bir sıkıntım olmuyor
- Ortalamak istediğim içeriğin yüksekliğini bilmeme gerek yok
Umarım bu paylaşım sizler içinde faydalı olur ve sizin içinde dikey ortalama bir problem olmaktan çıkar. Bir sonraki paylaşımda görüşmek üzere, kolay gelsin.
Opera 10 Sorunu
Arkadaşlar, anladığımız (eBurhan ve ben) kadarı ile, Opera 10, body’nin yüksekliğini pencere yüksekliğine göre değil de, içeriğin yüksekliğine göre hesaplıyor. Bu nedenle Opera 10 da içerik dikey olarak ortalanmıyordu. eBurhan sağolsun şöyle bir çözüm buldu.
En baştaki kodu,
var pencere_yukseklik = $(window).height()
bu kod ile değiştirince,
var pencere_yukseklik = document.documentElement.clientHeight
sorun çözülüyor.
Başka bir paylaşımımı inceleyebilirsiniz
Düşüncelerinizi duymaya ihtiyacım var!
Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.
Yazıya Gelen Yorumlar
1
eburhan
27 Eylül 2009´de söylemiş
Geri dönmene çok sevindim Volkan.
2
joyologo
27 Eylül 2009´de söylemiş
çok faydalı bir paylşım oldu, teşekkürler..
3
Berkan Akyürek
27 Eylül 2009´de söylemiş
Eline sağlık Volkan kardeşim çok güzel bir paylaşım yapmışsın. Uzun zamandır sahalara dönmeni bekledik sonunda döndün. İnşallah bundan sonrada her zaman ki gibi kaliteli ve güzel bilgi ve tecrübeleri bizimle paylaşırsın. Saygılarımla
4
Ali BARIN
28 Eylül 2009´de söylemiş
Uzun süredir aradığım birşeydi. Gerçekten işime yaradı, teşekkürler. Bu arada yeni yayın döneminiz herkese hayırlı, uğurlu olsun.
5
Hakan Görgülü
28 Eylül 2009´de söylemiş
Yeni yayın dönemi hayırlı olsun
6
Can ÇETİN
28 Eylül 2009´de söylemiş
Muhteşem paylaşım, eline sağlık Volkan.
7
Volkan Görgülü
28 Eylül 2009´de söylemiş
Merhaba arkadaşlar, yeniden başlamak güzel, desteğiniz için çok teşekkürler.
8
Ahmet Altındağ
28 Eylül 2009´de söylemiş
Elinize sağlık Volkan Bey, umarız devamı gelir ve eski performansınızı yakalarsınız.
9
Şenol Coşkun
28 Eylül 2009´de söylemiş
Baş belası dikey ortalama olayına güzel bir çözüm önermişsin, teşekkürler Volkan.
jQuery paylaşımlarının devamını bekliyoruz.
10
Oğuzhan
28 Eylül 2009´de söylemiş
Hocam çok sevindim geri dönmenize. Valla RSS okuyucudan bildirim sesi gelince içime doğmuştu, aha dedim Volkan Görgülü geri döndü.
Hayırlı olsun yeni yayın döneminiz.
11
Aslı Beşkardeşler
29 Eylül 2009´de söylemiş
Bilgini, tecrübeni ve öğrendiklerini paylaşmak için ne kadar sabırsızlandığının en yakın tanığıyım. Seni tüm kalbimle destekliyor, yeni yayın döneminin sana ve ziyaretçilerine hayırlı uğurlu olmasını diliyorum.
12
Kadir GÜNAY
30 Eylül 2009´de söylemiş
Volkancım yeni yayın dönemi mi denir yoksa yeniden gelmen mi denir artık ne dersek diyelim herkes için iyi olduğunu düşünüyorum. Özlemiştik seni
Bu arada dikey ortalamlar ile ilgili biraz ortalığı karıştırayım ve başlığı yoğunlaştırayım istiyorum 
Dikey ortalama tekniği ile ilgili bir çok yöntem var fakat jquery ile ortalamak açıkcası diğer yöntemleri öğrendikten sonra bana çok mantıklı gelmedi. Bu örnekteki gibi direk olarak javascript ile konteynir divine müdahele edilebiliriz. Bu şekilde ekstra olarak jquery kütüphanesini yüklememize gerek kalmaz.
Yine aynı şekilde css ile de direk ortalamak mümkün
çok da basit. Geçenlerde ff de bir feed açılmıştı orada tartışmıştık. Eğer isterseniz ekleyebilirim örneği. Tüm tarayıcılarda da sorunsuz çalışıyor.
Yeni yazıları ve paylaşımları bekliyoruz Volkan kolay gelsin,
13
Volkan Görgülü
30 Eylül 2009´de söylemiş
Merhaba Kadir,
Projemizde jQuery kullanmıyor isek evet Javascript ile direk bu işlemi yapmak mantıklı.
Bahsettiğin FF’de açılan, CSS ile dikey ortalama çözümünüde paylaşırsan çok sevinirim.
Sanada kolay gelsin.
14
Ümit Gündoğdu
30 Eylül 2009´de söylemiş
Merhaba Volkan,
Yeni yayın dönemin hayırlı uğurlu olsun, başarılar.
15
Server DOĞAN
30 Eylül 2009´de söylemiş
Hayırlı olsun efendim
16
Kadir GÜNAY
30 Eylül 2009´de söylemiş
#horizontal{ background-color: transparent; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; }
#vertical{ background-color: #999999; margin-left: -200px; position: absolute; top: -200px; left: 50%; width: 400px; height: 400px; }
Ortalamak istediğimiz divin genişliği ve yüksekliğine göre top ve margin-left değerlerini ayarlayabilirsiniz.
17
Altuğ Orgun
30 Eylül 2009´de söylemiş
Yeni yayın döneminin ilk paylaşımı hayırlı olsun o zaman
18
Erkan
01 Ekim 2009´de söylemiş
Volkan özlemiştik paylaşımlarını. Hoşgeldin tekrar.
Bu arada video kayıt programını değiştirdin mi ? Kullandığın programın adını söyleyebilirmisin ?
19
Volkan Görgülü
01 Ekim 2009´de söylemiş
Merhaba Erkan,
Camtasia Studio 6′yı kullanıyorum. Askere gitmeden evvelde son videolarda bu programı kullanıyordum.
20
Anıl
04 Ekim 2009´de söylemiş
yeni arayüz harika olmuş volkan:)
Arayüzü paylaşma gibi bir durum olabilir mi?:)
21
Salih Gedik
04 Ekim 2009´de söylemiş
Merhaba,
Gerçekten güzel bir yazı olmuş. Bunu bir jQuery eklentisi olarak yazdım ve otomatiğe alındı böylece. Benimle irtibata geçerseniz kaynak kodları yollayabilirim. İyi çalışmalar.
22
hüseyin iskender
04 Ekim 2009´de söylemiş
Merhaba Volkan bey siteyi yeniden açmanız çok sevindirici oldu, umarım sitenin eski sürümündeki yazılarınızın yedekleri kaybolmamıştır. Her yerde Bulamadığımız Yeni Deneyimlerinizi paylaşmanızı heyecanla bekliyorum. İyi Çalışmalar
23
Volkan Görgülü
04 Ekim 2009´de söylemiş
Merhaba arkadaşlar,
@Anıl, lütfen beni anlayın ve bu konuda bana biraz zaman verin.
@Salih, iletişime geçeceğim seninle.
@Hüseyin İskender, yedekler kaybolmadı ama yeniden onları yayına almam biraz zaman alabilir.
24
xTaL
04 Ekim 2009´de söylemiş
Volkan abi yanlız anlamadığım bişivar uzun zamandır giremiyordum sitene senin sitende sayfalarca yazı vardı. şimdi hiç biri yok acaba eski sayfalar diye bir buton vardıda benmi bulamadım?
25
Volkan Görgülü
05 Ekim 2009´de söylemiş
@xTal, eski yazılar şu anda yayında yok evet, en kısa zamanda onlarıda tekrar yayına alacağım.
26
Alican yıldız
05 Ekim 2009´de söylemiş
Volkan abi, bir yazında küçük bir video çekme aracını tanıtmıştın. Videoları flash olarak çekiyordu. Acaba ismini burada söylermisin lazım olduda teşekkür ederim.
27
Volkan Görgülü
05 Ekim 2009´de söylemiş
Merhaba Alican, sanırım Jing‘i soruyorsun.
28
eburhan
05 Ekim 2009´de söylemiş
Tekrar hayırlı olsun Volkan. Yeni paylaşımlarını görmek çok sevindirici…
29
Volkan Görgülü
05 Ekim 2009´de söylemiş
@eburhan, çok teşekkür ederim ilgin ve desteğin için sağol.
30
Oğuzhan
06 Ekim 2009´de söylemiş
Volkan usta, seni tekrar takip edebilecek olmak harika. En kısa sürede o paylaşımcı ruhunla bize bir şeyler katmanı bekliyorum.
31
Mert Pervin
13 Ekim 2009´de söylemiş
Volkan abi sana nedesem 19 yaşındayım abi mi desem yoksa direk volkan mı veya volkan beymi bilmiyorum ama sitende çok kaliteli başkalarının paylaşımlarınıda yayınlayacakmısın? Mesela öyle birşey yaparsan CSS, XHTML ve PHP hakkında çok güzel konularda çok öğretici ve detaycı videolar hazırlayabilirim.
32
alicanyildiz
20 Ekim 2009´de söylemiş
Evet volkan abi, teşekkür ederim.
33
murat
18 Şubat 2010´de söylemiş
Çok Samimi içten Ve kaliteli Paylaşımlar yapıyorsunuz ALLAH razı olsun
34
Alico
06 Haziran 2010´de söylemiş
Aynı soru üzerine bende benzer bir cevap yazmıştım. Olayın daha hızlı kullanılması için bir elementi bulunduğu kasanın yüksekliği içersinde dikey ortalamak için o elementin css’ine middle eklemen yeterli kıldım
http://www.thealico.com/atolye/code/js_middle/index.htm
Ancak konuyu paylaştığımız aşağıdaki adreste
http://www.webdeneyimleri.com/jquery-ile-dikey-ortalama/#comments
Anov arkadaşın css üzerinden vermiş alıntı yapmış olduğu aşağıdaki teknikte oldukça kullanışlı
http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html
Fakat komplike hale getirmek lazım. Yani çalışma esnasında her seferinden değer girmemek gerek js olduğu middle deyince mevzu çalışmalı fakat absolute almış elemente her zaman için width:100% diyemiyeceğimize her ortalama durumunda ortalancak kasanın width değerini hesap edip yazdırmak gibi külfet çıkıyor. Biraz uğraşılırsa onada bir fırıldak çevrilebilir.
Geri İzlemeler