Karalama Defteri
Klavye Kırıntıları
Internet Explorer’da jQuery FadeIn sorunu ve çözümü
Mar 22nd
Internet Explorer 6′da her daim bize sorun oluşturan şeffaf(transparan) resimler ve arkaplanlar maalesef ki Internet Explorer 7′de de devam etmektedir. jQuery‘nin en çok kullanılan efektlerinden olan fadeIn ve fadeOut kullanıldığı zaman, IE 7 desteklediğini iddia ettiği transparanlığı hakkını vererek yerine getiremiyor. Efekt süresince şeffaflık yok. Eğer %50 şeffaf siyah bir grafiğiniz var ise bu grafik tamamen siyah olarak efekti tamamladıktan sonra ise şeffaf halini alacaktır.
Burada örneklerimizi görebilirsiniz. Birinci örnek aşağıda görebileceğiniz gibi düz fadeIn&fadeOut kodlamasıdır.
İkinci örnek benim önerdiğim çözüm oluyor. Koldarımızı aşağıdaki gibidir.
Biz IE7′ye şeffaflığı tanıması için herhangi bir ekleme yapamayacağımıza göre, kullanıcının bu karartıları görmesini engellememiz gerekiyor. Bunun için jQuery‘nin browser özelliğini kullanacağız.
jQuery‘nin browser özelliği nasıl kullanılıyor ;
$.browser.msie
Bu kod bloğu bize boolean bir sonuç döner. Biz burada eğer bize true sonuç dönerse fadeIn yerine show, fadeOut yerine de hide kullanarak kullanıcılarımızın gözlerini tırmalamıyoruz.
Ajax sayfalarda prettyPhoto sorunu ve çözümü
Mar 17th
prettyPhoto‘yu bir ajax içinde çağrılan resimlere uygulamak isteyince bir takım sorunlar ortaya çıkarıyor. Nasıl diyecek olursanız, eğer bir sayfa içerisinde üç kez ajax ile çağırım yaparsanız resimlere üç kere tıklama ekliyor ve resimler birbirine giriyor. Sanırım bunu açıklamak için bir örnek vermek daha mantıklı olacak.
Buradan birinci ve hiç çalışmayacak örneğimize bakabilirsiniz. Bu sayfamızda, sayfa yüklendikten sonra prettyPhoto ile rel’i uygun olanları bir galeri haline getiriyoruz. Ancak sayfa açıldığı anda bizim 2 galerimizde sayfada yüklü değil. Bu nedenle linklerimize prettyPhoto bind edilemiyor. Biz galeriyi .load yöntemi ile çağırırken birde function ekleyerek çağırdığımız sayfadan gelen linklerin onclick event’ine prettyPhoto’yı bind edelim.
birinci örnekteki linklerin onclick evenlerini şöyle düzenliyoruz ;
onclick="$('#resimler').load('images1.html',function(){ prettyBind(); });"
Bu eklemeyi yaptıktan sonra birde prettyBind adında function yazmamız gerekecek. Bu function ile load işleminden sonra linklere galeri özelliğini ekleyeceğiz. Fonksiyonumuz şöyle olacak;
function prettyBind(){
$("a[rel^='prettyPhoto']").prettyPhoto();
}
Örneğimizin yeni haline buradan bakabilirsiniz.
Bu fonksiyonu ekledikten sonra örneğimizi açıp galerilere bir kaç kez tıkladıktan sonra firebug ile kodlarımızı incelediğimizde şöyle bir tablo çıkıyor karşımıza ;
Kodlarda böyle bir tekrar söz konusu olunca tabii ki gösterimde de sıkıntılar ortaya çıkıyor. Siz sayfayı açarak kendi denemelerinizi yapabilirsiniz ancak biz yinede bir resim ile gösterelim.
Peki bunları engellemek için ne yapmalıyız? Evet, yazımızın konusu da tam olarak bu noktada başlıyor. Bunu düzeltmenin 2 yöntemi var birisi prettyBind fonksiyonuna müdahale ederek yapabiliriz. Ancak bu geçici bir çözüm olacaktır. Biz burada prettyPhoto.js’ye müdahale ederek tüm projeyi hatta ileride yapacağımız projelerimizide bu dertten kurtarmış olacağız.
Şimdi, prettyPhoto.js dosyasını açıyoruz,
function _buildOverlay(){
kod bloğunu buluyoruz ve hemen altına
$('div.pp_pic_holder,div.pp_overlay,div.ppt').remove();
kodlarını yapıştırıyoruz. Peki burada ne yapıyoruz? Linkleri bir each ile dönmeye başladığı zamanda, daha önceki galerileri .load ile her çağırdığımızda sayfaya otomatik olarak eklenen “pp_pic_holder,pp_overlay,ppt” classlarına sahip divleri temizliyoruz, fonksiyon yenisini ekliyor. Böylece karışıklık ortadan kalkmış oluyor.
Son olarak yeni prettyPhoto.js dosyamız ile yeni ve sorunsuz galerimize bakalım. Buradan galerimizin son haline bakabilirsiniz.
prettyPhoto.js dosyamızın son haline buradan ulaşabilirsiniz
Css ile Açılır menü hazırlayalım
Jun 9th
En basit ve sorunsuz şekli ile açılır bir menü hazırlıyacağız. Sadece CSS ve HTML ile oluşturacağımız bu menünün en güzel tarafı tüm tarayıcılarda sorunsuz bir şekilde çalışacak olması. Hemde bunları yaparken hiç javascript kullanmayacağız 
. Bir ay kadar önce internette bir örneğine rastlamıştım. Şirket içi Proje için basit bir menüye ihtiyacım olunca bu yöntem geldi aklıma.
Öncelikle menümüzün HTML kısmını hazırlayalım.
Menümüzde önemli nokta, iç içe geçmiş
- etikleri. Önce yatay bir menü hazırlıyoruz.
<ul id="menu"> <li><a href="#">Anasayfa</a></li> <li> <a href="#">Madde 1</a></li> <li> <a href="#">Madde 2</a></li> </ul>
Anasayfa’nın altında herhangi bir link olmayacağı için Madde 1 ile açılır menümüzü hazırlamaya başlıyoruz.
<li> etiketi altına bir tane
<ul> etiketi açıyoruz. Bu etiket içerisine açılacak menüyü yerleştireceğiz. Şimdi Madde 1′in altında açılacak olan menümüzün kodlarını yazalım.
<li> <a href="#">Madde 1</a> <ul> <li><a href="#">Madde 1-1</a></li> <li><a href="#">Madde 1-2</a></li> </ul> </li>
Peki bu menü nasıl açılacak? Bu açılma ve tekrar kapanma işlemlerini CSS ile yapacağız. ID’si “menu” olan ul etikenine ait li etiketlerinin içerisinde yer alan ul etiketlerinin varsayılan(default) display değerini “none” olarak belirliyoruz. Tek cümlede anlatınca biraz karışık olduğunu biliyorum o yüzden bir çizim ile bunu anlatarak pekiştirelim.
Bu grafiğe ait olan CSS kodlarını yazalım. Yukarıdada belirttiğim gibi <li> içindeki etiketinin değerini atayacağız.
ul#menu li ul{
display:none;
border:solid 1px #ccd6e5;
padding:0px;
margin-left:-10px;
padding-bottom:5px;
}
Yukarıda stil olarak vermiş olduğumuz kodları geçersek ilk sırada yer alan “display:none;” koldarı bizim işimizi gören kısım. Şimdi en işlevsel kısıma geldik. Bu alt menümüz ne zaman açılacak. Genel olarak “<a” etiketlerinde kullanılan “hover” özelliğini kullanacağız. Yani “li:hover” da altındaki “ul” etiketinin display özelliğini “block” yapacaz.
Şimdi CSS kodlarını yazalım :
ul#menu li:hover ul{
display:block;
position:absolute;
width:150px;
background:#fff;
}
jQuery – each
Apr 26th
Çok geçte olsada jQuery’i temelden ve elimden geldiği kadar anlatmaya karar verdim.(Eğer “jQuery ne” diye bir soru oluştu ise aklınızda erhan burhan‘ın sitesindeki güzel yazısını tavsiye ederim)
Sanırım sadece yazı değil, yanında videolar ile anlatımlarımda olacak.
jQuery dökümanları ile paralel olarak yazmaya çalısacağım ancak içerisinde atlayacağım alanlar olacak. Orta hatta ortanın üstü bir jQuery bilgisine sahip olmanızı sağlayana kadar yazmaya çalışacağım. Bu bağlamda ilk yazımız jQuery’nin en güzel özelliklerinden olan each olacak.
each :
Temelde olsa yazılım bilginiz var ise zaten bu özelliğin ne işe yaradığını çoktan anlamışsınızdır. Foreach’in jQuery versiyonuda diyebiliriz.
Peki ne iş yapar bu each?
Belirlediğiniz seçicilerden oluşan bir dizideki elemanların içerisinde teker teker dönmemizi sağlar. Örnekleyerek devam edersek sanırım daha rahat anlaşılabilir.
Bir sayfamız var, içerisindeki tüm inputları seçeceğiz ve each ile bunların kenar çizgilerini kırmızı yapacağız.
Seçici Kodlar :
function sec(){
$('input').each(function(){
this.style.border = "solid 1px #cc0000";
});
}
Sayfanın örneğine buradan ulaşabilirsiniz.
İyide bunu zaten daha kısa bir kod ile yapabiliriz neden bu yolu seçtik şeklinde sorabilirsiniz. Bu örnek için aslında each’i kullanmanın bir anlamı yok. Bu örnekte each ile tüm öğeleri seçebildiğimizi görmüş olduk. Eğer sayfadaki “seç” butonuna tıklarsanız kendiside dahil tüm inputları seçtiğini göreceksiniz. Each’in bize yararını anlamak için bir sonraki örneğimize geçelim.
Bu örneğimizdeki inputlarımızın 3 farklı yazı rengi bulunmaktadır. Biz bunlardan siyah olanlarının mavi olmasını istiyoruz. Bunun için tüm inputları öncelikle each ile bir diziye alacağız ve daha sonrada yazı renklerini kontrol edip siyah olanları mavi yapacağız.
Seçici Kodlar :
function sec(){
$('input').each(function(){
var yaziRengi = this.style.color; //yazi rengini alıyoruz
if(yaziRengi == "black"){ //yazı rengi siyahmı kontrol ediyoruz
this.style.color = "blue"; //siyah olanları mavi olarak atıyoruz
}
});
}
Sayfanın örneğine buradan ulaşabilirsiniz.
Bu örnek ile aklınızda birşeylerin oluştuğuna inanıyorum.
Each’i amacına uygun nasıl kullanacağımıza geldik. Bir formumuz olduğunu düşünelim ve biz bu formda hiçbir alanın boş bırakılmamasını istiyoruz. Form submit edildiğinde boş alan varmı yokmu kontrol edelim. Eğer boş alanlar var ise kenarlık ve arkaplan renklerini değiştirelim.
Seçici Kodlar :
function sec(){
$('input').each(function(){ //tüm inputları bir diziye atıyoruz
//inputun değerini alıyoruz ve değerdeki boşluları siliyoruz
//burada boşluk silmemiz normal değeri etkilemeyeceği gibi
//gibi boş veri kontrolünü sağlayacaktır.
if(this.type=="text"){//tipi text olan inputları seçiyoruz
var inputValue = this.value.replace(" ","");
if(inputValue == ""){//eğer değer boş ise
$(this).css({"border":"solid 1px #c00","background-color":"#c00","color":"#fff"});
//üzerinde işlem yaptığımız inputun stilini değiştiriyoruz.
}
else //eğer veri boş değil ise daha önceden kontrolde boş gelme ihtimaline karşın
//input'un şeklini eski hale getiriyoruz.
{
$(this).css({"border":"solid 1px #000","background-color":"#fff","color":"#000"});
}
});
}
}
Sayfanın örneğine buradan ulaşabilirsiniz.
Yukarıdaki örnekleri jQuery’nin seçicileri ile daha kısa bir şekilde yapmamızda mümkün ancak konumuz each olduğu için uzunda olsa biz bu yolu tercih ettik. Çünkü seçiciler sayesinde elde edemeyeceğimiz veriler aracılığı ile çok daha etkili çözümler üretebileceğimizi ileride göreceksiniz.
Yukarıda çok kısa bir şekilde yaptığımız işlemleri jQuerysiz yapsak emin olun çok daha uzun sürecekti.
Sorularınız için sağdaki iletişimin altındaki soru sor ile bana iletebilirsiniz.
jQuery ile Validation
Mar 31st
Jquery ile bir çok validation (doğrulama) plugin’i bulmamız mümkün. Ancak küçük ve orta boyutlu projelerde kendimize has ve daha küçük boyutlu doğrulama ihtiyaçlarımız doğabilir. Kendi yazdığımız kodlar her zaman için daha rahat kontrol altında tutulabilir diye düşünüyorum.
Jquery ile bir formda yer alan input elemanlarından “type=text” yani tipi yazı olanları kapsayan bir script yazalım. Doğrulama esnasında ihtiyacımız olan 3 şey ;
<ul> <li>O elemanın boş olup olamayacağı</li> <li>Boş değil ise kaç karakterden az olamayacağı</li> <li>Özelleştirilmiş hata mesajı</li> </ul>
Oluşturduğumuz standart inputlarda bu alanlar tabii ki yer almamaktadır. Biz kendimiz oluşturmalı yada var olan attributeleri(özellikleri) kendimize göre kullanmalıyız.
Ben elemanın value(değer) kontrolü için required(gerekli) diye bir özellik eklemeyi tercih ettim. En az kaç karakter olacağını ise rel özelliğinden belirleyeceğim.Özelleştirilmiş hata mesajı için ise hata özelliğini kullanacağız.
Örnek input kodumuz :
HTML tarafında yapmamız gerekenler bu kadar. Asıl konumuz olan js tarafında ise jQuery ile hiç zorlanmadan fonksiyonlarımızı yazabileceğiz. 3 farklı fonksiyon yazmamız gerekecek.
<ol> <li>Value kontrol işlemleri için</li> <li>Hata mesajı göstermek için</li> <li>Hata mesajını ekrandan silmek için</li> </ol>
1. Fonksiyonumuz : inputValueKontrol
Kısaca yapacaklarımızı anlatmak gerekirse : Öncelikle tüm inputları foreach ile döngü içerisine alarak kontrol ediyoruz. Required değeri 1 olanların valuelarına bakıyoruz. Eğer value uzunluğu (length) rel değerinden az ise bir hata mesajı çağırıyoruz yoksa işleme devam ediyoruz.
Kodlarımızı kısaca açıklayalım. İlk fonksiyonumuz olan inputValueKontrol ile başlayalım.
$(‘input’).each(fucntion(){}); ile tüm inputları bir diziye atadıktan sonra bir döngü içerisinde tek tek inceleyeceğiz.
Döngümüz başladıktan sonra incelemekte olduğumz inputun required özelliğinin 1 olup olmadığını kontrol ediyoruz. Peki bir inputun özelliklerini nasıl alırız :
$(this).attr(“required”) şeklinde, bulunduğumuz input’un attributelarından(özelliklerinden) istediğimize ulaşabiliriz.
if($(this).attr(“required”)==”1″) satırı ile validation’a açık olan inputları seçiyoruz.
var tur = $(this).attr(“rel”);
var hata = $(this).attr(“hata”); Burada tur istenilen verinin uzunluğunu hata ise istenilen veri uzunluğuna erişilmediği zaman gösterilecek hatayı dönderecektir bize. Eğer hata mesajımız yok ise daha önceden belirlediğimiz mesajı göstermesi için şu satırları ekleyelim :
if(!hata){hata = “Bu alanı boş bırakamazsınız”;}
Fonksiyonumuzun çalışmaya başladığı nokta input’un onblur event’ıdır.
$(this).blur(function(){});
Fonksiyonumuz başladığına göre gerekli kontrollerimize başlayabiliriz. Öncelikle tur değişkenimizin varlığına göre bir kontrol yapıyoruz ve required değeri 1 iken rel değeri 1′den büyük ve boş değilse yapılacakları belirlemek için şu satırları ekliyoruz :
if(tur>1 & tur != ""){}
İstenilen değer 1′den büyük ve boş değilse değeri kontrol ediyoruz. Eğer değer uzunluğu istenilen uzunluktan büyük değilse hata mesajını gösteriyoruz ve input’un kenarlıklarını şekillendiriyoruz.
var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength<tur){
$(this).css("border","solid 1px #f00");
hataMesaj(hata);
}else{
$(this).css("border","1px solid #C0C0C0");
hataMesajiSil();
}
Eğer değerler doğru isede input’un kenarlıklarını eski haline çeviriyoruz ve mevcut olan hata mesajını siliyoruz.
Birde tur (yani rel) değerinin olmadığı durumlar var. Bu inputların değerinin boş olamayacağı anlamına geliyor. Aynı işlemleri rel’i 1 kabul ederek tekrar uyguluyoruz.
var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength==0){
$(this).css("border","solid 1px #f00");
hataMesaj(hata);
}else{
$(this).css("border","1px solid #C0C0C0");
hataMesajiSil();
}
Inputların değer kontrol işlemlerine ait kodların inputValueKontrol fonksiyonunda olduğunu söylemiştik. Bu fonksiyona ait kodlar aşağıdaki gibidir.
Şimdi hata mesajlarını ekrana yazdıran fonksiyonumuz hataMesaj‘ı yazalım.Bu fonksiyonun mantığı çok basit. Tek parametre ile gösterilecek mesajı alıyoruz ve bunu bir div etiketinin içerisine ekledikten sonra sayfaya ekliyoruz. Ekstra olarak yaptığımız tek işlem bu div etiketinin sayfada ekli olup olmadığını kontrol etmek. Eğer daha önceden eklenilmiş bir etiket var ise sadece içeriğini değiştiriyoruz ve en son hata mesjını ekliyoruz. En son olarakda bu mesajın 30 saniye sonra kendisini imha etmesini sağlıyoruz
En son fonksiyonumuz ise ekrana yazdığımız hata mesajını kaldırma fonksiyonu. Bunu açıklamaya sanırım gerek yok.
Örnek uygulamaya buradan ulaşabilirsiniz.
jQuery ile Animasyon(Animation) – II
Nov 22nd
Bir önceki yazımda jQuery ile animasyona giriş yapmıştık. Bu yazı ile zincirleme ve etkileşimli animasyonlar hazırlayacağız.
Zincirleme derken neden bahsediyorum ;
Bir divimiz var ve biz bunu önce genişlemesini sonrada yüksekliğinin değişmesini istiyoruz. İşte burada jQuery’nin en sevdiğim özelliklerinden birisi olan zincirleme devreye giriyor.
Önce javascript kodlarımızı yazalım :
function func1(id)
{
//id'sini parametre olarak gönderdiğimiz elementin
//önce genişliği ile sonrada arkaplan rengi ile oynuyoruz
$('#'+id).animate({width:500},250).animate({height:500},250);
//zincirleme animasyonlarda bir işlem bittikten sonra
//diğeri başlar
}
HTML kodlarımız :
<input onclick="func1('div1')" type="button" value="oynat" id="genislet" />
<br />
<div style="width:100px;height:100px;background:#f00;display:block;" id="div1"></div>
Örneğimize buradan ulaşabilirsiniz.
Zincirleme, sadece animasyonlar arasında bir hiyerarşi sağlamaktadır. Yani animateden sonra bir css kodu yazarsanız bu animasyon başladığı anda gerçekleşecektir.
Temel olarak anlatmamız gerekenleri bitirdiğimize göre örneklerimizi komplike hale getirelim.
4 tane resim içeren bir animasyon hazırlayalım. Başlangıçta hepsinin eni ve boyu eşit görünecek. Normal boyutları farklı resimler seçecez ve tıkladığımız resim orjinal boyutuna gelecek. Öncelikle resimler için google’dan “cat” diye arama yapıp 4 tane resim seçeyim
Resimlerimizi yan yana sıralıyoruz ve basit bir css uyguluyoruz. CSS’imizin amacı, tüm resimleri aynı boyutlardaki divlerin içerisine yerleştirerek farklı boyutlardaki resimlerin görüntüyü bozmasını engelliyoruz.
Öncelikle HTML kodlarımızı yazalım :
<div style="margin-left: 30%; margin-top: 150px;">
<div class="resim"><img src="http://www.arastiralim.net/wp-content/uploads/2008/02/lady-cat.jpg" /></div>
<div class="resim"><img src="http://www.plasticbamboo.com/wp/wp-content/uploads/hello-kitty-cat.jpg" /></div>
<div class="resim"><img src="http://www.fulyavet.com/images/cat17.jpg" /></div>
<div class="resim"><img src="http://asymptotia.com/wp-images/2006/12/copy_cat_copies.jpg" /></div>
</div>
CSS kodlarımız :
.resim{
height:90px;
float:left;
margin:0px 10px;
width:100px;
overflow:hidden;
}
HTML ve CSS kodlarımızı tamamladığımıza göre jQuery kodlarımızı yazmaya başlayabiliriz.
Sayfamız yüklendiği zaman $(document).ready() ile tüm resimlerimizin orjinal boyutlarını alıp rel‘e atıyoruz. Tıklandığı zaman resmimizin boyutunu alabilmek için en kısa yöntem bence. Boyutları gerekli yere atadıktan sonra tüm resimlerimizin genişliğini 100 yapıyoruz. Yükseklikte genişliğe orantılı olarak otomatikmen değişiyor. Resimlerden herhangibirisine tıklandığı zaman yapılacak işlemleri belirliyoruz. Aşağıda zaten kodların içinde açıklamaları var ancak ben burada “each“den bahsetmek istiyorum ;
$('div.resim>img').each(function(){
$(this).attr('rel',$(this).width());
});
satırları ile class’ı resim olan divlerin içerisindeki tüm resimleri “each” yardımı ile tek tek dönüyoruz. Yani hazır bir array‘i yine hazır bir şekilde tek tek elemanlarına ayırıyoruz. Özellikle id ve class gibi seçivilerimizin olmadığı durumlarda bir üst seçiciye bağlı olarak işlem yapmamızı kolaylaştırır(programcılar için çok tanıdıktır zaten). Bu kod satırlarındaki üst seçicimi “div.resim“.
En son olarak javascript kodlarımızı yazıyoruz :
$('div.resim>img').each(function(){
//each ile tüm resimlerimizin orjinal genişliğini tektek
//rel özelliğine(attribute) atıyoruz
$(this).attr('rel',$(this).width());
//tıklandığı zamanda buradan aldığımız değer ile
//genişlik ve yüksekliğini ayarlıyoruz
});
//genişlik alma işlemimiz bittikten sonra tüm resimlerin
//genişliğini 100px'e getiriyoruz
$('div.resim>img').width(100);
//galerimizdeki bir resime tıklandığı zaman
//yapacağı işlemlere geçelim
$('div.resim>img').click(function(){
//öncelikle açık olan resim için tüm resimleri sıfırlıyoruz
$('div.resim>img')
.animate({width:100},250)//animate ile genişliğini 100px'e çekiyoruz
//css özelliklerinide ilk haline getirmemiz gerekiyor
.css({'z-index':'1','position':'static','margin-left':'0px','margin-top':'0px'});
//ilk başta atadığımız rel değer ile animasyon sonunda
//resmimizin geleceği genişliği alıyoruz
var w = $(this).attr('rel');
//bulunduğu yeri ortalaması için biraz sola kaydırmak
//gerekeceğinden marginlerden 20 genişlikten dolayıda
//100 geliyor toplam genişlikten 120 çıkartıp
//2 ye bölerek ne kadar sola kayacağını hesaplıyoruz
var mL = (w-120)/2;
//basit ancak önemli bir kontrol ekliyoruz
//eğer resim küçük ise büyütme işlemlerini yap diyoruz
//isterseniz bu satıları kaldırarak farkı görebilirsiniz
if($(this).width() == 100)
{
//öncelikle resmimizin positionunu absolute yaparak divin
//css>overflow özelliğini ezmesini sağlıyoruz
//daha sonra z-index'ini 5 yaparak diğer resimlerin üzerine alıyoruz
//ve animasyonumuz ile estetik bir şekilde genişlik,
//marginTop ve marginLeft'i ile oynuyoruz
$(this)
.css({"position":"absolute","z-index":"5"})
.animate({width:w,marginTop:'-10%',marginLeft:'-'+mL},250);
//ve bu basit resim galerimiz böylece sona eriyor
}
});
Bu örneğimizede buradan ulaşabilirsiniz.
jQuery ile Animasyon (animate)
Nov 8th
jQuery’nin işimizi kolaylaştırdığı tartışılamaz. Ancak bize sunmuş olduğu bazı imkanlar varki bunlar işimizi kolaylaştırmanın yanında işimizi zevkli kılıyor. Bunların başındada animate geliyor. Çok daha görsel sayfalar oluşturabilmek çok daha kolay.
Animate jQuery’nin effect grubundan bir öğedir. Genel yazım şekli ;
.animate( params, [duration], [easing], [callback] );
params : animasyonumu belirleyen parametrelerden oluşur.
duration : anismasyonun süresini belirlememizi sağlar. Alabileceği değerler “slow” , “normal” , “fast” ve rakamsaldır. Bir saniye 1000 milisaniye kabul ediliyor.
easing : 2 değer alabilen özel bir efekttir. “swing(sallantı-sallanma)” ve “linear (çizgisel)” değerleri alır. Plug-in gerektirmektedir.
function : animasyonun sonunda meydana istediğiniz işlemleri çağırmanıza yarar.
Şimdi örnekler ile açıklamaya devam edebilim;
ilk örneğimizde sadece bir divin genişlik ve yüksekliğini değiştireceğiz. Kodlarımız aşağıdaki şekilde ;
//öncelikle sayfamızın yüklenmesi tamamlandığı zaman yine jQuery
//ile butonlarımızın onclick event'ine animasyonlarımızı atıyoruz
$(document).ready(function(){
$('#genislet').click(function(){
$('#aniDiv1').animate({
width:200,//burada div'in genişliğini 200px olarak atıyoruz
height:200//burada div'in yükseliğini 200px olarak atıyoruz
},250//animasyonumuzun hızını 250 milisaniye olarak ayarlıyoruz (yani 1/4 saniye)
);
});
$('#daralt').click(function(){
$('#aniDiv1').animate({
width:50,
height:50
},250);
});
});
Örneğimize buradan ulaşabilirsiniz.
İkinci örneğimizde az önceki divimizin yerini değiştirecelim. Tabii ki ilk önce kodlarımızı yazalım.
$("#sol").click(function(){
$("#Div3").animate({"left": "+=50px"}, "slow");
});
$("#sag").click(function(){
$("#Div3").animate({"left": "-=50px"}, "slow");
});
Bu örneğimizde dikkatinizi çekmek istediğim nokta “left”:”-=50px” satırlarındaki “-=” ve “+=”. Bu 3 karakter ile oluşan 2 karakterlik katar bizi bir çok kodu yazmaktan kurtarıyor. Bu kodlar olmasa nasıl yazmamız gerekcekti ;
var left = $('#Div3').css('left');
left = left.replace('px','');
left += 50;
$("#Div3").animate({"left": left+"px"}, "slow");
İşte jQuery’nin gücü
Örneğimize buradan ulaşabilirsiniz.
Şimdiki örneğimizde bir elementin şeffaflığı (opacity) ile oynuyoruz.
$('#btnOpacity0').click(function(){
$("#Div2").animate({opacity: 0}, "slow");
});
$('#btnOpacity05').click(function(){
$("#Div2").animate({opacity: 0.5}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({opacity: 1}, "slow");
});
Örneğimize buradan ulaşabilirsiniz.
“opacity” bu örneğimizdeki gibi sayısal değer (0 ile 1 arasında) alabildiği gibi “show(göster)” ve “hide(gizle)” değerlerinide alabilir. Ancak bu sefer yazım şeklimiz biraz değişiyor ;
$('#btnOpacity0').click(function(){
$("#Div2").animate({"opacity": "hide"}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({"opacity": "show"}, "slow");
});
Şimdiki örneğimizde ise bir animasyon tamamlandıktan sonra fonksiyon çağıracağız. “Duration” dan sonra “function(){}” yazıyoruz ve normal bir javascript fonksiyonu gibi “{}” arasına istediğimiz kodları yazıyoruz.
$("#Div4").css("opacity","0.5");
$('#btnCalistir').click(function(){
$("#Div4").animate({width:400,height:400,opacity:1}, "slow", function(){alert("animasyonumuz tamamlandı");});
});
Örneğimize buradan ulaşabilirsiniz.
Tüm örnekler 1 sayfada yer alıyor.
Tüm kodlar :
<!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>jQuery Animate</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
var tumAdres=String(this.location);
veri=tumAdres.split("?")[1];
if(document.getElementById(veri))
{
$('#'+veri).show();
}
$('#genislet').click(function(){
$('#aniDiv1').animate({
width:200,//burada div'in genişliğini 200px olarak atıyoruz
height:200
},250);
});
$('#daralt').click(function(){
$('#aniDiv1').animate({
width:50,
height:50
},250);
});
$("#sol").click(function(){
$("#Div3").animate({"left": "-=50px"}, "slow");
});
$("#sag").click(function(){
$("#Div3").animate({"left": "+=100px"}, "normal");
});
$('#btnOpacity0').click(function(){
$("#Div2").animate({opacity: 0}, "slow");
});
$('#btnOpacity05').click(function(){
$("#Div2").animate({opacity: 0.5}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({opacity: 1}, "slow");
});
$("#Div4").css("opacity","0.5");
$('#btnCalistir').click(function(){
$("#Div4").animate({width:400,height:400,opacity:1}, "slow", function(){alert("animasyonumuz tamamlandı");});
});
});
</script>
</head>
<body>
<div id="ornek1" style="display:none;">
<div class="aciklama">
ilk örneğimizde divimizin sadece boyutlarını değiştireceğiz
</div>
<div id="divli1" class="div">
<input type="button" value="genişlet" id="genislet" /> <input type="button" value="daralt" id="daralt" />
<br />
<div style="width:100px;height:100px;background:#f00;display:block;" id="aniDiv1"></div>
</div>
</div>
<div id="ornek2" style="display:none;">
<div class="aciklama">
ikinci örneğimizde divimizin yerleşimini değiştireceğiz
</div>
<div>
<input type="button" value="<<" id="sol" /> <input type="button" value=">>" id="sag" />
<br />
<div style="width:100px;height:100px;background:#ccd6e5;display:block;left:200px;position:absolute;" id="Div3"></div>
</div>
</div>
<div id="ornek3" style="display: none;">
<div class="aciklama">
üçüncü örneğimizde divimizin şeffalığı ile oynayacağız
</div>
<div>
<input id="btnOpacity0" type="button" value="gizle" /> - <input id="btnOpacity05" type="button" value="şeffaflaştır" /> - <input id="btnOpacity1" type="button" value="göster" />
<br />
<div id="Div2" style="width: 100px; height: 100px; background: #ccd6e5; display: block;left: 50px; position: absolute;margin-top:10px;"></div>
</div>
</div>
<div id="ornek4" style="display: none;">
<div class="aciklama">
dördüncü örneğimizde fonksiyonumuz tamamlandığında bir "alert" veriyoruz.
</div>
<div>
<input id="btnCalistir" type="button" value="çalıştır" />
<br />
<div id="Div4" style="width: 100px; height: 100px; background: #ccd6e5; display: block;left: 50px; position: absolute;margin-top:10px;"></div>
</div>
</div>
</body>
</html>
Bu yazımıza burada son veriyoruz. Tahminen bu serimiz 3 yazı olacak. Bir sonraki yazıda görüşmek dileğiyle hoşçakalın…
jQuery Accordion Plugin
Oct 31st
Bir önceki yazımda jQuery ile accordion menü hazırlamayı anlatmıştım. Şimdi ise o functionun plugin halini sizlerle paylaşıyorum.
Pluginin asıl amacı accordion menüler oluşturmak. Ancak ayarlardan daha değişik işlemler için kullanılabilir hale getirebilirsiniz.
Kullanım şekli :
$('div.accordion1').accordion();
İsterseniz kullanabileceğiniz 6 tane ayar barındırıyor içerisinde. Ayarlarının kullanım şekli :
$('div.accordion1').accordion({
acik:1,
baslik:'<div class="menuTitle">Fade - ul </div>',
hiz:150,
etiket:'ul',
effect:'fade',
style:'menu'
});
Ayarlarımızı tek tek açıklayalım :
acik:
Menüdeki maddelerden hangisinin açık geleceğini seçebiliyorsunuz. Dikkat edilmesi gereken bir nokta var. Tabii ki saymaya 1 değil 0‘dan başlıyoruz. Eğer tamamının kapalı gelmesini istiyorsak ya hiç yazmıyoruz yada değeri -1 olarak belirliyoruz.
varsayılan değeri : -1
baslik:
Menümüzün başlığını oluşturuyoruz. Tamamen isteğe bağlı olup html tagları kullanabiliyoruz.
varsayılan değeri : yok
hiz :
Menü efektlerinin hızını belirler. 1000 değeri 1 saniyeye eşittir.
varsayılan değeri : -1
etiket :
Belirtmiş olduğumuz etiketin altında yer alan elementlerden hangilerinin menünün maddelerini oluşturacağını belirler.
Örn : etiket : ‘span’,
varsayılan değeri : ul
effect :
Menü maddelerinin efektini belirlememize yarar.
Alabileceği Değerler :
- slide
- show
- bounce
- none
varsayılan değeri : ‘none’
style :
Oluşturulan menümüzün başlıkları ve maddelerin stillerini belirlememize yarar.Vermiş olduğumuz style değişkeninin sonuna başlıklar için Baslik, maddeler için Div ekler.
varsayılan değeri : accordion
varsayılan stiller : accordionBaslik, accordionDiv
Önemli olan bir nokta daha var. etiket ile belirlediğimiz maddelerin başlıklarını etiket‘in title özelliği oluşturuyor.
<script type="text/javascript">
$(document).ready(function(){
$('div.accordion1').accordion({
acik:1,
baslik:'<div class="menuTitle">Fade - ul </div>',
hiz:150,
etiket:'ul',
effect:'fade',
style:'menu'
});
});
</script>
<div class="accordion1">
<ul title="Baslık bir">
<li><a href="#">Madde 1</a></li>
<li><a href="#">Madde 2</a></li>
<li><a href="#">Madde 3</a></li>
</ul>
<ul title="Baslık İki">
<li><a href="#">Madde 2-1</a></li>
<li><a href="#">Madde 2-2</a></li>
<li><a href="#">Madde 2-3</a></li>
</ul>
<ul title="Baslık Üç">
<li><a href="#">Madde 3-1</a></li>
<li><a href="#">Madde 3-2</a></li>
<li><a href="#">Madde 3-3</a></li>
</ul>
</div>
Bu HTML kodlarının çıktısı aşağıdaki gibi olacak :
Diğer Örnekler için buraya tıklayınız.
Kodları indirmek için buraya tıklayınız.
Jquery ile Accordion menu hazırlayalım
Oct 28th
Neredeyse bir web 2.0 standardı olan accordion menüler sayfalarımızında vazgeçilmezi haline geldi. Şimdi yazacağımız plugin ile accordion menü hazırlamak çok
kolay hala gelecek. Sizlerde üzerinde biraz değişiklikler yaparak istediğiniz yapıda menüleri kolaylıkla oluşturabilirsiniz.
Öncelikle menümüzün salt html halini oluşturalım;
<!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=ISO-8859-9" /> <title>Accordion Menü</title> </head> <body> <div class="accordion"> <ul title="Baslık bir"> <li><a href="#">Madde 1</a></li> <li><a href="#">Madde 2</a></li> <li><a href="#">Madde 3</a></li> </ul> <ul title="Baslık İki"> <li><a href="#">Madde 2-1</a></li> <li><a href="#">Madde 2-2</a></li> <li><a href="#">Madde 2-3</a></li> </ul> <ul title="Baslık Üç"> <li><a href="#">Madde 3-1</a></li> <li><a href="#">Madde 3-2</a></li> <li><a href="#">Madde 3-3</a></li> </ul> </div> </body> </html>
Sayfamıza jquery.js dosyamızı ekledikten sonra accordion.js adında bir javascript dosyası oluşturalım kendimize.Oluşturduğumuz accordion.js dosyasını
sayfamıza <link> etiketi ile ekledikten sonra kodlarımızı yazmaya başlayalım.
Öncelikle sabitlerimizi oluşturalım
var divClass = "accordion";//accorion uygulanacak ul'lerin bulunduğu divin classı var menuHtml = "";//sayfadaki mevcut kodları temizledikten sorna kendi kodlarımızı ekleyeceğimiz değişken. var sonAcikUl = -1;//en son açılan ul'un id'si.Eğer -1 ise henüz hiçbiri açılmamış demektir.
Buradaki değişkenlerimizin açıklaması zaten yanlarında mevcut ancak <strong>menuHtml</strong> üzerinde durmamız sanırım iyi olacaktır. Eğer
menümüzün üzerinde ekstra birşey yer almasını istiyorsak bu değişkene atayabiliriz. Örneğin menümüzün üzerinde menu.jpg adında bir grafik yer almasını
istiyorsak
var menuHtml = "<img src="menu.jpg" />";
şeklinde değiştirebiliriz.
Kodumuzun ilk bölümü hazırlandı. Şimdi sayfamız yüklendiğinde değiştirilecek alanı bularak gerekli işlemleri yapmaya başlamamız gerekmektedir. Bu işlemleri
jQuery’nin $(document).ready fonksiyonu ile başlatıyoruz ;
$(document).ready(function(){
var us = $('div.'+divClass+'>ul').length;//işleme girecek ul sayısını alıyoruz
//bunları bir for döngüsü ile spanolustur fonksiyonuna atıyoruz
for(i=0;i<us;i++)
{
spanOlustur(i);
}
//fonksiyonumuz gerekli işlemleri yaptıktan sonra bize işlevsel html kodlarımız dönüyor
//Bizde bunları en başta belirlediğimiz div'in içeriğine eklemeden önce
//div'imizin içindeki html kodlarını temizliyoruz
//daha sonrada fonksiyonumuzun oltuşturduğu kodları div'imize ekliyerek işlemlerimizi tamamlıyoruz
$('div.'+divClass).empty().html(menuHtml);
//accordion menümüz artık hazır ve geriye kalan tek şey ul etiketlerinin bulunduğu divleri kapatmak
$('div.acilanDiv').hide();
});
Evet işlemler bitti ve menümüz hazır hayırlı olsun demeyeceğim tabii ki. Burada çağırmış olduğumuz spanOlustur fonksiyonumuz tüm
işlevselliği sağlayor. Şimdi o fonksiyonumuzu yazalım.
Not:jQuery’nin en güzel seçicilerinden olan eq’nun burada güzel bir kullanımını göreceğiz.Bu seçicinin ne işe yaradığını kısaca anlatmak gerekirse :
eq ile istediğimiz bir etiketin istediğimiz sıradaki elemanını seçebiliriz. Biz burada menümüzü oluşturan ul’leri sırası ile seçerek
içerisindeki html kodlarını alıp istediğimiz hale getiriyoruz.
function spanOlustur(ulSayi)
{
//fonksiyonumuz ile gelen ulSayi'ncı sıradaki ul'u seçiyoruz
//bu elementi ul adında bir değişkene atıyoruz.
var ul = $('div.'+divClass+'>ul:eq('+ulSayi+')');
//ulHtml değişkenine ul'e ait html'i atıyoruz
var ulHtml = ul.html();
//menümüzün başlıklarını oluşturmak için ul'e ait title etiketinin değerini alıyoruz.
var spanBaslik = ul.attr('title');
//şimdi ise menümüzü oluşturuyoruz.
//öncelikle bir div oluşturup class,id ve onclick özelliklerini ayarlıyoruz.
//onclick'de accordionAc diye bir fonksiyonu tetikliyoruz.
//En son olarak da menümüzün başlığını bu dive içerik olarak ekliyoruz.
var menu = '<div class="accordionBaslik" id="menu'+ulSayi+'" onclick="accordionAc('+ulSayi+');">'+spanBaslik+'</div>';
//başlık divinin altına bir div daha ekleyerek onada menümüzü içerik olarak göstereceğiz.
//burada dikkatinizi çekmek istediğim bir nokta var;
//az önce hazırladığımız ulHtml, ul etiketlerinin içerisinde kalan li ve a etiketlerini alıyor sadece
//bu yüzden yeni bir ul etiketi yazmak zorundayız.
menu += '<div id="ul'+i+'" class="acilanDiv"><ul class="accordion">'+ulHtml+'</ul></div>';
//yeni bir menu elementimiz hazır olduğuna göre bunu menuHtml değişkenine ekleyebiliriz.
menuHtml += menu;
}
Şu anda menümüz hazır ancak kullanılabilir değil. Sebebiyse tabii ki accordionAc fonksiyonunu henüz yazmamış olmamız. Bu fonksiyonumuzuda
yazarak pluginimizi tamamlayalım.
function accordionAc(id)
{
if(sonAcikUl!=id)//eğer açık dive tıkladı ise herhangi bir işlem yapmıyoruz.
{
if(sonAcikUl==-1)//buradada menüye ilk defa tıklanıp tıklanmadığını kontrol ediyoruz
{
$('div#div'+id).slideDown(250);//eğer ilk tıklama ise sadece açma işlemi yapıyoruz
}
else
{
$('div#div'+sonAcikUl).slideUp(250);//son açık olan divi kapatıyoruz
$('div#div'+id).slideDown(250);//tıklanan divi açıyoruz
}
sonAcikUl = id;
}
}
Artık menümüz kullanıma hazır.
Örnek uygulama için buraya tıklayabilirsiniz.
Örneği indirmek içinde buraya tıklayabilirsiniz.
Bir sonraki yazıda görüşmek dileğiyle hoşçakalın.
ASP.NET ile Resimlere Yazı Yazmak
Oct 10th
.NET ile componentlerden kurtulmak beni ne kadar sevindirdi ise, yine . NET ile herşeye hakim olmakta bir o kadar sevindiriyor. Tabii ki bu sadece 40-50 $’lık componentlerden kurtardığı için değil. Az sonra yazacağım örnekle eminimki sizde sevecek yada dahada bir ısınacaksınız.
Sitemize kayıt ettirdiğimiz resimleri kullanıcılara gösterirken üzerine sitemizin adını yazmak kim istemez? Eğer ticari bir kaygı varsa sanırım herkes ister. Şu andaki bir projede bu lazım olunca oturup araştırmak ve bulunca da yazmak gerekti.
Öncelikle CodeBehind tarafına şunları ekliyoruz ;
using System.Drawing;//çizimler için using System.Drawing.Imaging;//imagelere çizimler için using System.Drawing.Drawing2D;//2 boyutlu çizimler için using System.Drawing.Text;//image üzerine yazı yazabilmek için
Kütüphanelerimizi ekledikten sonra kodu bir class olarakmı kullanacağız yoksa gösterim sayfasındamı yapacağız ona karar vermemiz gerekmektedir.
protected void Page_Load(object sender, EventArgs e)
{
//öncelikle üzerine yazı yazacağımız resmimizi
//seçiyoruz ve bitmap olarak tanımlıyoruz
//resim adresini isterseniz bir değişkendende alabilirsiniz
Bitmap img = new Bitmap(Server.MapPath("images/sunset.jpg"));
//Bitmap'ı bir grafik olarak tanımlıyoruz
Graphics gimg = Graphics.FromImage(img);
//yazımızın yerleşimini hesaplıyoruz
//yukarıdan resmin yüksekliğinin %1'i kadar boşluk veriyoruz
double boy = img.Height * 0.01;
//yandan ise %30 u kadar bir boşluk veriyoruz
double en = img.Width * 0.30;
//Smooting modeunu seçiyoruz
gimg.SmoothingMode = SmoothingMode.AntiAlias;
//keskinliğini belirliyoruz bu değer 0 ile 12 arasında olabilir
gimg.TextContrast = 6;
//yazımızın opacity'sini ayarlıyoruz. Ben beyaz ve %80 seçtim
using (Brush semiTransparentBrush = new SolidBrush(Color.FromArgb(80, Color.White)))
//tüm değişkenlerimiz tamam olduğuna göre
//artık yazabiliriz
gimg.DrawString("www.weboutbox.com \ndeneme", new Font("Verdana", 25),semiTransparentBrush, new Point(Convert.ToInt32(en), Convert.ToInt32(boy)));
//çıktı olarak görünecek image'in formatını belirliyoruz
Response.ContentType = "image/jpeg";
//Resmimizi açtık ve üzerine yazımı yazdık ancak atlamamız
//gereken nokta şuki biz burada sadece kullanıcıya gösterirken
//yazıyoruz yazıyı ve resmimiz aslında orjinal hali ile duruyor
img.Save(Response.OutputStream, ImageFormat.Jpeg);
gimg.Dispose();
img.Dispose();
}
yandaki resimdende görebileceğiniz gibi resmimizin uzantısı .aspx iken sağ tıklayıp resim olarak kaydet diyebiliyoruz.