‘ie6’ etiketi için sonuçlar

jQuery İpuçları – 2

Şubat 19th, 2010 • 5 yorum Javascript, jquery
Etiketler: , , , , , , ,

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);
})

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.

Kaynaklar

İnternet Explorer’da sağdaki sabit kaydırma çubuğunu kaldırmak

Şubat 11th, 2010 • 6 yorum CSS
Etiketler: , , , , ,

Pek nadirde olsa böyle bir istek ile karşılaşıyorum. Bu ikinci oldu. İlk başta bunun bir çözümü yoktur diye düşündüm(Bunu düşünmemin nedeni daha önce böyle bir istek ile karşılaştığımda çözümünü bulamadım diye aklımda kalması). Ancak sonra bazı sitelerde böyle bir şey yapıldığını görünce, araştırmaya karar verdim ve çözümü buldum.

Genelde %100 flash sayfalarda veya kendi içinde kaydırma çubuğu çıkan sayfalarda bu tip bir istek geliyor.

Firefox, İnternet Explorer 8, Safari, Google Chrome gibi yeni nesil tarayıcılar eğer içerik uzun değilse kaydırma çubuğunu göstermiyor. Ancak ie6 ve ie7 de durum böyle değil. İçerik olsun yada olması sağda yatay kaydırma çubuğu daima görünüyor. Bu durumu eşitlemek için çok basit bir kod yazmamız yeteli oluyor.

html {overflow:auto;}

Kaynaklar

PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II

Ocak 6th, 2010 • 30 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , , , , , ,

Ana Sayfa Kodlaması

Bir önceki makalemde sizlere kodlamaya başlamadan önceki süreci anlattım. Şimdi sizlerle sitenin Ana Sayfasını nasıl kodladığımı anlatmaya çalışacağım. Bu makaleye yazacağımı düşünerek kodlama yaparken notlar tutmuştum, bu makale biraz da o notların derlemiş hali şeklinde olacaktır.

Okumaya devam edin »

Fatih Hayrioğlu’nun not defteri – 2009

Ocak 2nd, 2010 • 5 yorum CSS, Haberler
Etiketler: , ,

Geçen seneyi değerlendirirsem. Genel manada pek verimli bir sene olmadı. Çok fazla makale yayımlayamadım. Umarım 2010 daha iyi geçer. 

Ocak 

Şubat 

Mart

Nisan

Mayıs

Haziran

Temmuz

Ağustos

Eylül

Ekim

Kasım

Aralık

IE6′da Liste Ardalan Görmeme Sorunu

Aralık 7th, 2009 • 8 yorum CSS, XHTML
Etiketler: , , , ,

İE hatalar serisini devam ediyoruz, ben uğraşmaktan ve yazmaktan bıktım ama ie hata vermekten bıkmadı.

Bu seferki hataya menüde denk geldim. Menüme background-image ile bir ikon koydum, her şey güzel ama ie6 görmedi. Araştırdım ve sonuç ie sorunu çıktı tabiki. Sorunun tam tanımı şöyle; listeleri(ul, ol ve dl) kapsayan elemana eğer float ve position:relative tanımı yaptı iseniz, ie6 liste background özelliklerini(resim veya renk) görmüyor.

Bu durmu bir örnek ile gösterelim.

<!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>ie lsite ardalan sorunu</title>
<style>
#menuKapsul{
position:relative;
float:left;
}
ul li{
background:url(ikon.gif) 3px 9px no-repeat;
list-style:none;
padding-left:12px;
}
</style>
</head>
<body>
<div id="menuKapsul">
	<ul>
    	<li>Liste 1</li>
        <li>Liste 2</li>
        <li>Liste 3</li>
    </ul>
</div>
</body>
</html>

Yukarı görülen basit bir listenin ardalanına resim yerleştiriyoruz. Kapsayıcı elemanada position:relative; ve float:left; tanımları atanmış olsun. Aktif tarayıcıların tümünde sorunsuz çalışan kodumuz, ie6′da sorunlu görünecektir. Sorun liste ardalan resminin görünmemesidir. Sorunu çözerken bayağı bir cebelleşmiştim. Sonunda çözümü bulunca ve bu çözümde çok basit olunca sevineyim mi üzüleyim mi şaşırdım.

Çözüm ise çok basit. Ardalan resmi uyguladığımız liste öğesine postion:relative tanımı yapıyoruz ve bu kadar düzeliyor. 

ul li{
	background:url(ikon.gif) 3px 9px no-repeat;
    list-style:none;
    padding-left:12px;
    position:relative
}

bu kadar bu kod bizim sorunlarımızı gideriyor.

Bir başka çözüm yoluda kapsayıcı bir eleman daha ekleyerek bu elemana farklı konumlandırma değeri atayıp çözebiliriz, ama bu pek mantıklı değil, fazladan kod eklememiz gerektiği için. En iyi position:relative ekleyip sonuca gitmek.

Örnek kodu görmek için tıklayınız.

Bir ie6 sorununun daha üstesinden geldik bir başka ie6 sorunu ile daha karşınızda olana dek hoşça kalın.(Bu ie6 oldukça nasıl hoş kalacağız oda ayrı bir konu.)

CSS Yorumlarında Türkçe Karakter Kullandığımızda İE6′da Sorun Çıkarıyor

Kasım 12th, 2009 • 9 yorum CSS
Etiketler: , , ,

Bu durumla bir kaç defa karşılaştım ve sonuncusunda FirendFeed‘de yazdım, hatta benden önce Burak Dönertaş‘da yazmış konuyu. Konuyu biraz daha ayrıntısı ile burada paylaşmak istedim.

Sorunu başlıkta açıklayıcı bir şekilde anlattım sanırım. Biraz daha açarsam; css kodlarımızı yazarken çeşitli notlar alırız, örneğin sayfa yapısını oluşturan alanların isimleri(ustAlan), farklı tarayıcılar için yaptığımız düzeltmeler için tuttuğumuz notlar(kapsayamamaSorunu) vb.

CSS yorum satırları /* yorum */ işaretleri içinde yazıyoruz ve tarayıcılar bunları görmezden geliyor.

İnternet Explorer 6 eğer dosyanız UTF-8 ile kaydedilmemiş ise sorun çıkarıyor. Burada dosyayı utf-8 ve utf-8 BOM’suz kaydetmek arasında bir fark olmadı. Örnek dosyamı utf-8 ve utf-8 BOM’suz kaydettiğimde bu sorun düzeldi. Utf-8 ile kaydedince Türkçe karakterler bozuldu ancak tekrar yazıp kaydedince bir sorun olmadı.

<!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>
<style type="text/css">
@import url("stil.css");
</style>
</head>
<body>
<p class="deneme1 deneme2">Fatih Hayrioğlu burada yorum yazmış sanane ie6, sen niye sorun yapıyorsun ki bu olayı.</p>
</body>
</html>

Bir paragraf yazı yazdık. Daha sonra 

.deneme1{ font:12px Arial, Helvetica, sans-serif}
/*Türkçe katakter içermeyecek miş*/
.deneme2{ color:#f00}

Css dosyasının içine yukarıdaki kodları yazdım. CSS dosyasını eğer ANSI formatında kayıtlı ise ie6 css kodlarımı görmüyor.

ansi_ff

Firefox ve diğer tarayıcılar ansi olmuş utf-8 olmuş fark etmiyor. Ama

ansi_ie6

İE6′da ise yukarıdaki gibi Türkçe karakter içeren yorum sonrasındaki sınıfı görmüyor. Daha sonra css dosyasını utf-8 olarak kaydedince sorun ortadan kalktı.

utf8_ie6

Eğer html ve css aynı karakter kodunda ise sorun olmuyor mesela ikiside iso-8859-9 ise sorun olmuyor. Ama ne zaman html utf-8 css iso-8859-9 olursa sorun oluyor.

Not: Karakter kodu değişiklikleri için NotePad++ kullandım.

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.