Jquery Ders-25 .position() Kullanımı
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 Ders-25 .position() Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2565)
RAPOR ET
Jquery derslerimize devam ediyoruz.Bu desimizde .position() methodunu işleyecez.Position sayfadaki her hangi bir objenin top veya left değerlerini almamıza yarıyo.

$(".alan").position()


Bu şekilde position değerlerini alıyo.Position değerlerini aldı şimdi biz top yani yukardan yüksekliği almak istiyoruz.

var pos=$(".alan").position().top;


Bu şekilde top değerini alıyoruz.Left içinse şu şekilde.

var pos=$(".alan").position().left;


Bu şekilde de lefti alıyoruz.Aldığımız değerleri pos adlı değişkece atadık.Artık eriştiğimiz bu değerlerle işlem yapabiliriz.

Genel örnek :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
var pos=($(".alan").position().top)-($(window).height()/2);
$("body").animate({scrollTop : pos},500);
});
</script>
<style type="text/css">
.ust{height:2000px;}
.alt{height:2000px;}
</style>
</head>
<body>

<div class="ust"></div>
<div class="alan">cArleone</div>
<div class="alt"></div>

</body>
</html>


Yukardaki örnekte alan calsına sahip objenin top değerini alıp,o değerden pencere boyutunun yarısını çıkardık.Sebebi tam ortalanması için.Sonrada scroll aşağı kaydırdık.Böylelikle objemize erişip tam ortaladık.



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