jquery-logo

jQuery ile Div’i Ortalama

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

Post Author: Oral ÜNAL

Web geliştirmeyi başta meslek olarak hayal eden fakat daha sonra bir hobi haline getiren birisiyim işte.

jQuery ile Div’i Ortalama” için bir yorum

  • Harun

    (13 Ocak 2013 - 14:52)

    Eminmisin yani bi denesen bence

Yorum yazma sırası sizde!