jTopLeft – Bir elemanın sayfa üzerindeki yerini bulma

JavaScript ile bir elemanın tarayıcının görüş alanına göre ya da ebeveyni olan diğer bir elemana göre x ve y koordinatlarını belirlemeye yönelik bir betik hazırladım ve jQuery eklentisi haline getirdim. Eklentinin kendisini ve sıkıştırılmış halini aşağıda bulabilirsiniz.

Kullanımı:

1var top = $('#elm').top();
2 
3var left = $('#elm').left();
4 
5var pos = $('#elm').pos();
6top = pos.top;
7left = pos.left;
01/*
02 * jTopLeft
04 *
05 * Copyright (c) 2009 İzzet Emre Erkan
06 * Licensed under Creative Commons Attribution-Share Alike 3.0 Unported License
08 *
09 * Date: 2009-10-12 17:56:24 +0300 (Mon, 12 Oct 2009)
10 * Revision: 3
11 */
12(function($){ 
13  $.fn.extend({
14    top: function(obj) {
15      var o = findPos(this.get(0));
16      return obj ? o - findPos(obj) : o;
17    },
18    left: function(obj) {
19      var o = findPos(this.get(0),true);
20      return obj ? o - findPos(obj,true) : o;
21    },
22    pos: function(obj) {
23      var pos = {},o;
24       
25      o = findPos(this.get(0));
26      pos.top = obj ? o - findPos(obj) : o;
27       
28      o = findPos(this.get(0),true);
29      pos.left = obj ? o - findPos(obj,true) : o;
30       
31      return pos;
32    }
33  });
34  function findPos(o,l){
35    var x = 0;
36    if (o.offsetParent) {
37      x = l ? o.offsetLeft : o.offsetTop;
38      while (o = o.offsetParent)
39        x += l ? o.offsetLeft : o.offsetTop;
40    }
41    return x;
42  }
43})(jQuery);

Paketin küçültülmüş halini (802 byte) buradan edinebilirsiniz.

“jTopLeft – Bir elemanın sayfa üzerindeki yerini bulma” için bir yorum

Yorumlar kapalı.