jQuery ile Div’i Ortalama

Bu konu boş.

0 yanıt dizini görüntüleniyor

Yazar

Yazılar

3 Nisan 2011: 00:32 #6674

oralunal

Ziyaretçi

Merhaba arkadaşlar,
Bugün jQuery kullanarak bir div elementini sayfanın nasıl ortasına yerleştireceğinizi anlatıyorum.
Bu makalede jQuery’nin width() ve height() fonksiyonlarından faydalanıyoruz. Lafı fazla uzatmayalım. Öncelikle bir index.html adlı dosya oluşturalım. Daha sonra bu dosyanın içine aşağıdaki kodu ekleyelim:

<html><br />
<head><br />
<script type="text/javascript" src="jQuery.js"></script><br />
<script>$(document).ready(function(){<br />
var blok = $('#orta');<br />
var yuk = $j(window).height();<br />
var gen = $j(document).width();<br />
$('#orta').css({<br />
left : gen/2 - (blok.width() / 2),<br />
top : yuk/2 - (blok.height() / 2)<br />
});<br />
});<br />
</script><br />
<style><br />
body{<br />
background-color: #0000CC;<br />
}<br />
#orta{<br />
position: absolute;<br />
width: 250px;<br />
height: 250px;<br />
background-color: #CC0000;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="orta">Bu Blok Sayfayı Tam Ortalayacaktır</div><br />
</body><body><br />
</body></html>

var blok = $('#orta');<br />

var yuk = $j(window).height();<br />

var gen = $j(document).width();<br />

$('#orta').css({<br />

left : gen/2 - (blok.width() / 2),<br />

top : yuk/2 - (blok.height() / 2)<br />

});<br />

</script><br />

body{<br />

background-color: #0000CC;<br />

}<br />

#orta{<br />

position: absolute;<br />

width: 250px;<br />

height: 250px;<br />

background-color: #CC0000;<br />

}<br />

</style><br />

</head><br />

<div id="orta">Bu Blok Sayfayı Tam Ortalayacaktır</div><br />

</body><body><br />

</body></html>

Burada tam olarak şunu yaptık. yuk değişkenine geçerli pencerenin yüksekliğini atadık. #orta adlı bloğun top değerini bulduğumuz yuk değerinin yarısından #orta adlı bloğun yarısını çıkararak bulduğumuz değeri atadık. Bu sayede sayanın dikey olarak tam ortasına yerleştirmiş oluyoruz. Aynı mantıkla yatay olarak yerleştirdik.
Herkesin problemi var genelde bu sayfa ortalama ile ilgili. Bende paylaşmak istedim sizinle. Umarım anlatabilmişimdir.
Kolay gelsin,

Yazar

Yazılar

0 yanıt dizini görüntüleniyor

Bu konuyu yanıtlamak için giriş yapmış olmalısınız.