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ı:

var top = $('#elm').top();

var left = $('#elm').left();

var pos = $('#elm').pos();
top = pos.top;
left = pos.left;
/*
 * jTopLeft
 * https://www.karalamalar.net/
 *
 * Copyright (c) 2009 İzzet Emre Erkan
 * Licensed under Creative Commons Attribution-Share Alike 3.0 Unported License
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 * Date: 2009-10-12 17:56:24 +0300 (Mon, 12 Oct 2009)
 * Revision: 3
 */
(function($){  
  $.fn.extend({
    top: function(obj) {
      var o = findPos(this.get(0));
      return obj ? o - findPos(obj) : o;
    },
    left: function(obj) {
      var o = findPos(this.get(0),true);
      return obj ? o - findPos(obj,true) : o;
    },
    pos: function(obj) {
      var pos = {},o;
      
      o = findPos(this.get(0));
      pos.top = obj ? o - findPos(obj) : o;
      
      o = findPos(this.get(0),true);
      pos.left = obj ? o - findPos(obj,true) : o;
      
      return pos;
    }
  });
  function findPos(o,l){
    var x = 0;
    if (o.offsetParent) {
      x = l ? o.offsetLeft : o.offsetTop;
      while (o = o.offsetParent)
        x += l ? o.offsetLeft : o.offsetTop;
    }
    return x;
  }
})(jQuery);

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

strExtensions – JavaScript için string uzantıları

JavaScript kullanırken eksikliğini hissettiğim bir kaç string metot var. padLeft, padRight, trimLeft, trimRight ve trim metotları varsayılan string metotları arasında yer almıyor. Zaman içinde çeşitli projelerde bu metotlara ihtiyaç duydukça yazıp yazıp bir kenara koymuştum. Şimdi bu metotları toplayıp ufak bir paket oluşturdum ve sizlerle de paylaşayım dedim. valiDate v2.0‘ı da bu pakete dahil ettim. Metotları aşağıda bulabilirsiniz;

/*
 * strExtensions - String extensions
 * https://www.karalamalar.net/
 *
 * Copyright (c) 2009 İzzet Emre Erkan
 * Licensed under Creative Commons Attribution-Share Alike 3.0 Unported License
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 * Date: 2009-10-08 17:43:34 +0300 (Thu, 08 Oct 2009)
 * Revision: 2
 */
String.prototype.trimLeft =
  function(c) {
    c = c || ' ';
    return this.replace(new RegExp('^'+c+'+'),"");
  };
String.prototype.trimRight =
  function(c) {
    c = c || ' ';
    return this.replace(new RegExp(''+c+'+$'),"");
  };
String.prototype.trim =
  function(c) {
    return this.trimLeft(c).trimRight(c);
  };
String.prototype.padLeft =
  function(l, c) {
    c = c || ' ';
    var s = this.toString();
    while (s.length < l) s = c + s;
    return s;
  }
String.prototype.padRight =
  function(l, c) {
    c = c || ' ';
    var s = this.toString();
    while (s.length < l) s = s + c;
    return s;
  }
String.prototype.valiDate =
  function() {
    if(/^(0[1-9]|[12][0-9]PO|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9]{2}$/.test(this)) {
      var v = this.replace(/[- /]/g,'.').split('.');
      var d=parseInt(v[0],10), m=parseInt(v[1],10), y=parseInt(v[2],10);
      var o = new Date(y, m - 1, d);
      return o.getDate() == d && o.getMonth() + 1 == m && o.getFullYear() == y;
    }
    else
      return false;
  }

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

valiDate v2.0

Daha önce ilk versiyonunu sizlerle paylaştığım valiDate metodunu biraz daha geliştirdim. String nesneleri doğrulama amaçlı kullandığım için String nesnesinin prototype’ına ekleyerek herhangi bir metin değişken üzerinde kolayca tarih doğrulaması yapılabilmesine olanak sağladım. Ayraç olarak “-“,” “,“/” ya da “.” karakterlerini kullanıyor, yani doğrulanan metnin ilgili ayraç ile ayrılmış dd.mm.yyyy formatında olmasını bekliyor.

/*
 * valiDate
 * https://www.karalamalar.net/
 *
 * Copyright (c) 2009 İzzet Emre Erkan
 * Licensed under Creative Commons Attribution-Share Alike 3.0 Unported License
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 * Date: 2009-10-08 16:51:00 +0300 (Thu, 08 Oct 2009)
 * Revision: 6
 */
String.prototype.valiDate =
  function() {
    if(/^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9]{2}$/.test(this)) {
      var v = this.replace(/[- /]/g,'.').split('.');
      var d=parseInt(v[0],10), m=parseInt(v[1],10), y=parseInt(v[2],10);
      var o = new Date(y, m - 1, d);
      return o.getDate() == d && o.getMonth() + 1 == m && o.getFullYear() == y;
    }
    else
      return false;
  }

Metodun küçültülmüş halini (640 byte) buradan edinebilirsiniz.

Web geliştiricilerinin işine yarayacak 20 bookmarklet (web aparatı)

Webde uygulama geliştirirken genelde Firefox kullanıyorum. Geliştirme sürecinde de diğer tarayıcılarla uygulamayı test edip gereken önlemleri alarak tüm tarayıcılarda aynı sonucu alacak şekilde uygulama geliştirmeye çalışıyorum. Bu süreçte en çok baş ağrıtan tabii ki Internet Explorer oluyor. Bir tarafta test ettiğim dört tarayıcı (Firefox, Chrome, Opera, Safari) diğer tarafta Internet Explorer sürümleri (IE 6, IE 7, IE 8). Sağolsun Microsoft, peşpeşe çıkan iki sürüm bile birbirini tutmadığından ve piyasada kullanım oranları hiçe sayılamayacak düzeyde olduğundan, bir de böyle sancılı bir süreç ortaya çıkıyor.

Geliştirme sürecinde Firefox kullanmak çok büyük rahatlık. Web Developer araç çubuğu ve Firebug neredeyse tüm ihtiyaçları karşılıyor. Diğer tarayıcılarda ise bu iki eklentinin getirdiği rahatlığı yakalayabilmek bir kaç ekstra aparat kullanmam gerekiyor. Asıl ismi Bookmarklet olan bu kavram için malesef güzel Türkçemizde doğru bir karşılık yok ya da ben bilmiyorum. Ben web aparatı ya da kısaca aparat demeyi tercih ediyorum.
Okumaya devam et Web geliştiricilerinin işine yarayacak 20 bookmarklet (web aparatı)

Parça Tanımlayıcılar ile Cross Domain Frame İletişimi

Yazılarımı yazarken genelde ingilizce terimlerin varsa Türkçe karşılıklarını yoksa en yakın anlamlarını kullanmaya çalışıyorum. Ne var ki Türkçe yeterli kaynak olmadığından ve ingilizce kaynaklar çok fazla olduğundan çoğu zaman bir konu ile ilgili arama yaparken ingilizce anahtar kelimeler kullanıyorum. Bu makalenin başlığını da Parça tanımlayıcılar ile çapraz alan adı çerçeve iletişimi olarak yazmak isterdim fakat arandığında bulunabilsin diye mecburen bu şekilde yazmak durumunda kaldım.
Okumaya devam et Parça Tanımlayıcılar ile Cross Domain Frame İletişimi