Web sitesi tasarladığınızda her nesnenin sayfa üzerinde bir left ve top değeri vardır jQuery offset() ile nesnelerin left- top özelliğini nasıl öğrenebileceğimizi ve nesnenin left-top değerini nasıl değiştirebileceğimizi göreceğiz.
jQuery offset() ile nesnelerin left ve top değerleri alma veya değiştirme
offset() fonksiyonunu ile visibility:hidden; css özelliği olan nesnenin konumu alınamıyor fakat display: none; css değerini almış nesnenin konum değerleri alınamamaktadır.
Örnek(HTML): offset() fonksiyonu ile son paragrafın left ve top değerini alma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>offset demo</title> <style> p { margin-left: 10px; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></ script> </head> <body> <p>Merhaba</p><p>2.paragraf</p> <script> var p = $( "p:last" ); var offset = p.offset(); p.html( "sol: " + offset.left + ", üst: " + offset.top ); </ script> </body> </html> |
Sonuç
Örnek(HTML): Click olayı ile sayfadaki nesnelerin left ve top değerlerini alma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>offset demo</title> <style> p { margin-left: 10px; color: blue; width: 200px; cursor: pointer; } span { color: red; cursor: pointer; } div.abs { width: 50px; height: 50px; position: absolute; left: 220px; top: 35px; background-color: green; cursor: pointer; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></ script> </head> <body> <div id="result">Nesnelere tıklayın.</div> <p> offset değerini <span>bulmanın</span> en iyi yolu. </p> <div class="abs"> </div> <script> $( "*", document.body ).click(function( event ) { var offset = $( this ).offset(); event.stopPropagation(); $( "#result" ).text( this.tagName + " pozisyonu ( " + offset.left + ", " + offset.top + " )" ); }); </ script> </body> </html> |
Sonuç
offset() fonksiyonu ile nesnelerin left ve top değerlerini değiştirme
Üstteki örneklerimizde nesnelerin left ve top değerleri offset() fonksiyonunu kullanarak aldık şimdi ise nesnelerin left ve top değerleri offset() fonksiyonu ile değiştirelim.
Örnek(HTML): offset() fonksiyonu ile left-top değerlerini değiştirme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>offset demo</title> <style> p { margin-left: 10px; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></ script> </head> <body> <p>Merhaba</p><p>2.paragraf</p> <script> $( "p:last" ).offset({ top: 10, left: 30 }); </ script> </body> </html> |
left değerini ekrana göre alıyor containere göre almasını nasıl sağlarız ?
container ortada mesela spanın değeri 0 ama ekrana göre gösterdiği için 230 felan diyor aslında 0 ?
nasıl yapabiliriz
Konuyu görsel ile anlatma şansınız varmı?