Merhaba arkadaşlar,
Bu makalede herkesin mutlaka bir kez ihtiyacı olduu bir konuya değineceğim. jQuery ile sayfa nasıl tam olarak ortalanır ?
Geliştirdiğim bir temada sayfayı tam olarak ortalamam gerekti. CSS ile biraz uğraştım ama hemen vazgeçip jQuery ile halletmeye karar verdim. İşlemler aslında çok basit. Önemli olan düşünebilmek 🙂
Önce CSS kodumuz;
|
1 2 |
body{width: 100%; height: 100%;}; #bodyDiv{width:98%; height: 98%;} |
CSS ile kapsayıcı divinizin boyutunu siz belirleyin. Ben %98 istediğim için öyle yazdım. Siz doğrudan pixel cinsinden de girebilirsiniz.
Ardından jQuery kodumuz;
|
1 2 3 4 5 6 7 |
$(document).ready(function (){ var screenWidth = $(document).width() / 2; var screenHeidht = $(document).height() / 2; var divWidth = $("#bodyDiv").width() / 2; var divHeight = $("#bodyDiv").height() / 2; $("#bodyDiv").css({'margin-top': screenHeidht - divHeight ,'margin-left': screenWidth - divWidth}); }); |
Burada yaptığımız işlem aslında çok basit. Önce sayfanın genişliğini ve yüksekliğini alıyoruz. Ardından onları 2 ye bölerek sayfanın tam ortasını buluyoruz. Bu haliyle ortalayacak olursan kapsayıcı divimizin başlangıç noktası sayfanın tam ortası olduğu için istediğimiz sonucu elde edemiyoruz. Ek olarak kapsayıcı divimizin de genişlik ve yükseklik değerlerini almalıyız. Yine aynı şekilde kapsayıcı divin de değerlerini alıp 2 ye bölüyoruz. Bu şekilde divimizin de ortasını bulmuş oluyoruz. Yapacağımız son işlem ise sayfanın genişliğinden divin genişliğini, sayfanın yüksekliğinden de divin yüksekliğini çıkarmak oluyor. Böylelikle divin orjin noktası ile sayfanın orjin noktası aynı olacağından div tam olarak ortalanmış oluyor.
Güzel işler çıkarmanız dileğiyle..
İlk Yorumu Siz Yapın