Jquery ile Objeyi Ortalamak
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery ile Objeyi Ortalamak

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1945)
RAPOR ET
Jquery ile nasıl ortalama yaparız bunu anlatacam bu derste.Bunu nerelerde kullanabiliriz.Mesela kendi alert kutularımızı yaparken.Şimdi nasıl yapacağımızı anlatayım.
http://ustaderslik.com/resim/ders/sdg0q.png

Burda t ve l yi bulmamız gerek.Çünkü top ve left ile kaydırma yapacaz ama her çecnin ekran genişliği farklı olacağı için bunları bulmamız lazım.
l=(w1-w2)/2
t=(h1-h2)/2

Bu basit formülle hemen bulacaz.w1 değerini window un width ini alarak w2 yi objenin width ini alarak buluruz.Gerisi basit.

Kodlar :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
var sol=( $(window).width()-$(".kutu").width() )/2+"px";//pencerenin genişliğinden kutunun genişliğinini çıkardık sonra 2 ye böldüm. ve sonuna px koydum.
var ust=( $(window).height()-$(".kutu").height() )/2+"px";//aynısını yükseklik için yaptım.

$(".kutu").css({//yukardan bulduklarımla kaydırmalar yaparak tam ortalıyorum.
"left" : sol,
"top" : ust
})

$(".kararma").css({//kararmanın tam sayfayı kaplaması için burdan atadım.
"width":$(window).width(),
"height":$(window).height()
})

$(window).resize(function(){//bunu ise pencere boyutu değişirse bile yine tam ortalıklı olması için koydum.
var sol=( $(window).width()-$(".kutu").width() )/2+"px";
var ust=( $(window).height()-$(".kutu").height() )/2+"px";

$(".kutu").css({
"left" : sol,
"top" : ust
})

$(".kararma").css({
"width":$(window).width(),
"height":$(window).height()
})
})

})

</script>
<style type="text/css">
.kutu{width:400px;height:200px;background:red;position:fixed;z-index:999;}
.kararma{background:#000;opacity:.4;position:fixed;top:0;left:0;z-index:998}
</style>
</head>
<body>

<div class="kutu"></div>
<div class="kararma"></div>


<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/sdg14.png
Bu şekilde sayfanın boyutunu nasıl değiştirirsek değiştirelim objeniz hep sayfanın tam ortasında olacaktır.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol