pointer-events:none;

, , , Yorum yazılmamış »

Henüz 4. beta sürümü yayınlanmış olan Firefox 3.6 da gördüğüm ve bence biraz daha geliştirmeyle bir CSS standardı haline gelebilecek bir style var.

pointer-events:none;
Bu style none ve auto olmak üzere iki değer alabiliyor. Yaradığı işi de şu şekilde açıklayayım. Üstüste binen nesnelerde (örneğin iki div), mouse event'leri, biliyorsunuz üstteki nesnede yakalanır, alttaki nesneye geçmez. Bu sebepten dolayı, aşağıdaki nesnede a gibi, input gibi nesneler mevcutsa, kullanıcının bunlarla mouse aracılığı ile etkileşime girmesi mümkün değildir. Firefox 3.6 bu gibi durumlarda, üstteki elemana pointer-events:none style'ı verilerek sorunun çözülmesini sağlıyor. Bu özelliğe sahip nesne mouse işlemlerini yakalamıyor, alttaki elemana geçiriyor. Bu sayede alt nesnede bulunan nesneler çalışıyor, bu nesne ile etkileşime girilebiliyor.

Bazı noktalarda gerçekten hayat kurtarıcı olabilecek bu özelliğin kısa sürede CSS standardı olmasını diliyorum. Canlı bir örneği görebilmek için en az bir Firefox 3.6b4'e ihtiyacınız olacak. Henüz resmi olarak yayınlanmadığı için bu sürümü http://www.mozilla.com/en-US/firefox/all-beta.html adresinden indirip kurmanız gerekmekte. 3.5.5 sürümü ile yanyana çalışabiliyor sürüm.
Kurulumunuzu tamamladıktan sonra http://demos.hacks.mozilla.org/openweb/pointer-events adresini ziyaret ederek canlı bir uygulama görebilirsiniz. Üstünde gradient bir dolgu efekti olan div, a nesnelerinin dizili olduğu başka bir div'in üzerine getirilmiş. Burada gradient efektinin olduğu sağ bölgedeki linklere erişmek mümkün olmuyor, çünkü mouse event'ları üstteki gradient div'i tarafından yakalanıyor. Ancak hemen alttaki işaret kutusunu seçtiğinizde artık bu linklere de erişilebilmeye başlıyor.

Gerçekten web programcılarının ve tasarımcılarının hayatını kurtarabilecek bir özellik. Umarım kısa sürede Trident ve Webkit engine'lerine de girer ve biz de gönül rahatlığı ile kullanmaya başlayabiliriz...

*** Ekleme: 02.12.2009 17:51 ***
Bu sayfayı Google Chrome, Safari, Opera ve IE üzerinde de denedim. Chrome ve Safari'de de özelliğin çalıştığını gördüm (we love webkit). Opera üzerine gelen div'i yorumlayamadığı için deneme şansım olmadı. Linkler hep çalışıyordu. IE ise sayfayı açamadı bile :) Yorum sizin...

Zen Coding

, , , , , , Yorum yazılmamış »

Bir çok yaygın Javascript framework'ünün üzerine oturduğu temel hep aynı; CSS seçimi. CSS seçimi ile ne kastediyoruz, bir veya daha fazla nesneyi, CSS için kullandığımız tanımlama sentaksları ile yakalamak. Daha sonrasında da bunu manipüle etmek.

Örneğin;
<div class="test">
<span id="spn1">
<span id="spn2">
<span id="spn3">
</div>
Bu kodda bütün spn1, spn2, spn3'leri yakalayıp içine test yazdırmak jQuery ile tek satır bir koddur:
$('div.test span').html('test');
Prototype, Mootools, Midori... diğer bütün frameworkler de aynı veya benzer söz dizimleri ile bu işlemi gerçekleştirebilirler (yeri gelmişken Türk bir yazılımcı Aycan Gülez'in -http://twitter.com/aycangulez- elinden çıkan Midori'ye tekrar saygı/tebrik).

Yazının konusuna yaklaşırsak, CSS seçicileri mantığını tam tersten değerlendiren bir proje ile karşılaştım. Zen Coding, bir çok farklı editör desteği ile (maalesef Visual Studio yok) verilen CSS seçicisini genişleterek HTML'ini sunuyor. Aslında uygulama metin bazlı bir girdi alıp, metin bazlı bir çıktı veren bir uygulama. Visual Studio add-in'i yazma planlarım var :)

Ne anlatmak istediğimi örneklerle görmek için video'ya bir gözatın:


Kendi sitesindeki bir online editor ile denemek için de http://zen-coding.ru/demo adresini ziyaret edebilirsiniz.

İlgi çekici bir proje. Dediğim gibi Visual Studio add-in yapma planlarım var. Eğer tamamlarsam bu blog aracılığı ile sizinle paylaşıyor olacağım...

CheckBoxList'e Hover Tooltip

, , , , 1 Yorum »

Bir ASP.NET projemizde, CheckBoxList içerisindeki her bir işaret kutusunun açıklamasının mouse işaret kutusu üzerine geldiğinde tooltip olarak çıkması yönünde bir ihtiyaç başgösterdi. Teknik olarak CheckBoxList içerisindeki her bir kayda ayrı ayrı standart tooltip vermek mümkün değil.

Aklımıza gelen ve sırayla uyguladığımız üç çözüm seçeneği şunlar oldu:
  1. CheckBoxList kullanımından vazgeçip, alanı repeater'a çevirmek istediğimiz gibi özgür olmak.
  2. Bir javascript array içerisinde ilgili açıklamaları ve ID'leri tutup, sayfa yüklendiğinde prototype.js ile (projede prototype kullanılıyor) bunları tooltip'e çevirmek.
  3. Soruna bir CSS yaklaşımı ile çözüm aramak.
İlk seçeneği, projenin bulunduğu durum, bu checklist'in sayfada ve codebehind'da kullanım durumu vs. göz önünde bulunarak ilk etapta eledik. Ardından ikinci çözüm için çalışmaya başladık ve bu çözümü gerçekleştirdik. Ancak sayfada bu işlemin uygulanacağı çok fazla sayıda checkbox olduğu için (yaklaşık 1000 adet) çözüm istediğimiz performansı sağlamadı. Sayfanın açılışı, JS çalışmasından dolayı 10 saniye kadar yavaşladı.

İki başarısız girişimden sonra CSS seçeneğini değerlendirmeye başladık. Asıl yazı amacıma yavaş yavaş yaklaşıyoruz. Burada isteğimizi gerçekleştirmek için 3-5 satırlık bir CSS yeterli oldu. Sonuçta elde ettiğimiz çıktı, CheckBoxList kullanılan her yerde kullanılabilecek bir çözüm oldu. Tek ön koşul var: CheckBoxList'teki her bir nesnenin açıklamasının normalde görüntülenmiyor olması. Örnek olarak şu görüntüye bakabilirsiniz:



Eğer checkboxların açıklamaları buradaki gibi görünmüyorsa, bunları tooltip olarak değerlendirebiliriz. Checkboxlist'i normal şekilde bind ediyoruz. Bu durumda görüntü şu şekilde oluyor:


İlk önce checkboxlist'imize bir class atıyoruz (.NET tarafından CssClass). Örneğin bu class chkOptionHover olsun. Şu şekilde bir style ekliyoruz:
table.chkOptionHover td label
{
display:none;
}
Bu sayede checkboxlistteki her bir checkbox'a ait açıklamalar görünmez hale geliyor. Bir önceki style'da belirttiğimiz td'nin hover'ına bir class daha vererek üzerine geldiğimizde açıklamaların görünmesini sağlıyoruz.
table.chkOptionHover td:hover label
{
position:absolute;
display:block;
}
Belirttiğim style eklendikten sonra mouse over efekti şu duruma geliyor:



Her ne kadar görsel olarak kullanılabilir olmasa da isteğimiz aslında teknik olarak gerçekleşmiş durumda. Bir kaç küçük CSS dokunuşu ile label'larımızı gerçek birer tooltip'e döndürüyoruz. Bunun için sadece :hover class'ına bazı eklemeler yapıyoruz. Tabi ki istediğiniz şekilde görsel oluşturabilirsiniz. Bu benim tercihim:
table.chkOptionHover td:hover label
{
font-size:10pt;
font-weight:bold;
padding:5px;
position:absolute;
background-color:yellow;
-moz-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}
Yukarıdaki uygulamalardan sonra artık tooltip'imiz oturmuş duruma geliyor ve aşağıdaki gibi bir görüntü oluşuyor:



Gerçek bir tooltip'e benziyor değil mi? Uygularken Checklist'e class verip yukarıdaki satırları eklemek dışında da bir geliştirme gerektirmiyor. Ön koşulların sağlandığı durumlarda oldukça uygulanabilir bir çözüm olduğunu düşünüyorum. Ayrıca IE, Firefox ve Chrome (webkit) uyumlu olarak çalışıyor. Tarayıcıdan tarayıcıya tooltiplerin konumları değişebiliyor, ancak hepsi kabul edilebilir sınırlar içerisinde kalıyor. Arzuya göre genişlik de belirterek daha tooltip-benzer bir görüntü de elde edilebilir. Ötesi CSS yeteneklerinize kalmış...

Umarım sizin de işinize yarar...

HTML Playground

, Yorum yazılmamış »

HTML tagları nasıl kullanılır? Çok kullanmadığımız taglar ne işe yarar? Görünüşleri farklı mıdır? Hangi eventleri destekler?

Dene, gör: http://www.htmlplayground.com

CSSHttpRequest ile cross-domain Ajax

, , , Yorum yazılmamış »

XMLHttpRequest, same-origin-policy bünyesinde olduğu için farklı domainlerden Ajax isteklerini çağıramıyorduk. Bir süre önce bütün tarayıcılar bununla ilgili yamalar yayınladı ve bu özellik kullanılamaz hale geldi.

Ancak same-origin-policy'e dahil olmayan CSS'i unutmuşlardı :)

http://nb.io/hacks/csshttprequest

Önceki Yazılar
Copyright Ali INAL ©2009 - Creative Commons Licence
preload preload preload

Taşındık!


Ali's Surprisingly Web blog'u, artık yeni, güçlü ve daha esnek altyapısıyla yeni adresinden yayın yapıyor. Yeni adresimiz: http://surprisingly.web.tr. Bu eski blog sayfalarındaki bütün içerik, yeni blog altyapısına da taşındı. Arzu ederseniz sizi yeni blog'umda ağırlamak isterim.
Yeni blog'a gitmek istiyorum Bu sayfayı okumak istiyorum

We've Moved!


Ali's Surprisingly Web Blog is now serving from a new, stronger and flexible system with a brand new address. Our new address: http://surprisingly.web.tr. Also we've migrated all old content from this blog to our new blog. If you wish, I want to welcome yo to my new blog.
I want to visit new blog I want to stay and read this page