JavaScript Debugger and Trace Tool

Hi, people.
Here is the tool that i wrote it for my self,
i sick of using alert() and i wrote a trace tool.
it can show you the errors also you can use it to prompt any thing on it, just like using alert().
also you don't have to add any code onto your site. just call the trace.js at very top of your page and it will run it by itself.
to promp on screen just use it like alert() but call it as trace("helloworld");
it's quite simple. it work on almost all browsers.
best part is, this tool is in a floating windows so this means you can place it anywhere in your page.
You can see the working version here
-----
There is a watch property I currently added. watch is not perfect but at least you can fallow hidden fields or that kind of thing by just giving their id's.
-----
you can find the code here

Color Picker, Basit bir renk seçme aracı

Web sitenizde renk seçilmesi gereken bir yer için bu kodu kullanabilirsiniz olduça basit olduğu için geliştirmeniz gerekebilir. bir div'in içinde açılmasını yada floating olmasını sağlayabilirsiniz. orası size kalmış ben örneği buraya ekliyorum sadece :)


Örnek kod için buraya

Rating Stars, Websitenize Yıldız Temalı Rating Ekleyin.

Bir çok sitede gördüğünüz rating yıldızcıklarını artık kendi sitenizede ekleyebilirsiniz.
İşlem oldukça basit.

Öncelikle yıldız resimlerinin içinde bulunacağı bir table yapmalıyız.

<table id="starTable" width="75" height="15" border="0" cellpadding="0" cellspacing="0" background="star0.gif" onMouseOut="resetRate(this)">
<tr>
  <td width="15" height="15" onMouseOver="changeRate('1')" onClick="rate(this,'1')"></td>
  <td width="15" onMouseOver="changeRate('2')" onClick="rate(this,'2')"></td>
  <td width="15" onMouseOver="changeRate('3')" onClick="rate(this,'3')"></td>
  <td width="15" onMouseOver="changeRate('4')" onClick="rate(this,'4')"></td>
  <td width="15" onMouseOver="change('5')" onClick="rate(this,'5')"></td>
</tr>
</table>

table'a ilk baktığımızda sanki ayrı ayrı yıldızlar varmış gibi gözükmesine rağmen aslında toplamda altı resim var.
Bir tane bütün yıldız ların sönük olduğu resim, ardından bütün yıldızların yanık olduğu resme kadar sırayla artan 5 resim daha. bu mantıkla işlem bir anda bebek işine dönüşüyor.
Şimdi kod'a dikkat ettiyseniz 3 adet function görürsünüz
bunlar
changeRate()
rate()
resetRate()
Ayrıca table'a birde background-image verdim bu image sıfır rating'i temsil ediyor.
functionların Şimdi hepsini bir bir açıklayalım Örnek kodu'da altta

function changeRate(val){
  document.getElementById('starTable').style.backgroundImage = "url(star"+val+".gif)";
}

function rate(val){
  document.getElementById('rated').value = val;
}

function resetRate(elem){
  var val = document.getElementById('rated').value;
  if(val == "")
      elem.style.backgroundImage="url(star0.gif)";
  else
      elem.style.backgroundImage="url(star"+val+".gif)";
}

onMouseMove event'inde çağırdığımız changeRate function'ı mouse'u üzerine getirdiğimiz TD'ye göre Table'ın background image'ını değiştiriyor. buda yıldızların dolma boşalma efektini oluşturuyor.
funtion table'ı id'sinden yakalayıp backgraound image olarak daha önceden hazırladığımız ve akıllıca isimlendirdiğimiz yıldız resimlerini atıyor. akıllıca diyorum çünki verdiğimiz isimler şöyle
star0.gif
star1.gif
star2.gif
vs.
hangi rating verildiyse
"star"+val+".gif"
diyerek sadece bir seferde if kullanmadan resimlere ulaşabiliyoruz.
bu tarz dosya isimleri çoğu zaman hayat kurtarır.
---
onMouseClick event'inde çağırdığımız rate function'ı tek değer alıyor. buda rating değeri.
function basitçe kendisine gönderilen değeri bir textbox'ın içine yazıyor. seçilen değeri bir yerlerde tutmalıyızki daha sonra yıldızlarımız kaç seçtiğimizi hatırlayabilsin.
bu function aslında en önemli function çünki oylama burda yapılıyor ve gerçek bir uygulamada bütün içeriği bu function'a yazmanız gerekebilir. isterseniz direk PHP ile istereniz (ki daha uygun) AJAX ile seçili değeri database'inize gönderebilirsiniz. textbox yerine hidden field kullanabilirsiniz ben burda demo olduğu için bir textbox kullandım.

Rating:
<input type="text" id="rated" />

---
Üçüncü ve son functionda resetRate Function'ı mouse'umuzu yıldızların üzerinden çektiğimizde değerlerini unutmamalarını ve göstermeye devam etmelerini sağlayan function. bu function'ı yıldızların tamamını kapsayan table'ın onMouseOut event'ine koyduk ki mouse terk ettiğinde çalışsın.
function direkt textbox'ımızın içindeki değere bakıyor. eğer textboxda hiçbirşey yoksa sıfır nolu resmi eğer bir değer varsada changeRate'de yaptığımız gibi o değerin resmini çağırıyor. bu functionda textbox'ın içindeki değeri doğrulayan herhangi bir kontrol kod'u koymadım çünki zaten büyük olasılıkla hidden kullanıcaksınız.
--
kodlar gayet basit olduğuiçin istediğiniz gibi düzenleyebilirsiniz. Örnek kod için buraya

Aktif CSS Değiştirme

Web sitenize eklediğiniz CSS sheet'leri aktif olarak değiştirerek ziyaretçilerinizin farklı temaları sayfa yenilenmeden görebilmelerini sağlamak istermisiniz? bu yazıda bunu nasıl yapabileceğinizi anlatacağım.
Java script, CSS, ve HTML kullanacağımız bu örnek aslında oldukça basit, ancak internette pek örneği yok. O yüzden bunu yaparak ender bulununan bir site yapmış olacaksınız.
Şimdi başlayalım.
Örnek Dosya için buraya

Öncelikle hazırladığınız sayfa için elbete bir css dosyanız olmalı. Sayfanızın bütün style düzeni bu dosya üzerinden yönetiliyor olmalı (her iyi sitede olması gerektiği gibi). şimdi bu style sheet'den belli kopyalar yaratın. kopya derken sadece class isimleri aynı olsa yeter. class isimlerinin aynı olması hiçbir yerde extra kod yazmadan bu işi bitirmemizi sağlayacak.
Style sheet'i sayfaya linklediğimiz tag'e fazladan bir "ID" ekledim böylece javascript ile ona ulaşabileceğiz.

<link href="style1.css" id="stil" rel="stylesheet" type="text/css" />

Şimdi birde basitçe HTML kodumuza bakalım, bu kodu body tag'inin içine yerleştirelim.

<div class="header">Bilgi Formu</div>
<table width="260" border="0" cellpadding="5" cellspacing="0" class="mtable">
<tr>
    <td width="70">&#304;sim:</td>
    <td width="175"><input name="ism" type="text" class="elem"  /></td>
</tr>
<tr>
    <td>Soyisim:</td>
    <td><input name="soyisim" type="text" class="elem" /></td>
</tr>
<tr>
    <td>Tel:</td>
    <td><input name="tel" type="text" class="elem" /></td>
</tr>
<tr>
    <td valign="top">Adres:</td>
    <td><textarea name="adres" rows="5" cols="20" class="elem"></textarea></td>
</tr>
<tr>
    <td>Stil:</td>
    <td>
        <select name="select" class="elem" onchange="changeStyle(this)">
            <option>style1</option>
            <option>style2</option>
            <option>style3</option>
        </select> </td>
</tr>
<tr>
    <td colspan="2" align="center">
        <input type="button" value="Ok" class="btn" />
        <input type="reset" value="clear" class="btn" />
    </td>
</tr>
</table>

koda dikkat ettiyseniz nerdeyse bütün elementlere bir style atanmış. ayrıca en altlarda bulunan select tag'ınında onChange'inde changeStyle isimli bir function var bu function'a objeyi this kullanarak yolladımki bizi birdaha onu çağırmakla uğraştırmasın
Şimdi bu function kısaca şunu yapıyor select'in seçili değerinin sonuna ".css" ekleyip bir dosya ismine çeviriyor ve style link'inin bunu çağırmasını sağlıyor.
ben kolay olduğu için bu yöntemi seçtim isteyen if ile check edip istediği ismi çağıradabilir yani select'in değerlerini isme dönüştürmek zorunda değilsiniz yada select kullanmak zorundada değilsiniz. bu sadece bir örnek, neyse.
Function'da kısaca şöyle bu function'da sayfanızın HEAD kısmında, Script tag'inin içinde bulunmalı

function changeStyle(elem){
   var stylelink = document.getElementById('stil');
   stylelink.href = elem.options[elem.selectedIndex].text + ".css";
}

Gördüğünüz gibi Çok kolay. sadece link tag'ini id'sinden yakalayıp href'ine istediğimiz değeri atıyoruz. oda canlı olarak sonuç veriyor.

Bu script Firefox ve IE'de düzgün çalışır. ama CSS'in yeteneklerini görmek istiyorsanız Firefoxdan şaşmayın derim ben.

Jotform.com

Sonzamanlarda sürekli üzerinde çalıştığım site Jotform.com. Şuan yurt dışında oldukça sık kullanılan bu site sayesinde web tabanlı formlar yaratabiliyorsunuz. bu size çok kolay bi şekilde web sitenize e-mail formu. contact formu. yada anketler, nebiliyim rezervasyon bilgileri fln filan toplama formları eklemeimkanı sağlıyor. ve bunu okadar kolay yapıyorsunuzki adeta istediğiniz form'u kağıda yazar gibi. Jotform sadece bununlada yetinmiyor birde size bu sonuçları listeliyor raporluyor. e-mailinize gönderebiliyor. EXCEL formatında sonuç verebiliyor. Ayrıca en güzel özelliklerinden biri Upload yapılabilmesi. yani form'unuza eklediğiniz bir soruya cevap olarak insanlardan word dosyaları isteyebilirsiniz. yada fotoğraflarını vs. Jotform'da işler okadar kolayki ortaya birşeyler çıkarmak için üye olmak bile zorunda değilsiniz. site açılır açılmaz karşınıza basit bir form geliyor burda yeni sorular ekleyebiliyorsunuz hemde inanılmaz bir şekilde sürükleyip bırakarak. daha sonra next'e basarak ilerliyorsunuz ve siteye kaydolup kaydolmama kararını verebiliyorsunuz. o an kaydolduğunuzda (sadece e-mail ve şifre) üzerinde çalıştığınız form kaybolmuyor ve devam edebiliyorsunuz. yinede kaydolmak istemezseniz jotform sizi hala unutmuyor aynı bilgisayarda tekrar açtığınız jotform size kaldığınız yerden devam etme olanağı sunuyor. üstüne üstlük bu kaydetmeden hazırladığınız formların kaynak kodlarını alıp websitenizde kullanabilirsiniz. Web 2.0 teknolojilerinin tamamını bünyesinde barındıran jotform alt yapı olarakda ajax tekniğini kullanıyor böylece siteyi kullanırken en fazla 2 kere sayfanın yenilendiğini görüryorsunuz. hesap oluştururken bile sayfanız yenilenmiyor. Jotform şuan kolay kullanım özellikleri ve web 2.0 yetenekleri ile yurt dışında oldukça ilgi görüyor ve en ama en güzeli TAMAMEN BİR TURK TARAFINDAN GELİŞTİRİLDİ. Jotform'un Geliştiricisi olan Aytekin TANK'ın Blog'una buradan erişebilirsiniz. Şuan için tamamen ücretsiz olan Jortform'un yakın zamanda yeni bir sürümü çıkacak. bu sürümde şuan size açıklayamayacağım bir çok özellik bulunacak ve ayrıca paralı bir abonelik hesabıda mümkün olucak. ancak bu ücretsiz kullanıcıları bugüne kadar yaptıkları hiç birşeyden alı koymayacak. Jotform'u bir kere mutlaka deneyin eminim çok işinize yarıyacak.