jquery 1.3.2 sürümünde check ve radio change olayı sorunu ve çözümü

5 Tem

Yazı Fatih HAYRİOĞLU tarafından Javascript, jquery kategorisine eklendi.

jQuery biz arayüz geliştiriciler için çok büyük bir yardımcı. Devamlı güncellenen jquery kütüphanesi bazı geniş çaplı sitelerde yeni sürüme geçmek o kadarda kolay olmuyor. Burada yaşadığımız sorun eski sürüm jquery kütüphanesinin bir problemine kütüphane güncellemeden çözüm üretmek olacak.

Sorun şu; chackbox veya radio butonlara atanan change olayının işlememesi, daha doğrusu ilk tıklamada değil ikinci tıklamada çalışması ve bu sorunun sadece Internet Explorer sürümlerinde(6,7,8) meydana gelmesi.

Çözüm için yapmamız gerekn çok basit

$("#fatih").click(function() { this.blur(); });

Aslında yaptığımız input alanından focus’u kaldırmak oldu. Evet belki pek işinize yaramıyacak ama benim gibi çok arayan bir kişi buradan yararlansa yeter.

Kaynak

Yorum yok

ie6′da border-color:transparent desteği sağlamak

29 Haz

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

Geçen araştırırken gördüm. border-color:transparent özelliğini İnternet Explorer 7. sürümünden sonra desteklemeye başlamış, yani ie6’da desteklemiyor. Internet Explorer 6’nın son günlerini yaşadığımız bu günlerde küçük bir bilgilendirme olarak geçeceğim bu sorunun çözümünü.

ul li a{
	border-right:1px solid #f00
}

ul li a:hover{
	border-right:1px solid transparent;
}

Ardalanında renk geçişi olan bir menüde menü elemanları arasında kenar çizgisi olduğunu farz edelim. Menünün seçili veya üzerine geldiğinde ise bu kenar çizgini kaldıralım. Kenar çizgisini sıfırlamak kaymaya neden olur. Saydam kenar çizgisi vermek kolay ve güzel çözümlerden biridir. Peki ie6 için ne yapacağız.

*html ul li a:hover{
    border-color: pink;
    filter: chroma(color=pink);
}

* html sadece ie6’nın göreceği bir seçici, ilk olarka bir kenar çizgisi tanımlıyoruz(pink – pembe) sonrada chroma filtresi ile pembe alanları saydam yapıyoruz. Ufak bir düzenleme ile işimizi hallediyoruz.

Ufak bir bilgi ama bir kenarda yazılı olmasında yara var.

Kalın sağlıcakla

Kaynaklar

3 yorum

Firefox 5

24 Haz

Yazı Fatih HAYRİOĞLU tarafından CSS, Haberler, HTML5 kategorisine eklendi.

Firefox’un 5. sürümü çıktı. En güzel yanlarında birisi artık Chrome gibi otomatik güncellenmesi. Her sürümde tekrar tekrar indirme dönemi bitti Firefox içinde darası diğer tarayıcıların başına, özellikle İnternet Explorer’un. Otomatik güncelleme olmadı ise Yardım- Firefox hakkında penceresinde güncelle butonu ile de yapabilirsiniz.

Chrome’un hızlı sürüm numarasını kıskanan Firefox, 4.5 sürüm diyebileceğimiz bir sürümü yeni bir sürüm olarak bizlere sundu. Yeniliklerine göz atalım.

  • CSS animasyon özelliğini destekliyor
  • Canvas, javascript, hafıza ve ağ performansını arttırmış
  • HTML5, XHR, MathML, SMIL ve canvas standartlarını geliştirmiş
  • Aktif olmayan sekmelerdeki setTimeout ve setInterval değeri 1000ms ile sabitlenerek performans artışı sağlanmış.
  • Firefox 5 daha az kullanıcı bilgisini göndererek kullanıcı mahremiyetine daha fazla duyarlı olacakmış. Do-Not-Track başlık özelliği ile daha iyi gizlilik sağlıyor.
  • HTTP mantalitesi yenilenerek performans arttırılmış

Daha hızlı bir sürüm olmuş, bu hız meselesini gittikçe kavrıyor Firefox, yakında chrome’u yakalar gibi.

Ayrıca Firefox 5 ile gelen yeni bir site http://firefoxtweetmachine.com/ Twitter makinesi güzel olmuş.

Kaynaklar

7 yorum

Googe Chrome 12 ile birlikte gelen güzel bir özellik(Built-in de-obfuscation)

22 Haz

Yazı Fatih HAYRİOĞLU tarafından Haberler, Javascript kategorisine eklendi.

Javascript kodlarının daha hızlı yüklenmesi, dosya boyutunun azaltılması için ve kodları kopyala-yapıştır ile kolayca almak isteyenler engellemek için javascript kodlarını sıkıştırırız.

Evet güzel bu özelliklerin her biri güzel ancak bir sorun olduğunda kodu göremiyoruz. Chrome yeni sürümünde güzel bir özellik getirmiş. “Sıkıştırmayı geri al” diye Türkçe’ye çevirebileceğim bir özellik ile tek tıkla kodu anlaşılabilir bir hale getirebiliyoruz.

Değişken isimlerini kısa göstermesi gibi küçük bir sorun dışında gayet başarılı bir özellik olmuş.

Yeni sürümlerde ikon olarak eklenmiş.

3 yorum

Genişliği Belli Olmayan Blok-level Elemanları Yatayda Ortalamak

10 Haz

Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.

CSS ile yatayda ortalamak deyince aklımıza hep genişliği sabit olan alanlar geliyor. Ancak genişliği sabit olmayan elemanları ortalamak biraz daha farklı oluyor.

Genişliği sabit olan blok-level elemanları ortalamak için birçok kaynak var iken genişliği belli olmayan blok-level elemanları ortalamak için çok fazla kaynak bulamıyoruz. Google’da yaptığım aramalarda rastladığım makalelerde 2 yöntem ile karşılaştım. Bu iki metodu sizlerle paylaşacağım, siz kendinize uygun olan metodu uygulayabilirsiniz.

Metot 1 – Yüzde Yöntemi ile Ortalama

Genelde bu yöntemi anlatırken menü örnekleri üzerinden anlatılmış bende geleneği bozmayayım.

<div id="menuKapsulu">
<ul>
   <li>Elma</li>
   <li>Armut</li>
   <li>Malta Eriği</li>
</ul>
</div>

Alışkın olduğumuz bir menü kodu. CSS kodumuzu ekleyelim. İlk olarak kapsayıcı eleman tanımlarını yazalım.

#menuKapsulu{
  float:left;
  width:100%;
  background:#369;
  overflow:hidden;
  position:relative;
}

Menü kapsayıcısının sayfayı tam kaplaması için %100 değeri ve float:left değeri atandı.

#menuKapsulu ul{
  clear:left;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  left:50%;
  text-align:center;
  background-color:#990000
}

float:left değeri ile içeriği çepeçevre kapsaması sağlanıyor. left:50% değeri ile menu ortalanıyor. Ancak bu ortalama içeriğin genişliğini içermez. 

#menuKapsulu ul li{
  display:block;
  float:left;
  list-style:none;
  margin:0 10px 0 0;
  padding:10px 0;
  position:relative;
  right:50%;
}

Buradaki püf noktası; right:50% değeri ile menü genişliğinden dolayı sağa doğru kayan içeriği tam olarak ortalı hale getiriyoruz.

İnternet Explorer 6+, Firefox2+, Safari, Chrome ve Opera destekliyor.

Avantajları

  • Tüm tarayıcılar destekliyor.
  • Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
  • Kolay kullanımı
  • Farklı tarayıcılar için farklı kod yazımı gerektirmemesi

Dezavantajları

  • Kapsayıcı elemana atana overflow:hidden nedeni ile yaşanabilecek olumsuzluklar. Mesela açılır menülerde sorun olur.
  • Ortalanacak eleman kapsayıcısı, yani burada ul ortalı olmadığı için background, border ve kendini gösterecek diğer tanımların yapılmaması gerekir. Buda bir dezavantajdır.

Metot 2: display:table Metodu

Genişliği belli olan elemanları ortalarken kullandığımız margin:0 auto tanımını bu sefer genişliği belli olmayan alanlar içinde kullanıyoruz.

HTML kodumuz aynı; 

<div id="menuKapsulu">
   <ul>
       <li>Elma</li>
       <li>Armut</li>
       <li>Malta Eriği</li>

</ul>
</div>

Ortalanacak alana margin:0 auto ve display:table tanımlarını yapıyoruz. 

#menuKapsulu ul{
 list-style:none;
 margin-left: auto;
 margin-right: auto;
 display: table;
}

#menuKapsulu ul li{
 float:left;
 margin:0 10px 0 0;
 padding:10px 0;
}

Sonuç istediğimiz gibi, ancak bir sorunumuz varki oda display:table özelliğini İnternet Explorer 6 ve 7. sürümleri desteklemiyor. Peki, ne olacak derseniz bu bir hasLayout sorunu ve çözüm için zoom:1 tanımı kullanmamız gerekiyor.

*:first-child+html #menuKapsulu{
   text-align:center
}

* html #menuKapsulu{
   text-align:center
}

*:first-child+html #menuKapsulu ul{
 display: inline;
 zoom: 1;
}
* html #menuKapsulu ul{
 display: inline;
 zoom: 1;
}

Kapsayıcı kapsüle text-align:center tanımı yapıyoruz sonra listemize display:inline yapıyoruz. text-align:center inline elemanları ortalıyor bildiğiniz gibi. Burada yaptığmızda bu

Avantajları

  • Tüm tarayıcılar destekliyor.
  • Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
  • Birinci mettodaki overflow:hidden dan kaynaklana sorun burada yoktur.
  • Birinci metotdaki ul ye görsel özellik tanımlayamama sorunu bu metotda yok.

Dezavantajları

  • Farklı tarayıcılar için farklı kod yazımı gerektirmesi

Kullandıkça avantaj ve dezavantajlarını daha iyi göreceğiz.

Kalın sağlıcakla.

Kaynaklar

4 yorum

Sürüm Kontrol Sistemi Git

21 May

Yazı Fatih HAYRİOĞLU tarafından Haberler kategorisine eklendi.

Daha önceleri pek kullanmadığım sürüm kontrol sistemleri zamanla ihtiyaç haline geliyor. Sahibinden.com’da çalışmaya başladığımda bazı yenilikler ile tanıştım, bunlardan biri de Git ile tanışmam oldu, sağ olsun arkadaşların yardımı ile yavaş yavaş öğrenmeye başladım.

Ben burada kendi öğrenme sürecimde öğrenebildiklerimi sizlerle paylaşmak istedim. Bu konuda daha başlangıç seviyesindeyim. Anlatacaklarım daha çok başlangıç seviyesinde olacak.

Bir projede tek başına çalışıyor iken çalışma süreci boyunca belli aralıklarla çalıştığım dosyaların bir yedeğini alıp arşiv klasörümde saklıyorum. Farklı sürümlerin yedeklerini alıp çalışmak bilgisayarda iş yapan herkesin kazanması gereken bir özelliktir, yoksa çok acı örneklerle öğrenmek zorunda kalırız.

Tek başımıza çalışırken yedekleme ile aşabildiğimiz sürüm kontrolünü birden fazla kişinin çalıştığı projelerde ise bir programcık vasıtası ile yapmak şart halini aldı. Aslında tek kişi çalışılan durumlar içinde sürüm kontrol araçları kullanılabilir.

Birden fazla kişinin çalıştığı durumlarda aynı dosya üzerinde çalışma imkanı sağlar sürüm kontrol araçları. Projenin bir takım çalışması ile ve veri kaybına neden olmadan çalışmasını sağlayan araçlardır sürüm kontrol sistemleri.

Sürüm kontrol sistemi olarak sadece Git yoktur, aşağıda diğer sistemleri sıralanmıştır.

  • Subversion
  • Mercurial
  • Perforce
  • Bazaar

Sadece isimleri verip geçeceğim. Farklı sistemleri karşılaştıran birçok site var. http://whygitisbetterthanx.com/ sitesinden Git’in diğerlerine göre avantajlarını görebilirsiniz.

Git’in en büyük farkı merkezi değil, dağıtık olması. Bu şu anlama geliyor tek merkezli bir yapı yerine dağıtık bir yapıya sahip bir sistem kullanılır. Dağıtık sistemlerdeki avantaj sistemi kullanmak için merkezi bir depoya sahip değildir, kullanıcı internetin olmadığı yerlerde sistemi kullanma imkanı sağlıyor. İnternete veya sisteme bağlandığımızda değişiklikler sisteme aktarılır. Bu bize çok büyük esneklik sağlar.

Yukarıdaki grafikte çok iyi bir şekilde göstermektedir.

"……
Merkezi sistemlerde tüm bilgi bir noktada saklanır. İstemciler ağ üzerinden depo üzerinde yaptıkları değişiklikler gönderirler. Bu değişiklikler merkezdeki depoya uygulanır ve depo yeni bir hal alır. Değişikliklerden haberdar olmak için işlemcilerin merkeze uğraması gerekir. Sürümler arasındaki farkları sorgulamak gibi temel bir takım işlemler için hep merkezdeki bilgilere danışılması gerekir.

Dağınık sistemlerde ise bütün üstbilgiler (önceki sürümler v.b.) yerel bilgisayarda saklanır. Bu nedenle bir merkeze ihtiyaç duymadan tüm işlemleri yapabilmeniz mümkündür.

Çalışmalarınızla ilgili tüm üstbilgilerin bir merkezde saklanması, veri yedeklemenin önemini arttırır. Halbuki bunun aksine, dağıtık sistemlerde bir depoyu alan her geliştirici çalışmanın bütün kopyasına sahiptir, dolayısı ile ne kadar geliştirici varsa, o kadar yedekleme yaparsınız. Bu nedenle geliştiriciler birbirlerine de bağımlı değillerdir.
…………" (1)

Şirkette Mac kullanılıyor ve git işlemlerini komut sistemi üzerinden yapıyoruz. Terminal üzerinde komutları yazıyoruz. Git kullanımı kolaylaştırmak için bazı programlar var, ancak biz genelde komut satırlarını kullanıyoruz.

Git Komutları

İlk başta sadece master dallanması vardır.

git status: Bulunduğumuz durumu gösteren koddur. Yapılan değişiklikleri, eklemeler ve silinen dosyaları gösterir.

$git status

git branch: Oluşturulan dallanmaları(brach) görmek için 

$git branch

git-create-branch: Bu kod sadece bizim şirkete özel bir kod, (kendime notlar) :D Yeni bir dallanma(branch) oluşturmak için. -x kısayolu oluşturulan dalanmanın kategorisini belirler. Bizde en çok kullanılan iki kategori var düzeltme(fix) ve özellik(feature). Düzeltme(fix) için -x ; Özellik(feature) için -e kısa yollarını kullanıyoruz.

$git-create-branch -x dallanma_ismi

git pull: master’dan güncel hali almak için 

$git pull

git add: Depoya bir dosya eklemek için 

$git add dosya_yolu/dosya_adi

Birden fazla dosya eklemek için arada boşluk bırakarak ekleme yapılabiliyor. 

$git add dosya_yolu/dosya_adi dosya_yolu/dosya_adi dosya_yolu/dosya_adi

git commit: Değişiklikleri yaptıktan sonra yorum ekliyoruz. -am kısaltması all ve message baş harflerini ifade eder.

$git commit -am "yorum_yaz"

git push: Yorumu yazdıktan sonra dosyaları gönderiyoruz

$git push

git checkout: Dallanma(Branch) değiştirmek için 

$git checkout branch_ismi

ilk defa geçilen bir branch ise 

$git checkout origin/feature/branch_ismi --track

git grep: Mevcut branch içinde bir kelime veya ifadeleri bulamak için 

$git grep "aranacak_kelime"

komutunu kullanıyoruz.

git merge: Eğer yaptığımız değişiklik ile aynı anda başkasıda bir şeyler yaptı ise çakışma(conflict) oluyor, düzeltmek için birleştirme(merge) işlemini yapıyoruz.

$git merge master

veya 

$git merge origin

yapıp değişiklikleri görebiliyoruz. Bu komutu yazdıktan sonra çakışmanın olduğu dosyayı açıyoruz.

# MASTER / ORIGIN

git merge master
git merge origin

# <<<<< HEAD
@MASTER
======================
@REVISION-2
>>>>>>>>>>>>

Şeklinde bir işaretlerle karşılaşırız. Burada hangi alan doğru ise onu bırakıp diğer alanı silerek dosyayı kaydediyoruz ve dosyanın son hali o oluyor.

git help: son olarak bir komut hakkında yardım almak için 

$git help komut_adi

ile komut hakkında bilgi alabiliyoruz.

Sonuç

Başta söylediğim gibi Git konusunda daha yeniyim, öğrenme sürecim devam ediyor. Bana öğrenme sürecimde yardımcı olan arkadaşlarımada teşekkür ediyorum, özellikle Doruk, bu konuda bildiğim bir çok şeyi ondan öğrendim.

Kaynaklar

12 yorum

Sayfa 5 - 101« İlk...34567...102030...Son »

Son yazılar

Kategoriler


Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.