Fotoğraf Özelliklerini Bulmak (Php, Js)

Yakın zamanda yeni bir fotoğraf makinesi aldım ve amatör olarak fotoğraf çekmeye başladım.. Bundan dolayıda hemen bir 500px.com üyeliği aldım ve fotoğraflarımı yüklerken orada bir şey dikkatimi çekti, hatta dikkat çekmekle birlikte çok hoşuma gitti ???? Yüklediğim fotoğrafa ait bilgileri görebiliyordum, hangi marka ve model fotoğraf makinası ile çektiğimi, zoom değerini vs. vs..

Daha sonra bunu php ile nasıl yapabileceğimi biraz araştırdıktan sonra bir şeyler buldum, test ettim ve güzel bir şekilde çalıştığını gördüm. Bunu sizlerle de paylaşmak istiyorum..

Not: Beni 500px üzerinden takip etmek isterseniz, adresim aşağıdadır ????
http://500px.com/TayfunErbilen

Bir şeyi arıyorsanız bir anahtar kelimeniz olmalı..
Bizim anahtar kelimemiz belli; “Exif

Bu anahtar kelime ile diğer diller içinde bunu bulabiliriz..
Bkz: javascript Exif

Php’de bu işi yapan exif_read_data() adında bir fonksiyon.
http://www.php.net/manual/en/function.exif-read-data.php

En basit haliyle yapmanız gereken tek şey, resmin yolunu belirtmeniz.

<?php
$exif = exif_read_data('tayfunerbilen.png');
print_r( $exif );
?>

Ve çıktısı en basit haliyle şöyle olacaktır;

Array
(
    [FileName] => IMG_5236.JPG
    [FileDateTime] => 1378615652
    [FileSize] => 3438950
    [FileType] => 2
    [MimeType] => image/jpeg
    [SectionsFound] => ANY_TAG, IFD0, THUMBNAIL, EXIF, INTEROP, MAKERNOTE
    [COMPUTED] => Array
        (
  ........

Şimdi bizim için önemli olan fotoğraf bilgilerini alıp değişkenlere aktaralım ve ekrana yazdıralım ????

<?php

	$exif = exif_read_data('IMG_5236.JPG');

	$kamera = $exif['Make'];
	$kameraModel = $exif['Model'];
	$fDuragi = $exif['COMPUTED']['ApertureFNumber'];
	$isoHizi = $exif['ISOSpeedRatings'];
	$pozlandirma = $exif['ExposureProgram'];
	$odakUzunluk = $exif['FocalLength'];
	$deklansorHiz = $exif['ExposureTime'];
	$cekilmeZamani = $exif['DateTime'];

>

Ve yazdıralım;

<strong>Kamera:</strong> <?php echo $kamera; ?><hr />
<strong>Kamera Modeli:</strong> <?php echo $kameraModel; ?><hr />
<strong>F Durağı:</strong> <?php echo $fDuragi; ?><hr />
<strong>ISO Hızı:</strong> <?php echo $isoHizi; ?><hr />
<strong>Pozlandırma:</strong> <?php echo $pozlandirma; ?><hr />
<strong>Odak Uzunluğu:</strong> <?php echo $odakUzunluk; ?> mm<hr />
<strong>Deklanşör Hızı:</strong> <?php echo $deklansorHiz; ?> mm<hr />
<strong>Çekilme Zamanı:</strong> <?php echo $cekilmeZamani; ?><hr />

Ancak her fotoğrafda olmayacağını unutmayın. Bu yüzden isset() ve empty() kullanarak kontrollü bir şekilde ekrana yazdırmayı unutmayın.

javascript ile Fotoğraf Bilgilerini Almak

Bunun için google’a “javascript exif” diye aratmanız yeterli. Bir çok eklenti mevcut, ben bir tanesini kullanarak kolayca işlem yapabildim.. Kullandığım eklenti;

https://github.com/jseidelin/exif-js

Kullanımı;

Önce jquery kütüphanesini ve eklentinin 2 js dosyasını sayfaya dahil ediyoruz. Daha sonra input change olduğunda bu olayı yakalayıp fotoğrafın yolunu eklentiye gönderiyor ve değerleri alarak istediğimiz herhangi bir yere yazdırıyoruz..

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="binaryajax.js"></script>
<script type="text/javascript" src="exif.js"></script>
<meta charset="utf8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
font-family: Arial;
font-size: 12px
}
body {
padding: 15px;
background: #f5f5f5
}
.container {
width: 400px;
margin: 25px auto
}
.fotograf {
border: 1px solid #ddd;
padding: 15px;
background: #fff;
display: block;
margin-bottom: 10px
}
#ozellikler {
border: 1px solid #ddd;
border-bottom: none;
margin-top: 10px;
display: none
}
#ozellikler li {
padding: 7px;
background: #fff;
border-bottom: 1px solid #ddd
}
#ozellikler li:nth-child(even) {
background: #eee
}
</style>
</head>
<body>
<div class="container">
<label class="fotograf">
<strong>Fotoğraf Seçin:</strong> 
<input type="file" accept="image/jpg" id="fotograf">
</label>
<div id="result">
<ul id="ozellikler"></ul>
</div>
</div>
<script type="text/javascript">
if (window.File && window.FileReader && window.FileList && window.Blob) {
$('#fotograf').change(function(e){
var fotograf = e.target.files[0];
var ozellikler = $('ul#ozellikler');
EXIF.getData(fotograf, function(){
ozellikler.fadeIn().html('');
var kamera = EXIF.getTag(this, 'Make');
if ( kamera ) ozellikler.append('<li><strong>Kamera:</strong> ' + kamera + '</li>');
var model = EXIF.getTag(this, 'Model');
if ( model ) ozellikler.append('<li><strong>Model:</strong> ' + model + '</li>');
var fDuragi = EXIF.getTag(this, 'FNumber');
if ( fDuragi ) ozellikler.append('<li><strong>F Durağı:</strong> ' + fDuragi + '</li>');
var isoHizi = EXIF.getTag(this, 'ISOSpeedRatings');
if ( isoHizi ) ozellikler.append('<li><strong>ISO Hızı:</strong> ' + isoHizi + '</li>');
var pozlandirma = EXIF.getTag(this, 'ExposureBias');
if ( pozlandirma ) ozellikler.append('<li><strong>Pozlandırma:</strong> ' + pozlandirma + '</li>');
var odakUzunluk = EXIF.getTag(this, 'FocalLength');
if ( odakUzunluk ) ozellikler.append('<li><strong>Odak Uzunluğu:</strong> ' + odakUzunluk + '</li>');
var deklansorHiz = EXIF.getTag(this, 'ExposureTime');
if ( deklansorHiz ) ozellikler.append('<li><strong>Daklanşör Hızı:</strong> ' + deklansorHiz + '</li>');
var cekilmeZamani = EXIF.getTag(this, 'DateTime');
if ( cekilmeZamani ) ozellikler.append('<li><strong>Çekilme Zamanı:</strong> ' + cekilmeZamani + '</li>');
});
});
}
</script>
</body>
</html>

jQuery UI Datepicker için Gün Filtresi

Geçenlerde sevgili Mert abim, bu konu hakkında benden ufak bir ricada bulundu. Biraz araştırdıktan sonra mantığı kavradım ve kullanmak için basit bir fonksiyon hazırladım. Bu fonksiyon ile datepicker için gün filtresi yapabiliyorusunuz..

Bize lazım olan sadece mevcut zamandan şu kadar gün sonrasını seçememe gibi bir olaydı.. Bende ona göre bir fonksiyon yazdım, ancak fonksiyonu biraz incelerseniz istediğiniz kısımları kendinizde devam ettirebilirsiniz diye düşünüyorum..

Öncelikle fonksiyon kodlarını vereyim;

function gunFiltre(date, dlimit, goncesi, pgun, agun) {
	
	/**
	 * Mevcut günden sonra kaç gün daha gözükebilsin?
	 */
	var gunLimit = dlimit ? dlimit : 0;
	
	/**
	 * Mevcut günden önceki diğer günlerin hepsi gözüksün
	 */
	var gunOncesi = goncesi;
	
	/**
	 * Günleri belirleyip işlem yaptırmak isterseniz bu diziye pasif olmasını istediğiniz günleri yazın
	 */
	var pasifGun = pgun ? pgun : [];
	
	/**
	 * Günleri belirleyip işlem yaptırmak isterseniz bu diziye aktif olmasını istediğiniz günleri yazın
	 */
	var aktifGun = agun ? agun : [];
	
	var bugunTarih = String(new Date()).split(' ');
	var mevcutTarih = String(date).split(' ');
	var ayDogrumu = bugunTarih[1] == mevcutTarih[1];
	
	/** 
	 * belirli günleri pasif eder
	 */
	if ( pasifGun.length > 0 ){
		if ( ayDogrumu && pasifGun.indexOf(parseInt(mevcutTarih[2])) != -1) {
			return [false];
		} else {
			return [true];
		}
	}
	
	/** 
	 * belirli günleri aktif eder
	 */
	if ( aktifGun.length > 0 ){
		if ( ayDogrumu && aktifGun.indexOf(parseInt(mevcutTarih[2])) != -1) {
			return [true];
		} else {
			return [false];
		}
	}
	
	/**
	 * gün limiti belirlenmişse mevcut zamandan o gün limiti kadarından sonrasını pasif yapar
	 */
	if ( gunLimit !== 0 && ayDogrumu ){
		for ( i = 0; i <= gunLimit; i++ ){
			if ( (parseFloat(bugunTarih[2]) + i) == mevcutTarih[2] ){
				return [true];
			}
		}
	}
	
	/**
	 * mevcut zamandan önceki günleri eğer belirlenmiş ise pasif yapar
	 */
	if ( gunOncesi === true && ayDogrumu ){
		if ( mevcutTarih[2] < parseFloat(bugunTarih[2]) ) {
			return [true];
		}
	}
	
	if ( ayDogrumu && gunLimit !== 0 ){
		return [false];
	} else {
		return [true];
	}
	
}

Nasıl kullanacağız?

Örnek kullanımları şöyle;

Sadece bugün ve 3 gün sonrası aktif olsun, diğer günler pasif olsun.

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 3);
	}
});

Bugünden önceki günler ve bugünden sonraki 3 gün hariç diğer günler pasif olsun.

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 3, true);
	}
});

Ayın sadece 1,7 ve 8. günleri pasif olsun;

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 0, true, [1, 7, 8]);
	}
});

Ayın sadece 1,5 ve 12. günleri aktif olsun;

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 0, true, [], [1,5,12]);
	}
});

jQuery ZeroClipboard ile Yazı Kopyalama İşlemi

Bildiğiniz gibi ctrl + c yaparak yazıları kopyalama işlemi yapabiliyoruz.. Ancak bunu herhangi bir butona tıklandığında yapabilsek güzel olmaz mıydı? Evet, bu işlemi yapabilmek için ZeroClipboard eklentisini kullanarak çok kolay bir şekilde bu işlemi kusursuz hale getirebiliriz.. O halde başlamadan önce eklenti yazarı SteamDev‘e teşekkürlerimizi sunalım ???? Ve hadi başlayalım..

Adım 1

İlk olarak http://steamdev.com/zclip/ adresine gidelim ve Download altındaki sıkıştırılmış js dosyası ve swf dosyalarını bilgisayarımıza indirelim..

http://steamdev.com/zclip/js/jquery.zclip.min.jshttp://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf

Adım 2

Şimdide jquery kütüphanemizi indirelim.
http://jquery.com/download/

Adım 3

İndirdiklerimizi bir klasör altında toplayalım.. Ve ek olarak index.html ve style.css dosyalarını oluşturalım.

Adım 4

index.html dosyasını açalım ve standart html etiketlerini yazalım. Daha sonra gerekli dosyalarımızı dahil edelim.. Yani kısaca şu kodlarımızı yazalım;

<!DOCTYPE HTML>
<html lang="tr">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.zclip.min.js"></script>
	<link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</html>

Adım 5

Gerekli html kodlarımız ise şu şekilde;

<input type="text" class="input1" value="test et!" />
<button class="kopyala" data-content=".input1">Kopyala</button>

Burada data-content değeri olarak hangi nesneyi belirtirseniz onun içeriğini alır. (Bir form nesnesi olduğu sürece.)

Adım 6

Şimdi geldi jquery kısmına.. Çok basit bir kullanımı var;

$(function(){

	$('button.kopyala').each(function(){
		var content = $(this).data('content');
		$(this).zclip({
			path: 'ZeroClipboard.swf',
			copy: $(content).val()
		});
	});
	
});

Gördüğünüz gibi tüm button.kopyala nesnelerini bir döngüye soktuk ve tek tek content değerlerini alıp zclip() eklentisini uyguladık. Aslında tıklama işlemi ilede bunu yapabilirdik ancak ilk etapta görmeyeceği için sorun olurdu.. Her neyse, şimdi test etmek için butona basalım ve sonucu görelim..

Evet, şimdi şöyle bir sıkıntımız var.. Örneğin input’un içeriğine yeni bir şeyler yazıp kopyala dediğimizde yine eskisi neyse onu kopyalıyor.. Bu yüzden eğer böyle bir durumda güncel olanı almak isterseniz input’a bir keyup() uygulayabilirsiniz. Yani jquery kodlarımızı şöyle değiştireceğiz;

$(function(){

	$('button.kopyala').each(function(){
		var elem = $(this),
			content = elem.data('content');
		elem.zclip({
			path: 'ZeroClipboard.swf',
			copy: $(content).val()
		});
		$(content).keyup(function(){
			elem.zclip({
				path: 'ZeroClipboard.swf',
				copy: $(content).val()
			});
		});
	});
	
});

Ama tabi bunu pek tavsiye etmem orası ayrı ???? Bir çok kez ekliyor çünkü zclip’i. Dolayısı ile sabit metinleri kopyalatmak için ideal kullanım ilk örnekteki gibi olanıdır.

İndir

http://yadi.sk/d/197f74Cg7ZDzK

MooTools ile Tooltip Örneği Yapalım

MooTools kütüphanesini kullanarak kolayca tooltip örneği nasıl yapabiliriz, bu konuda sizlere bundan bahsetmek istiyorum.

MooTools kütüphanesini kullanarak kolayca tooltip örneği nasıl yapabiliriz, bu konuda sizlere bundan bahsetmek istiyorum.

Adım 1

Öncelikle mootools kütüphanesini sayfamıza dahil edelim. Eğer yok ise aşağıdaki adresten temin edebilirsiniz;
http://mootools.net/download

Adım 2

Gerekli dosyalarımızı oluşturalım;
– index.html
– style.css
– custom.js
– mootools.js

Adım 3

Index.html dosyamızda standart html etiketlerimizi yazalım. Ve daha sonra gerekli dosyalarımızı head etiketi içerisinde çağıralım.

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title>Erbilen.NET</title>
	
	<!-- style -->
	<link rel="stylesheet" href="style.css" />
	
	<!-- scripts -->
	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript" src="custom.js"></script>
	
</head>
<body>

</body>
</html>

Adım 4

Şimdi tooltip örneği için span kullanacağız.. Ve data nitelikleri ile bilgileri alacağız. Bu yüzden şöyle bir örnek kod ekleyebiliriz body’e;

<div class="text">
	Burası benim <span class="tooltip" data-text="İpucu" data-direction="left">tooltip</span> örneğim :)
</div>

Burada data-text tooltip’te gözükecek değer, data-direction ise tooltip’in yönü olacak.

Adım 5

custom.js dosyamızı açalım ve sayfa hazır olduğunda bizde hazırız diyelim;

window.addEvent('domready', function(){
	/* .. */
});

Adım 6

Mootools ile DOM’da bir nesneyi seçmek için bir çok yol vardır.. Eğer çoklu seçip yapılacaksa iki dolar ($$) işareti ile yapılır. Ve nesnelere olay atamak içinde 2 tanımlı metod vardır.. Bunlar addEvent ve addEvents‘dır. Tahmin edebileceğiniz üzere 2.si çoklu olay atama için kullanılıyor. Bizde bunu kullanacağız.. Kısaca tooltip nesnemiz için fare üzerine geldiğinde ve fare üzerinden gittiğinde olaylarını tanımlayacağız.

window.addEvent('domready', function(){
	$$('.tooltip').addEvents({
		mouseenter: function(){
		
		},
		mouseleave: function(){
			
		}
	});
});

Burada mouseenter fare üzerine geldiğinde mouseleave ise fare üzerinden gittiğinde çalışacaktır.

Adım 7

Şimdi mouseenter olayı içerisinde kodlarımızı yazmaya devam edelim.. İlk olarak data değerlerimizi alalım;

var text = this.get('data-text'),
	direction = this.get('data-direction');

Ve şimdide tooltip için gerekli nesnemizi oluşturalım.. Ve sınıf değeri ile yazı değerini ekleyelim;

this.toolTip = new Element('span', {
	'class' : 'tooltip_text ' + 'direction_' + direction,
	'html' : text
});

Burada gördüğünüz gibi 2 sınıf ataması yaptım.. 2. sınıf ataması belirlediği yöne göre direction_YÖNDATASI şeklinde kullanılabilecek.. Böylece okların yönünü belirleyebilmemiz daha kolaylaşır. Ve fark ettiyseniz var ile oluşturmadım.. this.toolTip dedim. Bunun sebebi ise diğer olayda bunu kullanabilmemdir.. Bu şekilde mouseleave‘de bu nesneye erişip üzerinde işlem yapabilirim. Ve html ile data-text değerini nesneme atadım. text ilede atayabilirdim ancak o zaman html etiketleri çalışmazdı ????

Şimdi oluşturduğumuz nesneyi mevcut span’ımızın içerisine ekleyelim;

this.toolTip.inject(this);

Artık kodlarınızı çalıştırdığınızda span’ın üzerine her geldiğimizde İpucu yazdığını görebilirsiniz. devam ediyoruz.. ????

Adım 7

JS kodlarımız bir kenarda kalsın, şimdide css kodlarımızı yazalım..

.tooltip {
	position: relative
}
.tooltip_text {
	font: 12px/17px Arial;
	background-color: #222;
	padding: 5px 10px;
	border-radius: 5px;
	position: absolute;
	z-index: 1;
	color: #fff;
	text-align: center
}

Burada ilk olarak kapsayıcı nesneye position: relative verdik. Çünkü içerisindeki tooltip nesnesi absolute yani diğer nesnelerden bağımsız olması gerek. Ve diğer birkaç özellik ekledik. Bu bu şekilde kalsın, JS kodlarımıza geri dönebiliriz ????

Adım 8

Şimdi tooltip’in fade tarzı açılması için öncelikle opacity değerini 0’a düşürelim.. Ve daha sonra tween kullanarak animasyon süresini belirleyip fade ile açtıralım;

this.toolTip.setStyle('opacity', 0).set('tween', { duration: 400 }).fade('in');

Evet, eğer test ederseniz gayet tatlı olduğunu görebilirsiniz ????

Şimdi yön işlemlerinde css tanımlaması yapmak için öncelikle tooltip’in genişlik ve yüksekliğini bulmamız gerekiyor. Bunun için getSize() metodunu kullanabiliriz.

var size = this.toolTip.getSize(),
	width = size.x + 10,
	height = size.y + 10;

Burada ben + 10px daha ekledim. Bunun sebebide biraz daha uzakta kalmalarını sağlamak için. Dilerseniz siz eklemek zorunda değilsiniz ????

Adım 9

Şimdi yön işlemlerini yapacağız.. Toplu CSS işlemleri için setStyles() metodunu kullanıyoruz. İlk if koşulumuz şöyle olacak;

if ( direction == 'left' ){
	this.toolTip.setStyles({
		'left': '-' + width + 'px',
		'top': '50%',
		'margin-top': '-' + ((height / 2) - 5) + 'px'
	});
}

Eğer yön sol olarak belirlenmiş ise css kodlarımız bu şekildedir. Öncelikle left değerini tooltip’in genişliği + 10px kadar sola çekiyoruz.. Daha sonra yukarıdan ortalayıp yüksekliğin yarısı kadar margin ile yukarı çekiyoruz..

Yukarı için

else if ( direction == 'top' ){
	this.toolTip.setStyles({
		'top' : '-' + height + 'px',
		'left' : '50%',
		'margin-left' : '-' + ((width / 2) - 5) + 'px'
	});
}

Sağ için

else if ( direction == 'right' ){
	this.toolTip.setStyles({
		'right' : '-' + width + 'px',
		'top' : '50%',
		'margin-top' : '-' + ((height / 2) - 5) + 'px'
	});
}

Aşağı için

else if ( direction == 'bottom' ){
	this.toolTip.setStyles({
		'bottom' : '-' + height + 'px',
		'left' : '50%',
		'margin-left' : '-' + ((width / 2) - 5) + 'px'
	});
}

Evet neredeyse bitti sayılır.. CSS kodlarını tek tek anlatmıyorum, mantık ilkinde olduğu gibi hepsinde aynıdır. Şimdi artık mouseenter olayı ile işimiz bitti.. Sıra geldi mouseleave olayı çalıştığında mevcut tooltip örneğimizi kaldırmaya. Bunun için destroy() metodunu kullanacağız.

this.toolTip.destroy();

Ve fade efektinde hızlı yapıldığında sorun çıkıyor. Bunu engellemek için animasyonu fare üzerinden çekildiğinde durduracağız.

this.toolTip.get('tween').stop();

Evet işte bu kadar ???? Şimdi CSS’e geri dönebiliriz!

Adım 10

Son olarak css’de yöne göre ok şekillerini yapacağız.. Bunun için tooltip_text öncesine content ekleyip şurada olduğu gibi ok şekillerini yapacağız.

.tooltip_text:after {
	content: '';
	border: 6px solid transparent;
	position: absolute
}
/* son yön için */
.tooltip_text.direction_left:after {
	border-left-color: #222;
	top: 50%;
	margin-top: -6px;
	right: -12px
}
/* sağ yön için */
.tooltip_text.direction_right:after {
	border-right-color: #222;
	top: 50%;
	margin-top: -6px;
	left: -12px
}
/* yukarı yön için */
.tooltip_text.direction_top:after {
	border-top-color: #222;
	left: 50%;
	margin-left: -6px;
	bottom: -12px
}
/* aşağı yön için */
.tooltip_text.direction_bottom:after {
	border-bottom-color: #222;
	left: 50%;
	margin-left: -6px;
	top: -12px
}

Adım 11

Ek olarak bir özellik daha ekleyebiliriz.. data-width özelliği.. Bu şu durumlar için lazım olabiliyor, kapsayıcı nesne küçük ise, tooltip nesneside en fazla onun genişliği kadar oluyor.. Bu yüzden tooltip için standart bir width belirleyebiliriz.. Bunuda data-width=”200″ şeklinde belirleyeceğiz.. Buna göre ise JS kodlarımıza şunu ilave edelim. Ve bu ilave işlemini inject‘ten hemen sonrasında yapalım ????

if ( w = this.get('data-width') ){
	this.toolTip.setStyle('width', w + 'px');
}

Evet tamamdır..

Tebrikler, mootools’u daha iyi anlamak adına basit bir örnek daha hazırlamış olduk. Demoyu inceleyebilir, kaynak kodlara aşağıdan ulaşabilirsiniz.

İndir

http://yadi.sk/d/vuOEUcO472K4Y

Mootools ile Özel Selectbox Yapımı

Şuan evimden çoook uzaklarda olduğum için ne yazık ki videolu eğitim hazırlayamıyorum.. Ancak mootools’a başladığım şu günlerde bir yandanda bilgilerimi aktarmaya çalışacağım.. Bu yazımda sizlerle adım adım özelleştirilebilir selectbox örneği yapmayı öğreneceğiz..Şuan evimden çoook uzaklarda olduğum için ne yazık ki videolu eğitim hazırlayamıyorum.. Ancak mootools’a başladığım şu günlerde bir yandanda bilgilerimi aktarmaya çalışacağım.. Bu yazımda sizlerle adım adım özelleştirilebilir selectbox örneği yapmayı öğreneceğiz..

Adım 1

Öncelikle mootools kütüphanesi mevcut değil ise, aşağıdaki bağlantıdan sıkıştırılmış halini indirelim;
http://mootools.net/download

Adım 2

Şimdi sırasıyla şu dosyaları oluşturalım;
– index.html
– style.css
– custom.js

Adım 3

html sayfamızın içerisine standart html taglarımızı girelim.. Style dosyamızı çağıralım.. Ve mootools kütüphanesi ile custom.js dosyamızıda sayfamıza dahil edelim..

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title></title>
	
	<!-- style -->
	<link rel="stylesheet" href="style.css" />
	
	<!-- scripts -->
	<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
	<script type="text/javascript" src="custom.js"></script>
	
</head>
<body>

</body>
</html>

Adım 4

html sayfamıza özelleştirmek için bir adet selectbox ekleyelim..

<select name="sehir" class="select">
	<option value="0">Şehir Seçin</option>
	<option value="Eskişehir">Eskişehir</option>
	<option value="Ankara">Ankara</option>
	<option value="Adana">Adana</option>
	<option value="İzmir">İzmir</option>
</select>

Adım 5

custom.js dosyamızı açalım.. Ve sayfamız hazır olduğunda bizde hazırız diyelim;

window.addEvent('domready', function(){
	
	/* .. .. */

});

Adım 6

Şimdi sınıfı select olan bütün selectbox’ları seçip each ile döngüye sokalım.

$$('select.select').each(function(elem, index){
    /* .. .. */
});

İlk olarak selectbox’ın opacity değerini 0 yaparak görünmez hale getirelim;

elem.setStyle('opacity', 0);

Şimdi selectbox’ın kapsayıcı nesnesini oluşturalım;

var selectBoxContent = new Element('div', {
	'class': 'selectBoxContent'
});

Oluşturduğumuz kapsayıcı nesneyi önce dom’a ekliyoruz.. Yani select nesnesinin hemen öncesine ekliyoruz.

selectBoxContent.inject(elem, 'before');

Ve dom’a eklediğimiz kapsayıcı nesnenin içerisine şimdi selectbox’ımızı ekleyebiliriz;

elem.inject(selectBoxContent);

f12’yi basıp developer tools’dan baktığınızda şöyle bir görüntü var ise buraya kadar her şeyi doğru yaptınız demektir ????

Seçilen select değerini gösterecek text nesnesini oluşturalım, içerisine ise seçili select değerini atayalım;

var selectText = new Element('span', {
	'class' : 'selectText',
	'text' : elem.getSelected().get('text')
});

Ve şimdi bu text nesnesini select’ten hemen öncesine ekliyoruz.

selectText.inject(elem, 'before');

Son bir adım kaldı, oda select değeri değiştiğinde bunu yakalayıp text nesnesine yazdırmak.. Onun içinse şöyle bir kod yazacağız;

elem.addEvent('change', function(){
	selectText.set('text', elem.getSelected().get('text'));
});

Evet, bu kadar koddan sonra custom.js dosyamızın son hali şöyle olmalı;

window.addEvent('domready', function(){
	
	$$('select.select').each(function(elem, index){
		elem.setStyle('opacity', 0);
		var selectBoxContent = new Element('div', {
			'class': 'selectBoxContent'
		});
		selectBoxContent.inject(elem, 'before');
		elem.inject(selectBoxContent);
		var selectText = new Element('span', {
			'class' : 'selectText',
			'text' : elem.getSelected().get('text')
		});
		selectText.inject(elem, 'before');
		elem.addEvent('change', function(){
			selectText.set('text', elem.getSelected().get('text'));
		});
	});

});

Buradan sonrasını ise css ile halledeceğiz..

Adım 7

İlk olarak bir reset.css yazmamak için sevgili eric meyer’in reset.css’ini kullanabiliriz.. Bunun için aşağıdaki bağlantıyı kullanabilirsiniz;
http://meyerweb.com/eric/tools/css/reset/

Adım 8

Son olarak selectbox’ımıza biraz şekil verelim;

/*__ SELECTBOX __*/
.selectBoxContent {
	position: relative;
	display: inline-block;
	*display: inline;
	zoom: 1;
	background: #f7f7f7 url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat 175px;
	border: 1px solid #ddd;
	border-top-color: #aaa;
	height: 30px;
	width: 200px
}
.selectBoxContent span.selectText {
	position: absolute;
	padding-left: 8px;
	font: 12px/30px Arial;
	color: #666
}
.selectBoxContent:hover span.selectText {
	color: #111
}
.selectBoxContent select {
	width: 100%;
	height: 30px;
	cursor: pointer;
	position: relative;
	z-index: 1
}

Evet, tebrikler.. Başarılı bir şekilde basit ve kullanışlı bir selectbox örneği hazırladık ????

İndir

http://yadi.sk/d/5VGBleen6uVtV

JavaScript ile Ayın Kaç Çektiğini Bulmak

DatePicker eklentisi yazarken böyle bir şey lazım oldu.. Lazım olunca da çözüm aradık, bulduk.. Sizede bir gün lazım olur ise eğer şöyle yapıyorsunuz;

var ayKacCekti = new Date(2013, 02, 0).getDate();
alert(ayKacCekti);

Yani kısaca gün değerine 0 yazmanız o ayın toplam gün sayısını size veriyor ????

Not: Genelde ay terbiyesizce bir şey çekiyor ????

JavaScript ve jQuery’de Fonksiyon Varlık Kontrolü

Bazı durumlarda eklenti kullanmamız gerekir.. Ancak eklentiye her sayfada ihtiyaç olmadığı için sadece ihtiyaç olan sayfada eklenti dosyalarını yükletiriz.. Ancak genel js dosyası tek olduğu için, diğer sayfalarda bu eklenti olmadığından eklenti tanımından sonraki kodlar çalışmaz hale gelir.. Bu gibi durumlarda o kod satırını eğer eklenti var ise çalıştırmak en sağlıklı çözüm olacaktır.. Peki bunu nasıl yapacağız? Öncelikle bu jQuery eklentisi olacağından jQuery’nin bize sunmuş olduğu $.isFunction() fonksiyonunu kullanacağız.. Ve şu şekilde kontrol işlemini yapacağız;

if ( $.isFunction($.fn.eklentiAdi) ){
    /* eklentiAdi adlı eklentiyi uygulamak için gerekli kodlar */
}

Ya da şöylede kontrol edebiliriz;

if ( $().eklentiAdi ){
    /* eklentiAdi adlı eklentiyi uygulamak için gerekli kodlar */
}

Bu şekilde eğer böyle bir eklenti var ise o kod bloğu çalışacaktır ve altındaki kodları etkilemeyecektir.. Bunun bir benzeride jquery fonksiyonlarıdır.. Onun içinde kontrol şöyledir;

$.test = function(){}
if ( $.isFunction($.test) ){
    alert('test fonksiyonu var!');
}

javascript ile fonksiyon kontrolü için ise;

function test(){}
if ( typeof test == 'function' ){
    alert('fonksiyon mevcut!');
}

Ya da;

function erbilen(){}
if ( window.erbilen ){
    alert('erbilen fonksiyonu mevcut!');
}

Kolay gelsin ????

JavaScript ile AdBlock Tespiti

Tarayıcı eklentisi olan ve rahatsız edici reklamları gizlemek amaçlı kullanılan AdBlock eklentisi, bazen iyi niyetli site sahiplerini zarara sokabiliyor ???? Böyle bir durumda bu eklenti nasıl tespit edilir, nasıl çözüm bulunur bunu öğreneceğiz.. Yararlı olması dileğiyle..Tarayıcı eklentisi olan ve rahatsız edici reklamları gizlemek amaçlı kullanılan AdBlock eklentisi, bazen iyi niyetli site sahiplerini zarara sokabiliyor ???? Böyle bir durumda bu eklenti nasıl tespit edilir, nasıl çözüm bulunur bunu öğreneceğiz.. Yararlı olması dileğiyle..

jQuery ile Sürükleme (Drag) İşlemi

Aslında başlık tam olarak durumu özetlemiyor.. Ancak en genel tanım bu şekilde sanıyorum ???? Biz dersimizde bir nesnenin genişlik ve yüksekliği yeniden boyutlandırsakta aslında yaptığımz şey fare olaylarıydı.. Yararlı olması dileğiyle..Dikkat: Firefox’da drag içinde a olduğunda sorun veriyor.. Direk drag nesnesi ile yaparsanız sorun çözülecektir.