jQuery İle Div Ortalama – Jquery İle Ortalama Fonksiyonu

Merhabalar, bu yazımda sizlerle güzel bir jquery fonksiyonu paylaşacağım.

Bazı durumlarda tasarım yaparken elemanlara verdiğimiz stil değerleri yüzünden istediğimizi elde edemeyebiliriz. Ya da tasarımlara biraz daha fonksiyonellik ve görsellik katmak ister ama css ile başarılı olamayabiliriz.

İnternette bir araştırma yaparken gözüme takılan küçük bir fonksiyonu biraz geliştirerek bir projemde kullanabileceğimi düşündüm. Tabi ki daha sonra lazım olma ve sizlere de fayda sağlaması adına paylaşmayı da düşündüm.

Fonksiyonu bulduğumda sayfa genişlik ve yükseklikleri değiştiğinde ortalama işlemi yapmıyordu. Ayrıca ilk açılışta .animate() de yoktu. Bunları kullanılabilir olduğunu göstermek adına ekledim. Siz isterseniz kaldırabilirsiniz. İstediğiniz şekilde de geliştirebilirsiniz.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ortala</title>
    <script src="jquery.min.js"></script>
  </head>
  <body>
<div class="container" style="width:500px;height:100px;background-color:#c1c1c1;margin-left:-1000px;margin-top:-500px">
</div>	
	<script>
		jQuery.fn.center = function () {
			this.css("position","absolute");
			this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
					$(window).scrollTop()) + "px").animate({marginTop:0}, 400);
			this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
					$(window).scrollLeft()) + "px").animate({marginLeft:0}, 400);
			return this;
		}		
		$(window).on("load", function(){
			$(".container").center();
		});
		$( window ).resize(function() { // sayfa açıldıktan sonra pencere boyutları değiştiğinde elementi yeniden ortalar
			$(".container").center();
		});
       </script>	
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Ortala</title>

</head>

<body>

</div>

jQuery.fn.center = function () {

this.css("position","absolute");

this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +

$(window).scrollTop()) + "px").animate({marginTop:0}, 400);

this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +

$(window).scrollLeft()) + "px").animate({marginLeft:0}, 400);

return this;

}

$(window).on("load", function(){

$(".container").center();

});

$( window ).resize(function() { // sayfa açıldıktan sonra pencere boyutları değiştiğinde elementi yeniden ortalar

$(".container").center();

});

</script>

</body>

</html>

Yukarıdaki fonksiyonda duruma göre .resize() yerine .on(“resize”, function(){… da kullanılabilir. Bu arada div kullanmak zorunda değilsiniz. İsterseniz resim de kullanabilirsiniz. Resim kullandığınızda yükseklik ve genişlik değeri girmek zorunda da değilsiniz.

Bir sonraki paylaşımda görüşmek üzere.

Benzer Yazılar:

Bir cevap yazın Cevabı iptal et