Hakan ERSU

Jquery Gelişmiş Slider I

xuma — Thu, 17 Nov 2011 01:20:47 +0000

Merhaba etrafta oldukça güzel sliderlar olsada(bu aralar en çok hoşuma giden awkard showcase) işin zevkli tarafı bazı şeyleri kendiniz yapmanız.Hazırlayacağım slider oldukça basit kodlardan oluşacak ve yavaş yavaş geliştireceğiz.Kodlarımızın basit olması ekleyeceğimiz bölümlerin artmasıyla ileride biraz can sıkıcı olacaktır ancak anlaşılırlık tarafından baktığımızda jquery ile yeni tanışmışsanız veya bu konuda pluginlerden öteye gitmemişseniz genel olarak çalışma mantıkları açısından size fikir verecektir.

Daha önceki örneklerimde kullandığım xhtml yapısını bu örneğimde de kullacağım basit bir tasiyici katmanı ve bu katman üzerinde görsel birkaç geliştirme bulunmakta ve bu kısımdaki kodlar örneğimiz için şu aşamada pek önem arz etmemekte.



	
		
		Xuma Slider
		
		
		
		
		
	
	
		Basit Slider

Örneği Gör
Daha sonra resimlerimizi biri liste halinde tasiyici katmanımıza ekleyelim.List stilini kaldırmak için header bölümünde bulunan style kodlarımız arasına;

li {
	list-style: none;
}

eklemesini yapalım.
Resimlerimiz bu aşamada alt alta listenecektir.
Resimlerimizi taşıyacak liste elamanına xuma_slider ismini veriyorum.




	
		
		Xuma Slider
		
		
		
		
		
	
	
		Basit Slider

Örneği Gör
Şimdi resimlerimizi biraz stilize edelim.

ul#xuma_slider {
				width:600px;
				height:400px;
				display: block;
				overflow: hidden;
				margin:100px auto;
				border:2px solid #ccc;
				padding:0;
			}
			ul#xuma_slider li {
				display:none;
			}
			ul#xuma_slider li:first-child{
				display: block;
			}

Liste elemanımızın boyutunu resimlerimizin boyutuyla aynı veriyorum.Overflow ifademiz gereğince liste elemanlarını gizlemesekte ilk elemandan sonrası görünmeyecektir.Ancak biz tüm liste elemanlarını gizledikten sonra first-child ile ilk elemanı gösterelim.

Sonrasında html tarafında ilk liste elamanına aktif class’ını atıyorum.Bunu aktif resmi göstereceğim bir taşıyıcı kelime olarak kullanacağım.




	
		
		Xuma Slider
		
		
		
		
		
	
	
		Basit Slider

Örneği Gör
Şimdi resimlerimizi hareket ettireceğimiz ok tuşlarını yerleştirelim.Bunun için taşıyıcı katmanına iki adet link ekliyorum.

Linklerimden birisi ileri diğeri geri idsine sahip.Şimdi bu linklerimizi biraz görsellik katalım.

a#ileri,a#geri{
				position: absolute;
				top:50%;
				margin-top:-15px;
				width:33px;height:33px;
				display: block;
				background: url("oklar.png") 0 0 no-repeat;
				text-indent: -9999px;
			}
			a#ileri {
				right:10px;
				background-position:-34px 0px;
			}
			a#geri {
				left:10px;
			}
			a#ileri:hover{
				background-position:-34px -34px;
			}
			a#geri:hover{
				background-position:0 -34px;
			}

Örneği Gör
Böylelikle bu aşamadaki xhtml/css kısmı bitirmiş olduk ve şimdi jquery tarafına geçelim.Jquery kısmında sliderımızı asıl oluşturacak olaylar ileri ve geri linklerine tıklanması.Bu yüzden bu olaylar için kodlarımızı yazmaya başlayalım.

$('#ileri').click(function(){

				});
				$('#geri').click(function(){

				});

gördüğünüz gibi basit şekilde ileri ver geri olaylarımız için birer fonksiyon oluşturduk.İleri fonksiyonumuz üzerinden devam edelim.İlk olarak aktif resmin hangisi olduğunu ve slider’da kaç resim olduğunu bulmam gerek.

var aktif = $('ul#xuma_slider li.aktif').index();
var boyut = $('ul#xuma_slider li').size();

index() ifademizle liste elamanı li’nin o liste içinde kaçıncı sırada olduğunu buluruz.Ancak burada dikkat edilmesi gereken husus bu sıranın 0 dan başlamasıdır.Size() fonksiyonu ile tüm liste elemanlarının sayısını alırız.

Peki bunlara neden ihtiyacımız var ? Bu değerlere listemizin sonuna gelip gelmediğimizi öğrenmek ve geri gidiyorsak 1. resimden önceki elamanın index numarasına sahip olmak için ihtiyacımız var.Şimdi bu kontrolleri yaparak devam edelim.

$('#ileri').click(function(){
					var aktif = $('ul#xuma_slider li.aktif').index();
    				var boyut = $('ul#xuma_slider li').size();
    				if((aktif+1)==boyut){

    				}else{

    				}
    				return false;
				});

Yukarıda eklemiş olduğumuz kısım basit olarak aktiften sonraki resmin sonuncu resim olması durumunu için özel tanımlar yapar eğer durum öyle değilse normal koşullarda devam eder.Return false ifademiz ise linkerimize tıklandığında sayfanın yukarı çıkmasını engeller.Bunu ifadeyi kaldırarak test edebilirsiniz.
Else kısmında yani sonuncuya ulaşmadan önce gerçekleştireceğimiz rutin işlemlere bakalım.
İlk olarak aktif class’ının tıklanan elementten kaldıralım ve elemanımızı gizleyelim.

$('ul.#xuma_slider li.aktif').removeClass('aktif').hide();

sonrasında aktif olarak index numarasını aldığımız elementin bir fazlası olan elemente aktif class’ını ekleyelim ve bu elementi gösterelim.

$('ul.#xuma_slider li').eq(aktif + 1).addClass('aktif').show();

gördüğünüz gibi jquery ile chain işlemler yapabilemekteyiz.removeClass ile classı kaldırırken hide() ile elemanımızı gizliyoruz.
Sonrasında ise aktiften sonraki elemanı bulmak için .eq() fonsiyonunu kullanıyoruz.Bu fonksiyon o sette bulunan elemanın indisini bulmamıza veya o elamanı seçmemize yarar eq(aktif + 1) ifadesi ile aktif classına sahip elamandan sonraki elamanı seçeceğimizi belirttik.İlk elemanımızdan örnek verirsek bu elemanımıza ait aktif değeri 0 yani 0. elamandır bir sonrakini seçmek için 1 ekleyerek 1. elemana ulaşıyoruz.



	
		
		Xuma Slider
		
		
		
		
		
	
	
		Basit Slider
		
			
				
				
				
				
				
				
				
				
			
			İleri
			Geri

Bu haliyle test ettiğimizde ileri fonksiyonumuzun çalıştığını göreceksiniz ancak son elemandan sonra boş bir ekranla karşılaşmaktayız ki zaten bu yüzden if yapısını kullandık.

if((aktif+1)==boyut){
					     $('ul#xuma_slider li.aktif').removeClass('aktif').hide();
					     $('ul#xuma_slider li:first-child').addClass('aktif').show();
    				}

if yapımızıda bu şekilde oluşturduktan sonra artık iler doğru giden ve sona geldiğinde başa dönene bir yapımız var.Artık geri işlemine geçebiliriz.
Geri gitme işlemi ileriden mantık olarak çok farklı değil.Geri linkine tıkladığımızda bir önceki elamana aktif classı eklerken tıklanan elemandan kaldıracak.Buradaki istisna durumumuz ise ilk resme geldiğimizde sonuncu resme gitme olayı.Kodlarımızı yazarak inceleyelim.

$('#geri').click(function () {
    var aktif = $('ul#xuma_slider li.aktif').index();
    var boyut = $('ul#xuma_slider li').size();
    if (aktif == 0) {
      $('ul#xuma_slider li.aktif').removeClass('aktif').hide();
      $('ul#xuma_slider li').eq(boyut - 1).addClass('aktif').show();
    } else {
      $('ul#xuma_slider li.aktif').removeClass('aktif').hide();
      $('ul#xuma_slider li').eq(aktif - 1).addClass('aktif').show();
    }
    return false;
  });

Burada aktif class’ımız 0 değerini yani ilk elemana ulaşmışsa $(‘ul#xuma_slider li’).eq(boyut – 1) ifadesi ile sonuncu elemanı seçiyoruz.Burda boyut-1 dememizin nedeni eq ifadesinin 0′dan başlaması.Örnek vermek gerekirse 4 elamana sahip bir listede boyut ifademiz 4 olurken sonuncu eleman olan 4. liste elemanın index() veya seçici olarak eq() ifadesi 3 olacaktır.
Else kısmı ise yine ileridekine benzer şekilde ancak artık aktifden bir önceki elemanı seçmekte.
Artık ileri geri istediğimiz gibi gidebileceğimiz bir slidera sahibiz
Örneği Gör
Şimdi ufak bir görse güncelleme daha yapalım.

$('#ileri,#geri').click(function () {
    $('html, body').stop().animate({
      scrollTop: $("#xuma_slider").offset().top
    }, 2000);
  });

Örneği Gör

Artık sliderımız kullanılabilir halde ama birde numaralar olsa istiyorsak ne yaparız.Şimdi o kısma başlayalım.
Tasiyici katmanımız içerisine sayfalama adlı bir katman oluşturalım ve içerisine boş bir liste elementi yerleştirelim.

Biraz stilize edelim.

#sayfalama ul{
				border:1px solid #ccc;
				width:500px;
				height:40px;
				display: block;
				background: #e3e3e3;
				margin:0 auto;

			}
			#sayfalama li a{
				float:left;
				display: block;
				background: #f5f5f5;
				border:1px solid #CCCCCC;
				padding:5px;
				margin-left:5px;
				margin-top:5px;
			}

Şimdi otomatik olarak linklerimizi oluşturalım ve ayrıntılarına şuan giremeyeceğim otomatik oluşturulan elementlerde tıklanma problemi için tıklanma olayını linklerimizi oluştururken atayalım.

var liste=$('ul#xuma_slider li').size();
  				for(i=1;i<=liste;i++){
  					$('#sayfalama ul').append(""+i+"");
$('#sayfalama a#resim_'+i).click(resim_goster);
  				}

function resim_goster(){
  					var resimID=$(this).attr('id').split('_');
  					$('#xuma_slider li').removeClass('aktif').hide();
  					$('#xuma_slider li').eq(resimID[1]-1).addClass('aktif').show();
  					return false;
  				}

resim_goster() fonksiyonu basit olarak tıklanan resmin id’sini alır ve split() fonksiyonu ile parçalar böylece resmin id’sini alırız.Sonrasında tüm liste elemanlarını gizler ve aktif classını kaldırırız.Kaldırmadığımız taktirde ileri geri tıklamalarımızda aktif classı neredeyse orada kalır ve tıkladığımız resim numarasından devam etmez.Sonrasında tıklalan resmi eq() ifadesi ile seçip aktif classı ekledikten sonra gösteriyoruz.
Örneği Gör

Deneysel : Circle Menu

xuma — Thu, 10 Nov 2011 10:20:24 +0000

Jquery ve css ile aklıma gelen enteresan fikirleri gerçekleştirmeye çalışırım genelde de sadece denemeyle kalır bazen birkaçını buraya yazıyorum.Ancak yazmak zahmetli ve yorucu bu yüzden birkaç denememi sadece örnek olarak ekleyeceğim.

Demo 1 – Demo 2- Demo 3

İlk demo ve ikinci demo arasında görsel olarak bir fark yok ancak ilk denemem olduğu için css kodlarında göreceli bir tembelliğe kaçtım.Yakında güncel ve daha görsel bir haliyle karşılaşabilirsiniz.

Apache Virtual Hosts

xuma — Wed, 26 Oct 2011 10:28:50 +0000

Php tabanlı hazırladığım sitelerde genelde alt dizinlerle çalışmak pek hoşuma gitmez bu yüzden nerdeyse her projem için bir sanal alan kullanmaktayım.Çalışma ortamı olarak Windows 7 ve Ubuntu kullandığım için bu iki sistem için ayrı ayrı açıklamaya çalışacağım ancak temel mantık aynıdır.

UBUNTU VIRTUAL HOST

Eğer varsayılan bir kurulum yapmış iseniz /var/www/ ana dizinimizdir.Oluşturmak istediğiniz alan adına ait bir klasör oluşturarak başlayabiliriz.Vereceğimiz ismin atayacağımız virtual hosta benzer olması gerekmez.Ben emlak.com adlı bir sanal alan için emlak adlı bir klasör oluşturuyorum.

Eğer linux yapısına alışık değilseniz ve dosyaları oluşturma/değiştirmede sorun yaşıyorsanız terminalde gksudo nautilus ile görsel pencerede işlemleri yapabilirsiniz.

Dosyamızı açtıktan sonra

#Local server bilgilerini girelim.
127.0.0.1 emlak.com
127.0.0.1 www.emlak.com

şeklinde domainimiz girebiliriz.

Dosyamızı kaydettikten sonra emlak.com’u yazarak deneme yaptığımızda serverımaza ulaşıyor olması gerekmekte.Bunu test etmek için /var/www/ içinde index.html yada index.php oluşturarak içine

Merhaba Dünya

yazabilirsiniz.Eğer browserınızda gerçek emlak.com’a gidiyorsa adımlarda bir yanlış var demektir bunun için lütfen adımları kontrol ediniz.

Apache ile gelen alan adını gerekli klasöre yönlendirecek işlemleri geçelim.Kullanacağımız yönetemi isim tabanlı yönlendirme olarak adlandırabiliriz.Apache ip,port vs gibi birçok yönlendirme yöntemine sahiptir.Bununla ilgili bu adresden daha fazla bilgiye ulaşabilirsiniz.

Apache için yapılandırmamıza /etc/apache2/sites-available klasörü içerisene emlak.com adlı bir dosya oluşturarak başlayalım ve içerisine ;

NameVirtualHost 127.0.0.1:80

    ServerName emlak.com
    ServerAlias www.emlak.com
    DocumentRoot /var/www/emlak/
    
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All

içeriğini girelim.Burada birçok extra ayar yapılabilir ancak en basit şekli yaklaşık bu şekildedir.
Sonrasında terminal üzerinde sudo a2ensite emlak.com yazarak siteyi kullanılabilir yapıyoruz.Cevap olarak;
Site emlak.com installed; run /etc/init.d/apache2 reload to enable.

şeklinde bir cevap almanız gerekmekte eğer bu cevabı almadıysanız şuana kadar olan aşamaları kontrol ediniz.Son olarak ise ;

sudo /etc/init.d/apache2 reload

apache ayarlarını tekrar yüklüyoruz.Artık emlak.com sanal adı /var/www/emlak/ klasörüne yönlendirilmekte.

Bu aşamada forbidden gibi bir hata alırsanız dosya izinlerini kontorol ediniz.

WİNDOWS İÇİN APACHE VİRTUAL HOST AYARLARI

Windows için virtual host ayarları yukarıda anlattığımdan çok farlı olmamakla birlikte biraz daha basittir.httpdocs veya www olan web anadizini içerisinde emlak adlı bir klasör oluşturalım sonrasında ise ister xampp ister wamp olsun herhangi bir dağıtımda bulunan apache dizini bularak işleme başlamamız gerekmekte.

Örnek olarak Wamp için apache dizini c:/wamp/bin/apache/Apache2.2.21 gibi olurken Xampp için c:\xampp\apache şeklinde olacaktır.

Bu dizine ulaştıktan sonra conf\extra klasöründe bulunan (ÖRN: c:\xampp\apache\conf\extra) httpd-vhosts.conf adlı dosyayı açıyoruz.Burada gerekli örnekler bulunmakta bizde bunlardan birini referans alalım ve sanal domainimi oluşturalım.


    ServerAdmin postmaster@emlak.localhost
    DocumentRoot "C:/xampp/htdocs/emlak"
    ServerName emlak.com
    ServerAlias www.emlak.com
    ErrorLog "logs/emlak.com-error.log"
    CustomLog "logs/emlak.com-access.log" combined

Artık apache emlak.com’u C:/xampp/htdocs/emlak dizinine yönlendirecektir.Bu aşamadan sonra eğer yukarıdaki ubuntu kurulumunu okuduysanız orada ilk aşama olan hosts dosyasını değiştirmemiz gerekmekte.Burada yönetici yetkisine sahip bir editör ile (Notepad’e sağ tıklayarak Yönetici Olarak Çalıştır dememiz yeterli.) c:/Windows/system32/drivers/etc/ dizininde buluna hosts dosyasını açalım ve

#Local server bilgilerini girelim.
127.0.2.1 emlak.com
127.0.2.1 www.emlak.com

satırlarını ekleyelim. Son olarak apache’yi yeniden başlatmanız yeterlidir.

MYSQL tek query ile birden çok alan güncellemek

xuma — Thu, 25 Aug 2011 08:28:54 +0000

Mysql bize birçok fonksiyonlar kolaylık sağlamakta.Bunlarda biride php’de kullandığımız switch-case yapısana benzer bir işleyiş gösteren case-when ifadesi.
Örneklemek gerekirse yazılarımız için kullandığım dil alanlarını tuttuğum bir tablom var diyelim.

CREATE TABLE IF NOT EXISTS `page_language` (
  `l_id` int(11) NOT NULL AUTO_INCREMENT,
  `i_id` int(11) NOT NULL,
  `l_content` longtext NOT NULL,
  `l_type` enum('c_title','c_content','c_seo','k_title') NOT NULL,
  `l_language` enum('tr','en','de','fr') NOT NULL,
  PRIMARY KEY (`l_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=54 ;

Görüldüğü gibi l_type olarak tanımladığımız alan c_title,c_content,c_seo,k_title degerlerini alabilmekte.Herhangi bir yazı girildiğinde herbir baslik,icerik ve seo için ayrı alanlar oluşmakta.

(10, 2, 'ALAN ICERIK', 'c_content', 'tr'),
(11, 2, 'ALAN SEO', 'c_seo', 'tr'),
(12, 3, 'ALAN BASLIk', 'c_title', 'tr'),

Basit bir şekilde bu alanları güncellemek istersek;

UPDATE page_language  SET  l_content = CASE l_type
WHEN 'c_title' THEN 'Yeni Baslik'
WHEN 'c_content' THEN 'Yeni icerik'
WHEN 'c_seo' THEN 'yeni-baslik'
ELSE l_content
END
WHERE i_id='2' and l_language='tr'

Blu Twitter İstemcisi

xuma — Mon, 01 Aug 2011 21:22:56 +0000

Twitter sanırım yeni nesil telefonlar için daha uygun gibi gelsede takip edilesi birçok yararlı bilgi kaynağı bulunmakta.
Uzun süre twitter masaüstü istemcisi arayıp durdum ancak bana uygun gelen birtane bulamadım taki blu ile tanışana kadar.Oldukça kullanışlı ve görsel blu benim gibi twitter masaüstü istemcisi arayanlara tavsiyemdir.

Daha Kolay Border Radius

xuma — Mon, 01 Aug 2011 20:38:29 +0000

Border-radius sadece tüm köşeleriniz için aynı değerlere sahipse oldukça kolay olsada farklı köşelere farklı değerler verecekseniz yazması işkenceye dönüşmekte.Bunun için border-radius.com size basit ama kullanışlı bir hizmet sunmakta.

Chosen Daha Güzel Selectboxlar

xuma — Mon, 01 Aug 2011 20:32:38 +0000

Chosen selectboxlarınız oldukça kullanışlı ve kullanıcı dostu hale getiriyor.Oldukça güzel selectbox seçenekleri sunan Chosen Jquery ve Prototype için mevcut sürümlere sahip.

Jquery ui Datepicker Yıl Aralığı

xuma — Wed, 29 Jun 2011 05:40:19 +0000

yearRange: "-70:-18"

Şuanki tarihten 18 yıl öncesi ve şuanki tarihten 70 yıl öncesi arasını gösterir.

Arena Sanal Pos Soap İşlemleri

xuma — Thu, 16 Jun 2011 13:43:41 +0000

$hedef = new SoapClient('https://www.paynet.com.tr/connact/iodeme.asmx?WSDL');
$baslik =  new SoapHeader("http://iodeme.arenaopen.com/","AuthenticationInfo", array('agentID'=>'xxxxx',
		               'username'=>'xxxxxxx',
		               'authenticated'=>'true'));
$hedef->__setSoapHeaders(array($baslik));

işlemlere bundan sonra başlayabilirsiniz.Örneğin ;

	$veriler=array('xactParams'=>array(
							'xactParam'=>array(
								'bankID'=>''.$banka.'',
								'posID'=>''.$pos.'',
								'cardno'=>''.$krediKartiNumarasi.'',
								'cardholdername'=>''.$adiSoyadi.'',
								'instalment'=>''.$taksit.'',
								'amount'=>''.$toplamTutar.'',
								'currency'=>'TL',
								'cardexpiredate'=>''.$tarih.'',
								'cvc'=>''.$cvc.'',
								'email'=>''.$email.'',
								'phone'=>''.$telefon.''
								),
							'xactParam'=>array(
								'bankID'=>''.$banka.'',
								'posID'=>''.$pos.'',
								'cardno'=>''.$krediKartiNumarasi.'',
								'cardholdername'=>''.$adiSoyadi.'',
								'instalment'=>''.$taksit.'',
								'amount'=>''.$toplamTutar.'',
								'currency'=>'TL',
								'cardexpiredate'=>''.$tarih.'',
								'cvc'=>''.$cvc.'',
								'email'=>''.$email.'',
								'phone'=>''.$telefon.''
								)
							));

$sonuc = $hedef->Sales($veriler);

if($sonuc->SalesResult->xactResult->result_text=="OK"){ echo "işlem başarılı";}else{ echo "işlem başarısız";}

Zen Coding

xuma — Wed, 15 Jun 2011 08:54:20 +0000

Uzun süre önce gördüğüm arayıp zor bulduğum bir video