jQuery ile Div Ortalama
-2009060904443414-jquery-logo_png.png){kind=logo}
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 = $j(window).height();
- var gen = $j(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,
Yazar Hakkında
Hiç yorum yok:
Yorum Gönder