Wednesday, August 31, 2016

Jquery ile Blogger Üzerinde Facebook Benzeri Odaklanma Uygulaması - Focusing Application like on Facebook with Jquery on Blogger

Bu yazıda yenice facebook'ta karşılaştığım odaklanma uygulamasını blog sayfama nasıl uyguladığımı anlatacağım. Facebook üzerinde durum güncellemesi amacıyla ilgili yazı alanına tıkladığınızda yorum yazılacak yerin dışında kalan kısımların karardığını göreceksiniz. Bu uygulamanın odaklanmada pozitif etkisi olduğu, bu yüzden de bir blog sitesi için de gayet yararlı olacağını düşündüğüm için uygulamayı gerçekleştirme kararı aldım. Öncelikle bir CSS sınıfı tanımlaması yapmamız gerekiyor:

.onFocusMeContainer
{
     background-color:#000000;
     opacity:0.7;
     z-index:12;
     width:100%;
     height:100%;
     position:fixed;  
     top:0;
     left:0;
     display:none;
}

Bu uygulamada bize lazım olan en öncekli element siyah, saydam ve ekranı kaplayan siyah bir elementtir. Bu element bütün ekranı kaplayacak ve odaklama yapacağımız ögenin arkasında, diğer bütün sayfanın üzerinde yer alacaktır. Tabi kırmızı uçan kartalımızın üzerine siyah bir örtü örtmek istemeyeceğimizden dolayı kartalı taşıyan ögenin "z-index" CSS değerini artırdım. "onFocusMeContainer" CSS sınıfında "opacity" değeri ile elemente saydamlık kazandırdık. Elementin "display" özelliğini kullanarak elementi görünmez yapıp, bütün ekranı kaplaması ve pencereyi kaydırdığımız zaman kaymaması için "position" özelliğini "fixed" olarak belirledik. Elementin "z-index" değerini blog için uygun bir değer seçmemiz gerektiği için "12" olarak belirledik, çünkü sitemizin diğer ögelerinin "z-index" değeri 12'den küçüktür. Bu CSS sınıfını oluşturduktan sonra bu sınıfı içeren bir "div" elementini  "body" içine aşağıdaki kod ile ekliyoruz.

<div class="onFocusMeContainer"></div>

Bir sonraki aşamada gerekli fonksiyonaliteyi sağlamak amacıyla bazı javascript kodları tanımlamız gerekiyor.

$(".post-outer").click(function (event) {

   if (lastClicked == null) {

          if (!$(event.target).is("a")) {

               lastClicked = $(event.target);

               while (!$(lastClicked).hasClass("post-outer")) {

                   lastClicked = $(lastClicked).parent();
               }

               $(lastClicked).css("position", "relative");
               $(lastClicked).css("z-index", 5000);
               $(".onFocusMeContainer").show("fast");
          }
    } 
});

$(".onFocusMeContainer").click(function (event) {
   
   $(lastClicked).css("position", "relative");
   $(lastClicked).css("z-index", 0);
   $(".onFocusMeContainer").hide("fast");
   lastClicked = null;
});

Blogger'da yazdığımız makaleler "post-outer" sınıfını içeren bir taşıyıcı kontrol içinde sunulduğu için bu ögenin "click" olayını tanımlamamız gerekiyor. Burada bir döngü aralığıyla "post-outer" sınıfını içeren taşıyıcıya ulaşana kadar "parent" fonksiyonu aracılığıyla DOM üzerine yukarı doğru çıkıyoruz. Bunun sebebi daha önceki bir yazımda bahsettiğim "Event Bubbling" yani olayın yukarı doğru iletilmesi sebebiyledir. Kısaca olayı özetlemek gerekirse, bir taşıyıcı içindeki bir kontrole tıklandığında tıklama olayı en yukarıdaki taşıyıcı elemente kadar iletilmektedir.  Taşıyıcı elementi bulduktan sonra "z-index" özelliğinin çalışması için bu elementin "position" özelliğini "relative" yapmamız gerekiyor. Daha sonra "z-index" değerini büyük bir sayı yaparak elementin yukarıda kalmasını sağlıyoruz. Son aşamada siyah saydam kontrolümüzü görünür hale getiriyoruz. Link ("a") elementlerine tıklandığında ilgili özelliğimiz çalışmaması için "is" fonksiyonunu kullanarak üzerine tıklanan elementin bir "a" elementi olup olmadığını da kontrol etmemiz gerekiyor.

Siyah saydam kontrolümüzün tıklama olayı üzerinde tanımlı fonksiyon aracılığıylada yukarıda yaptığımız düzenlemeleri geri alıyoruz. "lastClicked" değişkeni global olarak tanımlanmıştır ve en son odaklanmış elementi göstermektedir.

Uygulama blog üzerinde şuan aktif olduğu için yazı üzerine tıklayarak uygulamayı deneyimleyebilirsiniz.


Saturday, August 13, 2016

Bir Kez Gönül Yıktın ise

Bir kez gönül yıktın ise
Bu kıldığın namaz değil
Yetmiş iki millet dahi
Elin yüzün yumaz değil

Bir gönülü yaptın ise
Er eteğin tuttun ise
Bir kez hayır ettin ise
Binde bir ise az değil

Yol odur ki doğru vara
Göz odur ki Hak'kı göre
Er odur alçakta dura
Yüceden bakan göz değil

Erden sana nazar ola
İçin dışın pür nur ola
Beli kurtulmuştan ola
Şol kişi kim gammaz değil

Yunus bu sözleri çatar
Sanki balı yağa katar
Halka matahların satar
Yükü gevherdir tuz değil
Yunus Emre