JQuery ile Sürükle Bırak ve Yeniden Boyutlandırma

Bu yazımda JQuery ile herhangi bir elementin ekran üzerindeki yerini değiştirmeyi ve boyutu değiştirmeyi anlatacağım. Bunun için JQuery yanında JQuery UI sınıfını kullancağız bu yüzden aşağıdaki dosyaları sayfamıza dahil etmemiz gerekiyor.

Gerekli Dosyaları Sayfamıza Dahil Edelim

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

ui.css dosyasını olmazsa olmaz değildir isterseniz kendi css dosyanızda kendi stillerinizi kullanarak sürüklenip bırakılacak elementi özelliklerini değiştirebilirsiniz.

Element Tanımlama

Sayfamızdaki hangi elementi sürükle bırak ve boyutlandırma özelliğini kazandırmak istiyoruz öncelikle bunu belirlememiz lazım. Eğer birden fazla elemente aynı özellikleri kazandırmak istiyorsak sınıf kullanmamız daha doğru olacaktır durum tam tersi ise sınıf yerine kimlik(identity) kullanmamız daha doğru olacaktır. Ben #resizeDiv olarak tanımladığım elementi kullanacağım.

<div id="resizeDiv">Sürükle Bırak &amp; Boyutlandır</div>

Elementi tanımladıktan sonra bu elementi sürüklenip bırakılması için bazı stil özellikleri vermemiz gerekiyor. Kısacası position özelliğini absolute yaparak elementin yeri tanımlandığı yerde değilde bizim istediğimiz yerde görebiliriz. Gerekli stil kodu aşağıda.

#resizeDiv {
	width:150px;
	height:150px;
	padding:5px;
	background-color:#ff8811;
	position:absolute;
	top:0px;
	left:0px;
}

Elementi Sürükle Bırak ve Boyutlandırma Özelliği Kazandıralım

Elementin stil özelliklerini kazandırdıktan sonra yapmamız gereken tek şey UI sınıfının bize sunduğu draggable ve resizable nesnelerini kullanmak olacak. Kullanım şekli oldukça basit aşağıda kodlarını görebilirsiniz.

$(document).ready(function() {
	$('#resizeDiv')
	.draggable()
	.resizable();
});

Hepsi bu kadar ancak bunun yetinmek istemiyorsanız bu nesnelerin parametrelerini değiştirmek istiyorsanız aşağıdaki linkleri kullanabilirsiniz. Yada çalışan bir demo görmek istiyorsanız demo linkinden faydalanabilirsiniz.

http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/resizable/

Google Chrome’a Nasıl Eklenti Kurabiliriz?

Getirdiği radikal değişiklikler ve google’ın yüksek pazarlama gücü ile beraber şimdiden %4 pazar payına ulaştı Google Chrome. Firefox ile iyice yaygınlaşan tarayıcılara eklenti kurmak artık çoğu kullanıcının vazgeçilmezi oldu. Eklenti ne işe yarar derseniz web sitelerinde çıkan reklamlarını engellemekten tutunda maillerinizi sesli uyarı ile almaya kadar binlerce konuda çok yararlı eklentiler mevcut. Unutmadan belirteyim Google Chrome da eklenti kelimesi kullanılmamış onun yerine uzantı kelimesi tercih edilmiş. Ben daha kolay anlamanız için eklenti kelimesini kullanacağım.

Şu anki  stabil Google Chrome sürümüne eklenti kurulamıyor bu yüzden şimdilik eklenti kurulabilen sürümü 4.0.249.78 beta indirip kurmamız gerekiyor indirmek için tıklayın.

Kurulum işlemi bittikten sonra eklenti (uzantı) kurulabilen bir Google Chrome sahipsiniz demektir.

Eklenti kurmak ise oldukça basit Google Chrome Uzantılarına giderek var olan tüm eklentilerden faydalanabilirsiniz. Gitmek için tıklayın.

Kısa bir sürü sonra kendi kullandığım tüm eklentilerinde oluşan yeni bir yazı yazacağım  keşfedilmemiş ama çok işinize yarayacak eklentileri gelecek yazımda görebilirsiniz.

JQuery ile Foreach Kullanalım

Bir dizi değişkenin anahtarı ve değerini en kolay bir şekilde nasıl kullanabileceğimizi bu yazımdan anlatacağım. Fazla sözü uzatmadan anlatıma geçeyim zaten oldukça kolay bir konu.

Veri isimli değişkenimiz

var veri = {
    anahtar1 : 'deger1',
    anahtar2 : 'deger2',
    anahtar3 : 'deger3'
};

Each fonksiyonumuzun kullanımı

$.each(veri, function(anahtar, deger) {
    alert( "Anahtar: '" + anahtar + "' deger: '" + deger + "'" );
});

Gördüğünüz gibi kullanımı oldukça kolay. Veri değişkenimizin değerlerini sırasıyla alıyor ve değişkenimizin anahtarını anahtar değişkenine atıyor değerini de aynı şekilde deger değişkenimize atıyor.

Demo İçin Tıklayın

UptimeRobot İle Sitemizi Açık Mı Kapalı Mı Öğrenelim

Uzun süren uğraşınız sonucunda bir site oraya çıkarmışsınızdır. Verdiğiniz bu emeğin karşılığını almak için sitenizin 7/24 sorunsuz bir şekilde açık olması gerekiyor tabi ki. Sürekli sitem açık mı değil mi diye kontrol etmek tabi mümkün ama bunu sizin adınıza detaylı bir şekilde yapan servisler mevcut bunlardan biride UptimeRobot.com

Zend Framework 1.10.0 Stabil Sürümü Yayınlandı

Zend Framework 1.10.0 stabil sürümü 27 ocak 2010 tarihi ile yayınlandı.

İndirmek için: http://framework.zend.com/download/latest

Öncellikle Zend Framework kendi sitesinde bazı tasarım değişikliklerine gidilmiş. Dökümantasyon sayfası ve indirme sayfasının tasarımlarda değişiklik olmuş. Bence dökümantasyon sayfası eskisine göre daha kullanışlı bir hal almış. Zend tool’a dbTable ve dbAdabter bölümleri eklenmiş. Bunların dışında birçok modülde düzenlemeler yapılmış. Mesela Zend_Pdf  %40 daha hızlı parse edebilcekmiş. Yapılan değişiklilerin tam listesi aşağıda mevcut. Hayırlı olsun diyelim.

• Documentation re-organization
• “previous Exception” support for PHP < 5.3.0
• Zend_Auth_Adapter_Chain
• Zend_Cache_Backend_Static
• Zend_Cache_Manager
• Zend_Filter_Boolean
• Zend_Filter_Compress
• Zend_Filter_Null
• Zend_Form multipage action helper (geçici)
• Zend_Image_Barcode
• Zend_Log factory
• Zend_Service_Linkback
• Zend_Service_LiveDocx
• Zend_Validate_Callback
• Zend_Validate_CreditCard
• Zend_Validate_Isbn
• Zend_Validate_PostCode
• Zend_View_Helper_Currency
• Zend_View_Helper_TimeSince
• Zend_View_Helper_TimeUntil
• Zend_View_Helper_XmlDeclaration