Küçük bir ipucu: FireBug ile satır numarası bilgisi

11 Mar

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

Bazen kullandığım programların alternatiflerini araştırıyorum. Amacım eğer daha güzel ve daha kullanışlı özellikleri varsa onlardan yararlanmak.

Opera 10.50 çıkınca bir inceleyeyim dedim. Gayet hoş, güzel, hızlı. Birde beni Firefox’a bağlayan en büyük etken olan FireBug’ın Opera’daki alternatifi DragonFly’ı inceleyeyim dedim.

DragonFly ilk çıktığından buyana bayağı bir yol kat etmiş açıkçası. Aslında FireBug’ı taklitten başka bir şey değil ama olsun oda bir marifet. Microsoft gibi bir firma bile beceremediğine göre büyük bir şey olsa gerek.

DragonFly gerçekten güzel. FireBug’a alternatif bir kaç görsel güzellikleri var.

Gelelim küçük ipucumu yazmama neden olan kısıma. FireBug’da beni cezbeden şey, ayrıntılarında bir çok avantajın gizli olması. Bunlardan biri seçtiğimiz elemanı etkilyen tanımların hangi doküman içinde yer aldığını göstermesi ve hangi satırda olduğunu belirtmesi. Belki küçük bir ayrıntı ama benim çok işime yarıyor. Hemde çok.

4-5 ay önce ben css kodlarımı her tanım bir satıra gelecek şekilde yazıyordum. Sebebi çok açık kodların okunabilirliği artıyordu böylece. Sonra fark ettim ki ben kodları okumuyorum artık FireBug ile yakalıyorum ve satır numarasından ilgili dokümanı açıp müdahele ediyorum. Bununda etkisi ile her satırda bir tanım yerine her satırda bir seçici şeklinde css dosyalarımı yazmaya başladım ve bu bana çok büyük bir yer kazandırdı.

Evet bazı küçük özellikleri fark etmesekde bize çok büyük faydalar sağlayabiliyor.

Sağol FireBug. Sen olmasan bu iş gerçekten zor olurdu.

Yorum yok

Süper bir özellik display:inline-block

28 Şub

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

Alışkanlıklar kolay kolay bırakılmıyor. Zamanında display:inline-block özelliğini Firefox desteklemediği(Firefox desteği 3. sürümden itibaren geldi) için kullanmıyordum. Hala orada kalmışım hiç kullanmıyorum bu özelliği, şimdi bir projede gerekti ve kullandım. Çok hoşuma gitti. Tekrar bir hatırlayalım display:inline-block özelliği hibrit bir özelliktir. Bir yanı satır içi davranırken bir yanı blok davranır.

display:inline-block tanımı yapılmış elemanlar satır için akış içinde satır içi eleman gibi davranırken, elemente genişlik, yükseklik ve dikey margin değerleri tanımlanırsa satır içinde blok-level özelliğine bürünür.

display:inline-block elementler çevresindeki elementlere ve satır içi kutu içeriklerine göre farklı davranışlar gösterir.

Durumu daha iyi anlamak için genel bir örnek yapalım. 3 paraftan oluşan bir içeriğimiz olsun ve bu içerikteki belli bir kısmı paragraf etiketi içine alalım ve bunlara sırası ile display:block, display:inline ve display:inline-block tanımları atayalım

<div id="denemeBir"> Lorem ipsum dolor sit amet... <p>Praesent id nunc eros. Integer mauris orci, venenatis ac tempor ut, gravida ac diam. </p> Pellentesque...</div>
<div id="denemeIki">Quisque at venenatis nulla...<p>Nam fermentum porttitor hendrerit.</p> Mauris ante nulla..</div>
<div id="denemeUc"> Sed urna neque...<p>Sed est lacus, laoreet at malesuada quis, convallis ut nibh.</p> Sed dapibus...</div>

CSS kodu

div {margin: 10px 0; border: 1px solid #000;}
p {border: 1px dotted #000;}
    div#denemeBir p {display: block; width: 50px; text-align: center; background-color:#FF0}
    div#denemeIki p {display: inline; width: 50px; text-align: center; background-color:#0FF}
    div#denemeUc p {display: inline-block; width: 50px; text-align: center; background-color:#F0F}

Örneği görmek için tıklayınız.

Aynı yapıdaki elemanların display özelliğine sırası ile block, inline ve inline-block tanımlarını atadık.

display:block uygulanan paragraf kendisine atanan width, text-align:center özelliğini yorumlamış ve blok-level bir element olarak sonrasına bir boşluk bırakmıştır.

display:inline tanımı yapılmış paragraf kendisine atanan width, text-align:center tanımlarını görmemiştir.

display:inline-block uygulanmış paragraf ise kendisine uygulanan width ve text-align:center tanımlarını görmüş ama bir blok-level element gibi sonrasına bir boşluk bırakmamıştır. Tam bir hibrit özellik göstermiştir.

display:inline-block tanımını daha iyi anlamak için nerelerde kullanırız neler yapabiliriz buna bakalım.

Float kullanmadan display:inline-block ile elemanları yan yana dizmek

<div id="menu">
<a href="">Ana Sayfa</a>
 <a href="">Ürünler</a>
<a href="">İletişim</a>
</div>

CSS kodumuzu yazalım;

#menu a{
  width:150px;
  height:50px;
  display: inline-block;
  margin:0;
  padding:5px;
  color: #1B1B1B;
  background-color: #E2E2E2;
  text-decoration: none;
  border-top:5px solid #999
}

Örneği görmek için tıklayınız.

Bu kod ile biz öğeleri yan yana dizeriz. Normalde hiç bir tanım yapmasak da bu elemanlar yan yana dizilecekti, ancak bu elemanlar arasındaki mesafeyi ayarlıyamıyacaktık. Hem satır içi eleman gibi yan yana dursun hemde genişlik, yükseklik ve margin tanımlarını uygulayalım istersek display:inline-block tanımı yapmalıyız.

Dikeyde ortalama

Float uygulanmış elemanların dikeyde ortalamak çok zordur, aksine display:inline-block uyguladığımız elemanları sadece vertical-align özelliği kullanarak dikey ortalama yaparız.

Bir örnek yapalım. Yan yana dizilmiş üç kutu hazırlayalım ve bunları kapsayıcı katmana göre dikey olarak üstte, ortada ve altta hizalayalım.

<div class="anaKapsul">
    <div class="solKutu">Sol</div>
    <div class="ortaKutu">Orta</div>
    <div class="sagKutu">Sağ</div>
</div>

CSS kodumuzu yazalım.

.anaKapsul { border: 1px gray solid; padding: 5px; text-align: center; }
    .solKutu { display: inline-block; background-color: lightblue; vertical-align: middle; width: 200px; height: 200px; }
    .ortaKutu { display: inline-block; background-color: yellow; vertical-align: middle; width: 200px; height: 150px; }
    .sagKutu { display: inline-block; background-color: gray; vertical-align: bottom; width: 200px; height: 100px; }

Örneği görmek için tıklayınız.

Firefox, Safari, Google Chrome, Opera ve İE8′de bu görüntüyü elde ederiz. Ancak ie7 ve ie6′da durum böyle değildir.

Bu tarayıcılarda aynı sonucu elde etmek için bu tarayıcılar için bu elemnalara display:inline ve zoom:1 tanımı yapmalıyız. Bunun için tüm tarayıcılar için düzeltmeler kısmındaki kodlardan yararlanacağım.

*:first-child+html div.anaKapsul div{display:inline; zoom: 1;}
* html div.anaKapsul div{display:inline; zoom: 1;}

Bu kodları ekledikten sonra sorunumuz düzeldi.

Kaynaklar

3 yorum

IE8 Açılır Menü İçindeki Input Alanı Üzerince Gelince Menü Kapanma Sorunu

26 Şub

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

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

Yorum yok

jQuery İpuçları – 2

19 Şub

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

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

5 yorum

Google Analitics Asenkron Kod’a Geçiş

15 Şub

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

Bir çok sitede site trafiğini izlemek için insanlar google analitics hizmetini kullanıyor. Güzel bir hizmet, hemde ücretsiz. Bulunmaz bir nimet. Zaten daha önce paralı idi. Sonra google alınca ücretsiz yaptı.

Sitelerinin performansına dikkat eden herkesin gözüne takılmıştır google analitics’in kodları. Açıkçası ben sitemi yavaşlattığı için google analitics’ten vazgeçicektim. Bir aralar site çok yavaştı. O zamanlar düşünüyordum.

Google çalışanlarıda bu konudaki şikayetleri göz önüne alarak asenkron kod geliştirmişler. Asenkron kod sayesinden bir yandan google kodu çalışırken bir yandanda diğer içerikler taranabilme olanağı elde ediyor sistem, buda sitemizin daha hızlı açılmasını sağlayacaktır.

Kodlar aşağıdaki gibi;

<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();
</script>
<!-- site icegi buradan sonra gelir -->
</body>
</html>

Kodumuz eskisi gibi karmaşık ama siz karmaşıklığa aldanmayın. Burada yapacağımız şey çok basit. 9. satırdaki UA-XXXXXXX-X kısım yerine gooagle analytics’in bize verdiği kodu yerleştirmek.

Burada dikkat edeceğimiz bir husus daha vardır. Normalde javascript kodlarının </head> öncesine yazmamız önerilir, sitemizin performansı için. Ancak asenkaron nalytics kodları <body> etiketi sonrası yazmanız öneriliyor.

Sonuçta ben kullanıyorum gayet iyi, hızlandı site. Çok büyük beklentiye girmeyin ama hızda bir atış olduğu hissediliyor.

Kaynak

10 yorum

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

11 Şub

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

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

6 yorum

Sayfa 1 - 8712345...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.