Yuvarlak kenarlı kutular(border-radius) oluşturmak
20 Tem
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Web tasarımcılarını tercih ettiği tekniklerden biridir yuvarlak köşeli alanlar oluşturmak. IE hariç css ile bu yapıyı kurmak çok basittir. Burada beraber yuvarlak kenarlı yapıları oluşturmayı göreceğiz. Ayrıca IE için javascript çözümlerini ele alacağız.
border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.
Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi. Okumaya devam et »
display:inline elemanlar arasındaki doğal boşluklar
14 Tem
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Daha önce gözüme çarpmamış olmaması ilginç geldi. Belki çarpmıştırda ben es geçmişimdir. Durumu şöyle açıklayayım. Basit bir menü oluşturmak istedim.
<ul> <li>deneme</li> <li>olarak</li> <li>bir örnek </li> </ul>
Yatay bir menü olacağı için
ul li{display:inline;}
eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya çıktı.
ul li{ padding:0 12px; background-color:#999}
İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri atadım ama olmadı biraz araştırınca gördüm ki display:inline elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.
Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan biri
ul li{ float:left}
Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.
<ul> <li>deneme</li><li>olarak</li><li>bir örnek </li> </ul>
Jquery ipuçları – 1
Jquery ipuçları – 2
jQuery ipuçlarını yayınlamaya devam ediyorum.
1- Dinamik oluşturulan elementlere live() ile olay atama
Sayfaya dinamik olarak eklenen içeriklerde veya ajax ile doldurduğumuz içeriklerdeki elemanlara bir olay atadığımızda(click, mouseover vd.) çalışmayacaktır. jQuery geliştiricileri bunun için live() fonksiyonunu geliştirmiş.
$('a.acilSusam').live('mouseover', function() {
// yapilacak islemler
});
2 – Tarayıcı Penceresinin Boyutlarını Değişmesini Yakalamak
Belki ara sıra lazım olacak bir kod ama bazen gerekiyor işte. Pencere boyutu her değiştiğine bazı işlemleri yapmak sistemimizi yorabilir diye setTimeout yardımı ile belli aralıklarla bunu yaptırıyoruz.
function pencereBoyutuDegisti() {
alert("Değişti");
};
var resizeTimer = null;
$(window).bind('resize', function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(pencereBoyutuDegisti, 100);
});
3 – Element miktarını bulmak
Bir dokümanda seçilen elemandan kaç adet olduğu bulmak için;
$('element').size();
4 – Bir elemanın index değerini bulmak
index değerini bulmanın farklı bir yolu
$("ul > li").click(function () {
var index = $(this).prevAll().length;
});
5- Bir elemanın görünür olup olmadığını yakalamak
if($(".eleman").is(":visible")) {
alert('Burda');
}
6- Kaç tane alt elemanı(çocuk elemanı) var
<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>
//kac tane alt elemanı oldugunu bulmak icin
$("#foo > div").length
7- jQuery Kopya Kağıdı(Cheat Sheet)
jQuery’nini bir çok özelliği var ve bunları aklımızda tutma imkanımız yok. Bir kopya kağıdı işimize yaraya bilir.
http://www.futurecolors.ru/jquery/
Burada son sürümün kopya kağıdı mevcut. Bende css3 özelliklerini kullanarak biraz renklendirdim. Benim renklendirdiğim(CSS3 içerir, herisi göremez)
8 – Select Elemanı ipuçları
// secili olan ögenin metnini almak
$("#myselect option:selected").text();
// secili olan ögenin degerini almak icin
$("#myselect option:selected").val();
// secili ogenin index degeri
$("#myselect option").index($("#myselect option:selected"));
// indeksi 2 olan ögeyi seçili hale getirmek
$("#myselect option:eq(2)").attr("selected", "selected");
Kaynaklar
- http://blog.kenmoredesign.com/2009/02/02/useful-jquery-snippets/
- http://tympanus.net/codrops/2010/01/07/some-useful-javascript-jquery-snippets-part-2/
- http://www.catswhocode.com/blog/10-jquery-snippets-for-efficient-developers
- http://tympanus.net/codrops/2010/01/08/some-useful-javascript-jquery-snippets-part-3/
- http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/
overflow ve position:relative kullanımında ie sorunu
30 Haz
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Bir sorun ile daha karşınızdayım. Evet yine ie ve yine sorun. Bir projeye başladığımda kodlamayı yaparken devamlı ie6 ile test ediyorum, ama bazı sorunları daha çözerim diye bırakıyorum, bunun güzel bir şey olduğunu biliyorum ama sorunlardan gına gelince kendimi rahatlatmak için böyle bir yola başvuruyorum. Daha sonra projenin sonlarına doğru bu sorunların üzerine eğiliyorum. İlk baktığımda bana çok zor gibi gelen bazı sorunları gidermek için bazen tek bir arama ile cevaba ulaşıyorum ve seviniyorum, korktuğum kadar beni uğraştırmadığı için.
Sorunu şöyle tanımlayabilirim; overflow kullandığım bir eleman içindeki bir elemana position:relative tanımladığımda relative verdiğim eleman overflow uyguladığım elemanın dışına çıkıyor ve scroll olmuyor. Okumaya devam et »
sIFR 3 Kullanımı ve İpuçları
23 Haz
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Bu makaleyi çok önce yazmayı planlıyordum, ancak üzerinden zaman geçmesine rağmen hala sIFR kullanılan bir yöntem olduğu için yinede yazıyı yazmaya karar verdim. Her nekadar font-face kull anımı bize bu tip alternatiflerden alıkoymak için çıktı ise de daha öncede bahsettiğimiz gibi tasarımdaki anti-aliasing özelliğini sağlayamıyor maalesef. Bundan dolayı hala eski yönte mleri kullanmaya devam etmekteyiz.
Aslında ben sIFR kullanımını daha önce anlattım. Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement) yazısının içinde sIFR kullanımını anlattım. Burada sIFR’ın yeni sürümünü ve ipuçlarını yazacağım.
sIFR3′ün son sürümünü http://dev.novemberborn.net/sifr3/nightlies/ adresinden en üstteki bağlantıdan son sürümü indirebilirsiniz.
Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement) yazısında genel olarak sIFR’ın nasıl ekleneceği konusunda bilgi verdik. Bu nedenle işin bu kısmını geçip sIFR3 ile yeni ne geldi onu göstereceğiz ve artı ipuçları vereceğiz. Okumaya devam et »
Kutulara Gölge Vermek (box-shadow)
21 Haz
Yazı Fatih HAYRİOĞLU tarafından CSS, Web Standartları, XHTML kategorisine eklendi.
Şuanki şartlar düşünüldüğünde normal olarak bir kutunun gölgesini vermek için daha öncede açıkladığımız gibi bir kaç yöntem var. Bu yöntemleri incelemek için http://www.fatihhayrioglu.com/css-ile-golge-vermek/ bağlantısındaki yazıya göz atalım. Buradaki yöntemleri incelediğimizde çok fazla gereksiz ve fazladan katman(div) kullanmak zorunda kaldığımızı göreceksiniz. CSS3 ile gelen box-shadow özelliği sayesinde çok basit bir tanımlama ile bu fazlalıklar ve zorluklardan kurtulabiliyoruz. Okumaya devam et »
