Javascript için arşiv
jQuery İpuçları – 2
Şubat 19th, 2010 • 5 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);
})
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
Google Analitics Asenkron Kod’a Geçiş
Şubat 15th, 2010 • 10 yorum Haberler, Javascript
Etiketler: Google Analytics, Javascript, site izleme
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
- http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html
- http://www.electrictoolbox.com/google-analytics-asynchronous-tracking/
- http://davidwalsh.name/async-google-analytics
- http://webmasterformat.com/news/google-analytics-asynchronous-tracking
- http://www.webresourcesdepot.com/tracking-new-rss-subscribers-with-google-analytics-to-understand-them-better/
- http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html
- http://www.webmonkey.com/blog/New_Asynchronous_Script_Stops_Google_Analytics_From_Slowing_Down_Your_Site
- http://ajaxian.com/archives/google-analytics-unblocks-the-web-w-async-support
- http://www.webresourcesdepot.com/new-google-analytics-code-for-better-load-times/
- http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
- http://googlesystem.blogspot.com/2009/12/optimized-google-analytics-code.html
- http://blog.chartbeat.com/2009/12/04/google-analytics-goes-asynchronous/
- http://www.further.co.uk/blog/New-Google-Analytics-Asynchronous-Tracking-Code-241
- http://www.highposition.net/article/google-analytics-launches-asynchronous-tracking-code-for-greater-speed/4561763
PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması III
Şubat 9th, 2010 • 10 yorum CSS, Javascript, Web Standartları, XHTML
Etiketler: adım adım kodlama, alt sayfa, css-kodlama-düzeni, CSS-Layout, farklı tarayıcılara göre kod yazmak, psdtohtml, site-kodlama, tezahürat dinle, tezahürat ekle
Alt Sayfaların Kodlanması
Genelde siteler yapılırken ana sayfa ve alt sayfa olarak kodlanır. Bunun sebebi ana sayfalar tekildir, alt sayfalar ise birbirine benzeyen yapılardan oluşur. Bu nedenle alt sayfaların bir tanesi kodlanınca diğer sayfaların kodlanması daha az zaman alır. Bir çok freelance işinde ana sayfa farklı alt sayfalar farklı olarak ücretlendirilir. Neyse işin bu kısmına girmeyelim.
Eksiden sadece bir alt sayfa şablonu hazırlayıp diğer sayfa içeriklerini o şablondaki içerik kısmına girerek tüm siteyi oluştururduk. Şimdilerde ise neredeyse her sayfa için bir tasarım çıkıyor ve her birini ayrı ayrı kodluyoruz.
Fanatikmarslar.com sitesini düşünürsek; bana gönderilen alt sayfa tasarımlarından 4 tane farklı tasarıma sahip sayfa vardı. Diğerleri bunların kopyası gibi olduğu için ben burada sizlere bu 4 alt sayfayı nasıl kodladığımı anlatacağım.
Yukarıdaki 4 sayfada gördüğümüzü özetlersek; ilk olarak üst kısım ve alt kısmın ana sayfa ile aynı olduğunu görüyoruz. Orta kısım ise tüm alt sayfalarda aynı. İki kolonlu bir yapı ve sağ kolon sabit. Sol içerik kolonu içeriği değişiyor.
Kategori Listeleme Sayfasının Kodlanması
Orta kısmı iki kolona ayırıyorum. solOrtaAlan ve icerikalaniSag adını verdim. İki kolonu yan yana koymak için float ve genişlik tanımlarını yapıyoruz.
<div id="solOrtaAlan">
...
</div>
<div id="icerikalaniSag">
...
</div>
CSS kodunu yazalım
#solOrtaAlan{float:left; width:650px; margin:0 20px 0 10px; font:14px Arial, Helvetica, sans-serif; display:inline}
#icerikalaniSag {float:left; width:300px}
Sol Orta Alan
#solOrtaAlan tanımına margin tanımlarını yapıyorum. Burada "IE’da İkikat görülen Margin Problemi ve Çözümü" sorunu ile karşılaştığım için display:inline tanımı atadım.
Kodlamaya sol orta alandan devam ediyorum.
Başlık
<h1>Marşlar</h1>
Başlığımızı h1 ile tanımlıyoruz. Hem anlamlı kodlama hemde arama motorlarına uygun kodlama açısından sayfa başlığını h1 ile tanımlıyoruz. Diğer başlıklarıda sırası ile h2, h3, vd. şeklinde tanımlamalıyız. Şimdi burada gerekmediği için tanımları yapmadık.
Sıralama Alanı
Sıralama kısmına yaparken bu alanı sırasız listeler ile yapmayı düşündüm.
<div id="siralamAlani">
<ul>
<li><strong>Sıralama:</strong></li>
<li><a href="">Karışık</a></li>
<li><a href="">Popüler</a></li>
<li><a href="">Oley!</a></li>
<li><a href="" class="secili">Alfabetik</a></li>
<li><a href="">En Çok Tıklanan</a></li>
<li><a href="">En Son Eklenen</a></li>
</ul>
</div>
Dışına bir katman atamamın nedeni ardalan resmi ve diğer öğeler ile olan ilişkileri ayarlamak içindir. Sıralama öğelerinden bir tanesine göre sıralama yapılacak ve başındaki ok ikonu aşağı bakacağı için bu öğeye bir sınıf tanımlıyorum diğerlerinden ayırmak için
div#siralamAlani{ background:url(../images/siralama_ard.gif) 0 0 no-repeat; height:38px;}
div#siralamAlani ul{padding:10px 0 0 10px}
div#siralamAlani ul li{display:inline;}
div#siralamAlani ul li strong{display:block; float:left; color:#828282; font:bold 14px Arial, Helvetica, sans-serif; margin-right:3px}
div#siralamAlani ul li a{display:block; background:url(../images/genel_resim.gif) right -388px no-repeat; float:left; font:bold 14px Arial, Helvetica, sans-serif; color:#0c2b90; padding-right:15px; margin-right:10px}
div#siralamAlani ul li a.secili{background:url(../images/genel_resim.gif) right -354px no-repeat;}
Listeleme Tablosu
Listeleme tablosunun bir kaç kolonu hariç ana sayfadaki tablodan bir farkı yoktur. Benzer bir anlayış ile burayı kodlayalım.
table.genelTablo{border-collapse:collapse; }
table.genelTablo th{font:bold 14px Arial, Helvetica, sans-serif; color:#000; padding:5px 2px; text-align:left}
table.genelTablo th.ortala{text-align:center}
table.genelTablo tr.enAlt td{border:0}
table.genelTablo td{padding:1px 2px; font:14px Arial, Helvetica, sans-serif; color:#828282; border-bottom:1px solid #d5d5d5;}
Listeleme tablosunun ana sayfadan farklı olan kısmı en sağdaki oylama gösterme alanı
<td><p class="oley"><strong class="ucKupa">3 Kupa</strong></p></td>
Sadece oyu göstereceğimiz için bu şekilde kodladık.
#solOrtaAlan table td p.oley{background:url(../images/genel_resim.gif) 0 -483px no-repeat; width:93px; height:21px; margin:0}
table td p.oley strong{display:block; background:url(../images/genel_resim.gif) 0 -459px no-repeat; text-indent:-9999px; height:21px}
table td p.oley strong.birKupa{ width:18px;}
table td p.oley strong.ikiKupa{ width:37px;}
table td p.oley strong.ucKupa{ width:56px;}
table td p.oley strong.dortKupa{ width:75px;}
table td p.oley strong.besKupa{ width:95px;}
#solOrtaAlan table td p.oley tanımını niye p.oley şeklinde yapmıyoruzda bu kadar uzun yapıyoruz derseniz, üstten gelen kalıtsal tanımlar alt elemanları da etkiliyor bu etkiyi kaldırmak için bu şekilde tanımını uzatarak bu tanımı daha etkin yapıyoruz. Konu hakkında detaylı bilgi almak için tıklayınız.
Ana sayfadaki tablo ile yapının aynısı olduğu için bu kadar anlatarak tablo faslını geçiyorum ve sayfalama kısmının kodlamasını anlatmaya başlıyorum.
Sayfalama
Sayfalama kodlamalarını bir kaç tipi var ben burada daha önce kodladığım bir kodu kopyalıyorum. Bu yöntemi seçmemde programcı arkadaşım Mustafa’nın etkiside var.
<div class="sayfalama">
<ul>
<li><span>|<</span></li>
<li><span>Önceki</span></li>
<li><span>1</span></li>
<li><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li ><a href="#">4</a></li>
<li ><a href="#">5</a></li>
<li ><a href="#">6</a></li>
<li ><a href="#">7</a></li>
<li ><a href="#">8</a></li>
<li ><a href="#">9</a></li>
<li ><a href="#">10</a></li>
<li ><a href="#">Sonraki</a></li>
<li class="sayfalmaSonu"><a href="#">>|</a></li>
</ul>
</div>
Sayısız listeler ile listelediğimiz sayfa sayılarının farklı bölümlerini belirlemek için <li><span>1</span></li> şeklinde tanımlama yapıyoruz. Normal bağlantılarıda <li><a href="">2</a></li> şeklinde tanımlıyoruz. CSS kodunu yazalım.
/* sayfalama */
div.sayfalama ul{margin:0 auto; width:530px; padding:10px 0 0 0; clear:left}
div.sayfalama ul li{font:bold 12px Tahoma, Geneva, sans-serif; color:#fff; float:left; list-style:none; margin:0 2px; background:#80a3b7;}
div.sayfalama ul li span{padding:5px 8px; display:block}
div.sayfalama ul li a{font:bold 12px Tahoma, Geneva, sans-serif ; color:#80a3b7; text-decoration:none; background-color:#f0f0f0; padding:5px 8px; display:block}
div.sayfalama ul li a:hover{background-color:#80a3b7; color:#f0f0f0;}
İçerik Alanı Sağ
İçerik alanının sağ kısmı aslında pek bir şey içermiyor bir banner alanı ve kategori listesi. Her iki alanda ana sayfada mevcut olduğu için aynı kodları buraya taşıyoruz.
<div id="sagBannerAlani"><img src="images/band_website_banner.jpg" width="300" height="250" alt="Web" /></div>
Sağ banner alanı diye ayrı bir isim vermemin nedeni, kodlaması aynı olsa da site yayına girdikten sonra ana sayfa ve alt sayfaya farklı bannerlar atanma ihtimali olduğu için buraya farklı bir isim veriyorum ve tanımlamamı yapıyorum.
Kategori Listeleme Alanı
Kategori listeleme alanı da ana sayfa ile birebir aynıdır. Kodu aynen taşıyorum. Bu tip modülleri kodlarken eğer esnek kodlar isek modül nereye konursa konsun sorun çıkarmaz. Site kodlamaya başlanmadan önce bu tip modülleri belirleyip sabit bir genişlik vermekten kaçınmalıyız. Burada genişlikleri aynı olduğu için sorun çıkarmazdı zaten ama farklı projeler için söylüyorum bunu, aklınızın bir kenarında bulunsun.
Tezahürat Ekle Sayfasının Kodlanması
Sayfamızı incelediğimizde sol içerik alanında bir tezahürat ekleme formunun diğer sayfadan farklı olduğunu görüyoruz.
Eskiden form alanlarını kodlarken tabloları kullanırdım daha rahat gelirdi. Ancak listeler(ul) ve tanımlayıcı listeleri(dl dd dt) kullanmaya başladıktan sonra artık tabloları kullanmıyorum.
Bu sayfadaki form yapıları iki kolonlu bir yapı olduğu için listeler ile sayfa form yapısını oluşturabiliriz. Başlık ve altındaki paragrafı ekliyoruz.
Tezahürat Ekle Formunun Kodlanması
Her satırın altında bir çizgi olduğu için her satırı bir katman içine alıp bu katmanada bir sınıf tanılayarak bu işi çözebiliriz.
.formAlani{border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding:10px; margin:10px 0; clear:left;}
clear:left; tanımı her satırın soldan başlaması için yapıldı.
İlk form alanı için bir label ve birde select alanımız var
<div class="formAlani"><label>Lig Seçiniz:</label><select><option>--------------</option><option>Turkcell Süper Lig</option></select></div>
CSS kodunu yazalım
.formAlani label{margin-right:10px; width:135px; display:block; float:left;}
.formAlani select{width:180px; font:12px Arial, Helvetica, sans-serif;}
Seçilen Ligdeki Takımlar Alanı
Bu alanı kodlarken sayısız listeleri kullandım. Listelere bir genişlik ve float tanımı yaparak yan yana dize bilirim. Genişlikleri verirken 3 tanesini yan yana duracak şekilde ayarladım.
<ul class="secilenLigler">
<li> <input type="radio" name="takimSec" /><div class="logoTrabzon">Trabzon</div> <label>Trabzon Spor Klubü Tesisleri</label></li>
<li> <input type="radio" name="takimSec" /><div class="logoFenerbahce">Fenerbahçe</div> <label>Fenerbahçe</label></li>
<li> <input type="radio" name="takimSec" /><div class="logoAnkara">Ankaraspor</div> <label>Ankaraspor</label></li>
.......
</ul>
CSS kodları
ul.secilenLigler{width:575px; margin:0 auto}
ul.secilenLigler li{float:left; width:170px; margin:0 20px 10px 0; color:#828282;}
ul.secilenLigler li div{float:left}
ul.secilenLigler li label{position:relative; top:8px}
ul.secilenLigler li input{float:left; position:relative; top:8px; margin-right:10px}
Her takım alanı için radyo butonu, logo için bir katman, takım adı için bir label tanımladım ve bunları yan yana dizmek için float:left tanımı kullandım. label ve input için kullandığım postion:relative tanımı ve top değerleri bu öğeleri diğer öğeler ile yatayda aynı hizaya getirmek içindir.
Yukarıda bahsettiğim gibi form alanlarını kodlarken sayısız listeleri(ul) kullanıyorum burada da
<div class="formAlani">
<ul>
<li><label>Kategori Seçiniz:</label><select><option>--------------</option><option>Turkcell Süper Lig</option></select></li>
<li><label>Tezahüratın Adı:</label><input type="text" /></li>
<li><label>Youtube linki:</label><input type="text" /></li>
<li><label>Tezahüratın sözleri:</label></li>
<li><textarea></textarea></li>
<li><label>Kısa tanıtım:</label><input type="text" /></li>
<li><label class="genisEtiket">Kayıtlı bir tezahüratınız varsa buradan yükleyiniz:</label> <input type="file" /></li>
</ul>
</div>
CSS kodu
.formAlani p{margin-bottom:10px}
.formAlani label{margin-right:10px; width:135px; display:block; float:left;}
.formAlani label.genisEtiket{width:310px}
.formAlani textarea{width:625px; height:210px; border:1px solid #e8e8e8; margin-top:8px; font:12px Arial, Helvetica, sans-serif; padding:3px;}
.formAlani ul li{margin-bottom:10px}
.formAlani input{border:1px solid #e8e8e8; font:12px Arial, Helvetica, sans-serif; padding:3px; width:300px}
.formAlani select{width:180px; font:12px Arial, Helvetica, sans-serif;}
.formAlani select.darSelect{width:75px;}
Son olarakta gönder düğmesini koyuyorum.
<input type="button" value="Gönder" class="gonderBut" />
CSS kodu
input.gonderBut{width:170px; height:45px; float:right; font:bold italic 24px Arial, Helvetica, sans-serif; color:#434343; cursor:pointer}
Böylece Tezahürat Ekle sayfamızı bitirmiş oluyoruz.
Tezahürat Dinle Sayfasının Kodlaması
Tezahürat dinle sayfası iki sekmeli bir yapıdan oluşuyor ve dinleme ve izleme seçenekleri iki ayrı sekme içinde yer alıyor.
Başlık ve açıklama kısmını kodluyoruz. Başlık ve ilk paragraf bir önceki sayfa ile aynı. Başlık yanındaki logo ve takım ismi kısmına biraz değinelim.
<div id="dinleTakimi"><div class="logoTrabzon">Trabzon</div> <span>Trabzon</span>
Logo için iki ayrı katman oluşturuyorum. Bunun nedeni logoların geneli için bir sınıf tanımlıyorum. Ayrıca ikinci katmanda her bir takım için tanımlanacak özellikler için. CSS kodunu yazarsak;
div#dinleTakimi{float:left; width:180px; margin-left:20px; position:relative; top:-4px}
div#dinleTakimi div{float:left;}
div#dinleTakimi span{ position:relative; bottom:-10px; font:14px Arial, Helvetica, sans-serif; color:#828282; padding-left:6px}
Burada şöyle bir şey var. Başlığın uzunluğu belli olmadığı için sadece logo ve takım adına float tanımı ve genişlik tanımı yaptık. Böylece başlık uzunluğu ne olursa olsun başlık ve logo kısmı devamlı yan yana duracaktır.
Sekmeleri kodlarken daha önce yazdığım jquery ile sekme yapımını anlattığım makaledeki gibi yapacağız.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.sekmeAlani ul#tezahuratSekme li a').not("div.sekmeAlani ul#tezahuratSekme li#favEkle a, div.sekmeAlani ul#tezahuratSekme li.pasif a").click(function(){
$(this).parent('li').addClass('normal').siblings().removeClass('normal');
var mevcutSinif = this.className.slice(0,2);
$('div.sekmeAlani > div').hide().filter('div.'+mevcutSinif).show();
});
$('.sekmeAlani ul#tezahuratSekme li a:first').click();
});
</script>
Buradaki tek fark favoriler kısmını sekmeli yapının dışında tutmak için. jquery’nin :not() fonksiyonunu kullandık. Bu fonksiyonun anlamı bu elementlere uygula not fonksiyonu ile belirtilen elemana uygulamadır.
<div class="sekmeAlani">
<ul id="tezahuratSekme" class="kapsayamamaSorunu">
<li class="s1 normal"><a href="javascript:void(0);" class="s1 dinle">Tezahürat Dinle</a></li>
<li class="s2 pasif"><a href="javascript:void(0);" class="s2 izle">Tezahürat İzle</a></li>
<li id="favEkle"><a href="javascript:void(0);" id="favorimedenCikar">Favorilerine Ekle</a></li>
</ul>
<div class="s1">
<div id="sesOynatici"><img src="images/ses_oynatici.gif" width="333" height="50" alt="ses" /></div>
</div>
<div class="s2">
<div id="videoOynatici"><img src="images/video_player.gif" width="320" height="260" alt="video" /></div>
</div>
</div>
CSS kodlarını yazarsak;
ul#tezahuratSekme{border-bottom:1px solid #ccc; padding-left:30px}
ul#tezahuratSekme li{float:left; height:39px;}
ul#tezahuratSekme li a{display:block; padding:15px 45px 0 50px; color:#000; font-size:14px}
ul#tezahuratSekme li.normal{background:url(../images/normal_seme_ard.gif) 0 0 no-repeat; }
ul#tezahuratSekme li.pasif{background:url(../images/sekme_pasif.gif) 0 0 no-repeat; }
ul#tezahuratSekme li.pasif a{ cursor:default;}
ul#tezahuratSekme li.normal a.dinle{ background:url(../images/tez_din_ikon.gif) 15px -220px no-repeat; }
ul#tezahuratSekme li.normal a.izle{ background:url(../images/tez_din_ikon.gif) 15px -270px no-repeat;}
ul#tezahuratSekme li{background:url(../images/kapali_sekme.gif) 0 0 no-repeat;}
ul#tezahuratSekme li a.dinle{ background:url(../images/tez_din_ikon.gif) 15px -220px no-repeat;}
ul#tezahuratSekme li a.izle{ background:url(../images/tez_din_ikon.gif) 15px -268px no-repeat;}
ul#tezahuratSekme li#favEkle{float:left; height:39px; background:none}
ul#tezahuratSekme li#favEkle a{background:url(../images/tez_din_ikon.gif) 18px -318px no-repeat;}
ul#tezahuratSekme li#favEkle a:hover{background:url(../images/tez_din_ikon.gif) 18px -419px no-repeat;}
ul#tezahuratSekme li#favEkle a#favorimedenCikar, ul#tezahuratSekme li#favEkle a#favorimedenCikar:hover{background:url(../images/tez_din_ikon.gif) 18px -368px no-repeat;}
Tezahürat Bilgi Alanı
Tezahürat bilgi alanında; ekleyen, kaç kez dinlendiği veya izlendiği, paylaşım linki ve kaç kişinin oley çektiği bilgileri yan yana yer alıyor.
Bu alanı bir katman içine alıp ardalan rengini bu katman veriyoruz. İçine sol ve sağ kolonlar için iki katman oluşturup içerikleri buraya koyuyoruz. İçerikleride bir paragraf içinde kodluyoruz.
<div id="tezahuratBilgi" class="kapsayamamaSorunu">
<div id="tezahuratBilgiSol">
<p>Ekleyen: <a href="">Hasan</a> <span>27 Ağustos 2009'da Eklendi</span></p>
<p>Link Paylaş: <input type="text" value="htpp:www..ewrwerwerwerewrra" /></p>
</div>
<div id="tezahuratBilgiSag">
<p>123.288 kez dinlendi</p>
<p><span>16.258 kişi Oley! çekti!</span> <ul class='oleyCek'><li class='mevcutOy' style="width:54px">3/5 Yıldız</li><li><a href='#' title='1 puan' class='birYildiz'>1</a></li><li><a href='#' title='2 puan' class='ikiYildiz'>2</a></li><li><a href='#' title='3 puan' class='ucYildiz'>3</a></li><li><a href='#' title='4 puan' class='dortYildiz'>4</a></li><li><a href='#' title='5puan' class='besYildiz'>5</a></li></ul></p>
</div>
</div>
CSS koduda şöyle olacak;
#tezahuratBilgi{margin:1px 0; background-color:#eee; padding:13px 10px 0 10px}
#tezahuratBilgiSol{float:left; width:390px}
#tezahuratBilgiSol a{ color:#0c2b90}
#tezahuratBilgiSol p{margin-bottom:10px}
#tezahuratBilgiSol input{border:1px solid #cbcbcb; font:14px Arial, Helvetica, sans-serif; color:#cccccc; width:200px}
#tezahuratBilgiSag{float:left; width:240px}
#tezahuratBilgiSag p{margin:0 0 15px 0}
#tezahuratBilgiSag p span{float:left;}
Etiketler, Önce Söyle, Sonra Yorumla vb. başlıkların ikonlarını sprite tekniği ile resimlerini hazırlayıp başlıkların başına ardalan resmi ile koyuyoruz.
Etiketler için padding ve ardalan rengi tanımlıyoruz. hover hallerini hazırlıyoruz.
div#etiketler a{padding:2px 4px; background-color:#eee; color:#666; font-size:14px}
div#etiketler a:hover{background-color:#666; color:#eee;}
Önce Söyle
Önce söyle başlığınıda diğer başlıklar gibi hazırlıyoruz. İçeriği blockquote içine koydum. Aslında bunun için de bir katman açıp koyabilirdik, tercih meselesi. Ardalan resmini sağ alta sabitliyoruz.
blockquote.tezahuratMetni{ background:#eee url(../images/tezahurat_zem.gif) right bottom no-repeat; padding:20px 50px 20px 30px; margin-bottom:1px; font-style:italic}
Yorum Alanı
Yorum alanın solda avatar’ın(küçük resim) ve sağda alt alta içeriklerin bulunduğu iki kolonlu bir yapıya sahip .
float ve genişlik tanımlarını yaparak öğeleri yerleştiriyoruz. Burada farklı durumda olan kısım yorum oylama kısmıdır. Yorum oylama kısmını ayrı bir katman içine alıp yorum yazanın yanında durması için position:relative ve float:left tanımı ile ile ayırıyoruz. Artı, eksi ve puan kısmını bir liste şeklinde kodluyoruz.
Son olarakta "Sende Yaz" kısmını kodluyoruz. Başlığı yukarıdaki başlıklar gibi yazıyoruz. Yorum yazma kısmına bir textarea yapıp genişlik, yükseklik ve kenar çizgisi tanımlarını yapıyoruz.
div.yorumalani{border-bottom:1px solid #e0e0e0; margin-bottom:12px}
div.yAvatar{float:left; width:60px}
div.yorumAlaniSag{float:left; width:590px}
div.yorumAlaniSag strong{color:#a1a1a1; display:block; clear:left; margin:10px 0 5px 0}
#solOrtaAlan div.yorumAlaniSag p{margin-bottom:10px}
div.yorumYazari{float:left; font-weight:bold;}
div.yorumYazari a{color:#2a459d}
div.comment-rate{float:left; width:75px; margin-left:20px; position:relative;}
div.comment-rate-num{float: left; padding-right: 5px; color:#088f02; font-weight:bold;}
ul.yorumOyla{float:left; width:75px; margin-left:20px; position:relative; top:-5px;}
ul.yorumOyla li{float:left;}
li.yorumArti a{ background:url(../images/genel_resim.gif) -15px -530px no-repeat; display:block; text-indent:-9999px; width:16px; height:20px}
li.yorumEksi a{ background:url(../images/genel_resim.gif) 0 -530px no-repeat; display:block; text-indent:-9999px; width:16px; height:20px}
li.olumlu{color:#088f02; font-weight:bold;}
li.olumsuz{color:#c00; font-weight:bold;}
li.notr{color:#000; font-weight:bold;}
h3.senYaz{background:url(../images/tez_din_ikon.gif) 0 -168px no-repeat; padding:15px 0 3px 32px}
#solOrtaAlan textarea{border:1px solid #e1e1e1; width:642px; margin-bottom:20px; height:100px}
Tezahürat Dinle/İzle sayfasınıda tamamlamış oluyoruz.
Site Genel Şablonu Sayfasının Kodlanması
Site kodlarken site içerisinde genelde bir şablon sayfası oluşturulur. Bu sayfa site içinde olabilmesi mümkün elemanların bulunduğu bir sayfadır. Tasarımcı bu sayfayı daha sonra eklenmesi durumunda hazırlayarak sitenin gelişmesi durumlarınıda düşünmüş olur. Böyle site yapısından kopmamış oluruz.
Fanatikmarşlar.com’un şablon sayfası biraz daha sade oldu. Normalde paragraflar, tablo yapısı, resimler, listeler, vb. yapıları içerir.
Fanatikmarşlar.com’un şablon sayfasına baktığımızda başlık, paragraf ve uyarı mesajları şeklinde oluşmaktadır.
#anaKapsul h1.hata{color:#e40000}
#anaKapsul h1.onay{color:#1f6600}
Bilgi kutusunu oluştururken yuvarlak kenarlı olduğu için, iki elamana ihtiyaç var. Bunun için kapsayıcı div ve içine paragrafa koyduk.
<div class="bilgiKutusu"> <p><strong>Bu kullanıcı adı zaten alınmış, başka bir tane deneyin. </strong></p> </div>
CSS Kodları
div.bilgiKutusu{ background:#2d2d2d url(../images/bilgi_kutusu.gif) 0 0 no-repeat; margin-bottom:20px; font:bold 14px Arial, Helvetica, sans-serif; color:#fff}
div.bilgiKutusu p{background:url(../images/bilgi_kutusu.gif) -650px bottom no-repeat; padding:10px;}
div.bilgiKutusu p strong{color:#ffc000}
Alt sayfaların kodlamasını böylelikle bitirdik. Site kodlarken değişik tasarımlarda olsa genelde benzer yapılar olduğu için yaklaşık olarak kodlarımız bu şekilde olacaktır.
Sonuç
Site kodlarken kodlarımı Adobe Dreamweaver ile yazıyorum. Kodlamanın bir çok yerinde FireBug kullanıyorum, daha doğrusu firebug’ı kapatmıyorum. Ayrıca test amaçlı ietester programını kullandım. Daima ie6′da test ettim.
Site kodlarken bir çok yöntem kullanılabilir. Ben kodlarımı yazarken devamlı bu alanı kodlarken nasıl daha iyi kodlarım, ileriye yönelik değişikliklerde nasıl sorun yaşamam, arama motorları standartlarına nasıl uyarım düşüncesi ile kodluyorum. Yazdığım kodlara genellikle daha sonra baktığımda beğenmiyorum. Devamlı en iyi hedefleyince eski kodlarımı beğenmiyorum. Bence olması gereken bu çünkü sektör daima kendini yeniliyor ve yeni özellikler çıkıyor biz devamlı bunları takip edip yeni projelerimizde kullanmalıyız.
Çok uzun süredir tasarladığım ama ancak nasip olan bir işi bitirmenin sevinci ile bu makalemide bitiriyorum. Daha güzel makalelerde buluşmak dileğiyle kendinize iyi bakın.
Projede yer alan tüm dosyaları sıkıştırıp attım. Tüm dosyaları indirmek için tıklayınız.
Jquery ipuçları
Ekim 22nd, 2009 • 4 yorum Javascript
Etiketler: ipuçları, jquery, kolaylık
jQuery’i artık neredeyse her projemde kullanıyorum. Aklıma gelen ve not aldığım ipuçlarını burada yazdım. Sizinde aklınıza gelen olursa yorum kısmında katkıda bulunabilirsiniz. Ayrıca kaynaklar kısmındaki linklerde de daha fazlası var
1- jQuery kütüphanemizi Google’da host etmek: google bize jQuery kütüphanesini kendi hostu üzerinden yüklememizi sağlıyor. Bu bize ön belleğe alınana dosyanın daha hızlı yüklenmesini sağlar.
<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() {
//isler burada
});
</script>
Bu sayede jquery kütüphanesini her projeye eklerken kopyala yapıştır ile de uğraşmak zorunda kalmıyoruz. İstediğimiz her yerde jQuery kullanma imkanıda veriyor bize bu kod.
2- jquery kısaltması: jquery kodlarımzı yazarken bazen
$(document).ready(function (){});
aklımıza gelmeye bilir
$(function (){});
bu daha kolay ve akılda kalıcı bence
3- fare üzerinde iken ve üzerinden gittiğinde
$("li").hover(
function () {
// fare üzerinde iken bunu yap
},
function () {
// fare kaçınca bunu yap
}
);
4- not seçicisi: Bir seri elemana yaptırdığımız bir işi aradan bir tane elemanın yapmasını istiyorsak bu seçiciyi uygulayabiliriz.
$('ul#sekme li a').not("ul li#diger a").click(function(){
// yapılacak işler
});
Yukarıdaki kodlamada biz sekmelere bir tanım yapıyoruz ama en son sekmeye tıklayınca bu işlemin yapılmasını istemiyoruz. Bu iş için biçilmiş kaftan :not seçicisi
5- siblings seçicisi liste ve benzeri aynı seviyedeki elemanlar üzerinde etkileşimli erişim sağlayan güzel bir seçici. Daha önce http://www.fatihhayrioglu.com/jquery-ile-basit-sekme-yapimi/ anlatırken kullanmıştım.
$(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');
Bu kodda da görüldüğü gibi tıklanan sekmeye sekmeSecili sınıfı atıyoruz diğer sekmelerde aynı sınıf varsa onları kaldırıyoruz.
6- HTML içine jQuery den eleman eklemek:
var ekleBunu = $('<div></div>');
ekleBunu.attr("id","yeniKatman").appendTo("body");
7- Bir elemanın varlığını kontrol etmek
if ($("#someDiv").length) {
// eğer varsa bunu yap
}
8- Kolay kullanılan tarayıcıyı yakalama
$.browser.safari $.browser.msie $.browser.mozilla
tarayıcı sürümünü yakalamak için
if ($.browser.msie && $.browser.version <= 7 )
Kaynaklar
jQuery ile Basit Sekme Yapımı
Mayıs 25th, 2009 • 7 yorum Javascript
Etiketler: Javascript, jquery, sekme
Web sitelerinden uzun içerikler her zaman kullanıcıyı itmiştir. Bunun için çeşitli çözümler üretilmiştir ve üretilmeyede çalışılıyor. Yeterli alanların olmadığı durumlarda veya uzun içerikleri olan sayfalarda sekme kullanımı yardımımıza koşar. Birçok sitede bu ve benzeri nedenlerde dolayı sekmeleri kullanır.
Artık neredeyse tüm projelerimde jQuery olmazsa olmaz oluyor. Bu nedenle javascript ile değil jQuery ile kodluyorum bu tip alanları. Sekmeli içerik yapımı jQuery ile çok basit. Bunu burada beraber göreceğiz.
XHTML kodumuz:
<div class="sekmeAlani"> <!--[if !IE]>sekmeler<![endif]--> <ul class="sekmeler"> <li class="s1"><a href="javascript:void(0);" class="s1">Sekme1</a></li> <li class="s2"><a href="javascript:void(0);" class="s2">Sekme2</a></li> <li class="s3"><a href="javascript:void(0);" class="s3">Sekme3</a></li> <li class="s4"><a href="javascript:void(0);" class="s4">Sekme4</a></li> </ul> <!--[if !IE]>sekme icerikleri<![endif]--> <div class="s1">...</div> <div class="s2">...</div> <div class="s3">...</div> <div class="s4">...</div> </div>
Burada aslında href=”javascript:void(0);” özelliğini kullanmayabiliriz, ancak ie6 ve 7 bu durumda link tanımlarında sorun çıkarıyor. HTML’de dikkat edeceğimiz bir kaç yer var. Link sınıf tanımı(örn: class=”s1″) ve sekme içeriği sınıfları birbiri ile aynı olmalıdır.
Hemen uygulamaya geçersek.
Kodumuza jQuery kütüphanesini ekleyelim. Firefox’un YSlow eklentisinin belirttiği gibi javascript kodlarını sayfamızın altına koyalım.
<script type="text/javascript" src="jquery.js"></script> </body> </html>
jQuery kodumuzu yazmaya başlayalım. Mantık olarak sekmeli menüler olsun, sekmeli içerikler olsun aynıdır. Sekmelere tıklayınca o sekmeye ait içerikler görünecek, diğerleri görünmez olacaktır. bu mantığa göre kodumuzu yazalım.
$(document).ready(function() {
$('div.sekmeAlani ul.sekmeler li a').click(function(){
$(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');
var mevcutSinif = this.className.slice(0,2);
$('div.sekmeAlani > div').hide().filter('div.'+mevcutSinif).show();
});
$('.sekmeAlani ul.sekmeler li a:first').click();
});
Kodumuz sadece bu kadar.
$(document).ready(function() { .. }); jQuery’nin stadart kodu.
5. satırdaki kodda; sekme linklerine tıklanınca yapılacak işlemleri tetikliyoruz.
6. satırda tıklanan sekmeyi seçili hale getiriyoruz. Burada kullandığımız yöntem jQuery’nin bize sunduğu güzelliklerden biridir. Hem tıklanan sekmeyi seçili hale getiriyoruz hemde bu arada diğer sekmeleri(siblings() fonksiyonu sayesinde) normal hale getiriyoruz. Tek satır kod ile bunu bize sağlaması jQuerynin güzelliği
7. satırda tıklanan linkin sekme içeriği ile ilişkisini sağlayan sınıfını yakalıyoruz. Burada slice(0,2) ile sınıfın iki kelimesini alıyoruz, birebir sınıf karşılaştırması yapamıyoruz çünkü bu linke başka sınıflarda atanmış olabilir. Bu sınıf adı bize ilişkili sekme içeriğini göstermek için yardımcı olacaktır.
8. satırda içerikleri gizleme ve gösterme işini çözüyoruz. $(‘div.sekmeAlani > div’) kodu bize sekmeAlani‘nının birincil div’lerini yani sekme içeriğini kapsayan katmanları gizlememizi sağlıyor. Böylelikle sekme içinde div kullansak bile bunlar görünmez olmuyor bu bir çok sekme kodunda göz ardı edilen bir husustur. CSS’de de olan çocuk seçiciler(>) jQueryde gönül rahatlığı ile kullanabiliyoruz çünkü ie6 desteğini jQuery hallediyor. jQuery’nin bize sunduğu avantajlardan biride filter() fonksiyonudur. Bu sayede biz tüm sekme içeriğini kapsayan div’leri gizle ama bu tıkladığımzın(bu tıkladığımızda yukarıdan aldığımız sınıf tanımlaması ile anlıyoruz, aynı sınıf atamamızın sebebi de budur.) içeriği hariç diye biliyoruz. Bize bu kadar kolaylık sağlayan jQuery bundan dolayı çok seviyorum, pardon seviyoruz galiba.
10. satır sekme linki tıklamasını bitirdikten sonra sayfa ilk açıldığında ilk linkin tıklanması ve içeriğinin gösterilmesi için kodumuzu yazıyoruz. Buradaki a:first yine CSS’den bildiğimiz ama ie6 nedeni ile kullanamadığımız bir özellik. click() fonksiyonuda sanki biz tıklamışız işlevi görüyoruz.
Evet koda baktığımızda 5-6 satırlık bir jQuery kodu ile sekmeli bir yapı oluşturduk. jQuery’yi bu yüzden çok güzel. Bende öğrenmeye devam ediyorum. Öğrendikçe sizlerle paylaşacağım. bu konuda ve bir çok yerde yardımlarından dolayı Orhan Ekici‘ye(şu an yapım aşamasında) teşekkürlerimi sunmadan geçemeyeceğim. İnşallah yakında sitesini açarda internet alemine güzel bilgiler sunar.
jQuery UI içinde sekme ekelentisi var onuda tercih edebilirsiniz. jQuery tab eklentisi çok ayrıntılı ve bir çok özellikleri var. Bu bir bakıma avantaj olsada bazen dezavantaja dönüşebiliyor. Ben ufak bir sekmeli içerik yapmak için jQuery UI tab eklentisini kullanmayı uygun görmüyorum açıkçası.
Sekmeli içerik ve sekmeli menülerde farklı şekillerde örnekler var. Stil dosyasını değiştirerek bu örnek üzerinden istediğimiz birçok sekmeli içerik üretebiliriz.
Örnek kodu görmek için tıklayınız.
Örnek kodu IE (6-7-8), Firefox 3.0.10, Opera 9.6, Googel Chrome 1.0 ve Safari 3.2.2 sürümlerinde test ettim.
Kaynaklar
- http://jqueryfordesigners.com/jquery-tabs/
- http://broadcast.oreilly.com/2008/10/how-to-create-tabs-with-css-an.html
- http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery
- http://www.barelyfitz.com/projects/tabber/index.php
- http://www.thetruetribe.com/jquery/3-jquery-widgets/77-how-do-i-make-tabs-in-jquery-without-jq-tabs-plugin
sIFR, Flash Player10 ve Firefox sorunu
Ocak 7th, 2009 • 12 yorum CSS, Javascript, Web Standartları, XHTML
Etiketler: Firefox, Flash Player, safari, sIFR
Bir çok projemde sIFR kullanıyorum. Yaklaşık 1-2 ay önce Flash Player 10 çıktıktan sonra sIFR kullandığım başlıklarımda sorun çıkmaya başladı.
İlk başta anlayamadım. Biraz araştırınca sIFR’ın bazı tarayıcılarda(Firefox ve Safari) Flash Player’ı tespit edemediği için böyle bir sorun ile karşılaşıldığı söyleniyor.
Çözüm için yapmamız gerek sifr.js dosyamızı güncellemek ve eğer sIFR 2.0.4′den önceki sürümleri kullandı isek yeni sürümü indirip sifr.fla dosyamızı yeniden export ederek oluşan .swf dosyasını atmak.
sIFR’ın yeni sürümü sIFR3 beta’da böyle bir sorun yok.
Bu kadar basit bir çözüm. Ama içimdeki sIFR sevgisini biraz daha azaltan bir gelişme oldu bu benim için.
