jquery için arşiv
IE8 Açılır Menü İçindeki Input Alanı Üzerince Gelince Menü Kapanma Sorunu
Şubat 26th, 2010 • CSS, jquery, XHTML
Etiketler: ie8, input, menü, sorun
Sorun tam olarak şu; açılır bir menü eğer bir resim üzerinde ise menü içindeki input alanı üzerine gelince menü istem dışı olarak kapanıyor. Diğer hiç bir tarayıcıda sorun yokken ie8 bu durumda sorun oluşturuyor.
İnternet Explorer’ın sorunlarına alışmış bu bünye Microsoft’un bu yeni nesil eskimiş tarayıcısından böyle bir sorun olmasını yadırgamadı açıkçası. Soruna ie7 gibi yorumlama kodunu ekleyerek çözmek istedim ama kod sitenin dinamik kısımlarında çalışırken statik kısımlarında çalışmadı.
Bu iş ile bir projede karşılaştım, proje ismini açıklamak sakıncalı olabilir diye ben size benzer bir örnek kodunu vereceğim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').hover(function(){
$(this).children(':last').show();
},
function(){
$(this).children(':last').hide();
});
});
</script>
<style type="text/css">
a{ position:relative;}
a div{display:none; padding:20px; background-color:#999; width:250px; position:absolute; top:18px; left:0}
a div input{ background:transparent}
</style>
</head>
<body>
<a href="javascript:;">menu aç
<div><input type="text" /></div>
</a>
<p><img src="http://www.fatihhayrioglu.com/wp-content/ie7_kaydirma_cubugu.jpg" width="450" height="398" /></p>
</body>
</html>
Örneği görmek için tıklayınız.
Bende sorunu araştırmaya başladım ve sonunda buldum. Sorun input‘a atanan background:none veya background:transparent tanımlamalarından kaynaklanıyor. backgorund’a renk veya resim tanımı yapınca sorun çözülüyor.
Ben tasarıma uymak için background’a resim tanımlayarak sorunu aştım.
Kaynak
jQuery İpuçları – 2
Şubat 19th, 2010 • 13 yorum Javascript, jquery
Etiketler: ie6, ipuçları, jquery, kontrol kutuları, metot zincirleme, toggle, toggleClass, zebra tablolar
Genel olarak kullandığım ve dikkatimi çeken jquery ipuçlarını sizlerle paylaşmaya devam ediyorum. İpucu serisinin ilkine buradan ulaşabilirsiniz.
1- toggle() ile kolayca gizle/göster yapmak.
Javascript ile en çok yaptığımız işlerden biriydi bir bağlantıya veya elemana tıklayınca açılan bir daha tıklayınca kapanan alanlar oluşturmak. jQuery bu iş için bize toggle() fonksiyonunu tanımlamış. Çeşitli kullanım şekilleri olsada ben size burada en basit şeklini anlatacağım.
$('p.hidden').toggle ();
Bu kadar basit bir kod ile işlem tamamdır. toggle() fonksiyonuna çeşitli animasyonlar ve işler ekleyebiliyoruz. Gayet kullanışlı bir özellik.
2- toggleClass() ile toogle uyguladığımız elemanlara sınıf tanımlama
Yukarıda yaptığımız uygulamaya ek olarak tetiklenen elemana bir sınıf tanımlamak için
$('p.hidden').toggleClass ("acik");
bu kod sayesinde mesela çok basit şekilde aç-kapa butonu yapabiliriz.
3- click() ile tetiklenen bağlantılarda ie6 sorununu gidermek
Bir bağlantıya jquery ile erişip click() metodunu uyguladığımızda ie6 ile sorun yaşıyoruz. Ben bu sorun için bir çözüm bulmuştum ancak Hüseyin Mert daha iyi bir çözüm buldu. Ben bu çözümü burada sizlerle paylaşmak istedim.
$("a").click(function(event){
event.preventDefault();
// yapılacaklar
});
Böylece sorunu aşmış oluyoruz. Hüseyin Mert’e teşekkürler tekrar.
4 – Metot Zincirleme özelliği ile daha kısa kodlar üretmek
Bir çok metodu ard arda aynı elemana yazmaktansa zincirleme kullanabilme özelliği sunuyor bize jQuery.
$('p.ilkParagraf').css ('color', '#ff0000').text ('Giriş').addClass ('yazi').fadeTo (1000, 1);
Yukarıdaki örnekte görüldüğü gibi ard arda metotları kullanabiliriz. Ancak çok fazla kullanmanın performansı etkilediğini unutmadan bu özelliği kullanalım.
5- Kontrol kutularının(checkbox) kontrolü
jquery ile kontrol kutularını kontrol etmenin bir kaç yolu var
if($('#deneme:checked').val() != null)
{
// işaretli ise bunu yap
}
//veya
if($('#deneme:checked').length != 0)
{
// işaretli ise bunu yap
}
//veya
$('input[name=deneme]').is(':checked')
$('input[name=deneme]').attr('checked')
// işaretli veya degil
$('input[name=deneme]').attr('checked', true);
6 – Arama metinlerini değiştirmek
Arama kutuları içine açıklayıcı metinler yazarız. “Anahtar Kelime”, “Arama” vb. gibi. bu metinleri yazarız, ancak kullanıcı bu alana odaklandığında bu metni kaldırmalıyız ve kullanıcı bir şey yazmadan çıkarsa o zamanda genel yazdığımız metni geri getirmeliyiz.
var aramaKutusu = $("#aramaAlani");
var aramaKutusuBasDeg = "Aranacak Kelime";
aramaKutusu.attr("value", aramaKutusuBasDeg);
aramaKutusu.focus(function(){
if(jQuery.trim($(this).attr("value")) == aramaKutusuBasDeg) $(this).attr("value", "");
});
aramaKutusu.blur(function(){
if(jQuery.trim($(this).attr("value")) == "") $(this).attr("value", aramaKutusuBasDeg);
})
Güncelleme: Bu kullanımın daha basit bir şekli var. yedincisenol’un yazdığı kod daha basit ve kullanışlı.
function doldur(o){ if (o.value==o.defaultValue){o.value="";} else if(o.value==""){o.value=o.defaultValue;}o.onblur=function(){doldur(o)}}
ve kodu sonra çağırmak için (jquery ile)
$("#inputId").focus(function(){ doldur(this) });
veya html içinden
<input name="adınız" value="Adınızı girini" onfocus="doldur(this)"/>
Kod için yedincisenol’a teşekkürler
7- Zebra tablo yapmak
Tablo okunabilirliğini arttırmak için bir satır farklı bir renk veya stil tanımlarız. Bunu javascript ile uzun yoldan yaparken jquery ile tek satır kod ile yapabiliyoruz
$("tr:nth-child(odd)").addClass("farkliSatir");
8 – Çok tekrarlanan seçicileri bir değişkene tanımlamak
$('p.ilkParagraf').css ('color', '#000000');
$('p.ilkParagraf').text ('Giriş');
$('p.ilkParagraf').addClass ('yazi');
$('p.ilkParagraf').fadeTo (1000, 1);
Yukarıdaki gibi bir kullanımda çok fazla tekrarlayan bir seçiciye bir değişkene atayıp daha optimum bir kod elde edebiliriz.
var $p = $('p.ilkParagraf');
$p.css ('color', '#000000');
$p.text ('Giriş');
$p.addClass ('yazi');
$p.fadeTo (1000, 1);
Bu kullanım ile eleman ilk başta bir değişkene atanıp ön belleğe alınıyor ve daha hızlı erişiliyor.
