tag:blogger.com,1999:blog-56314213078430642492024-02-21T02:27:38.603+02:00Java Değil JavaScript...Türkçe içerikli JavaScript Örnek kod, eğitim ve paylaşım Blog'uSerkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.comBlogger13125tag:blogger.com,1999:blog-5631421307843064249.post-47334186463199157432007-11-12T11:53:00.000+02:002007-11-13T11:46:18.143+02:00Ölçeklendirilebilir textarea ve Anlık düzenlemeMerhabalar, Sonzamanlarda yazdığım tüm scriptleri bir framework olarak bir araya topluyorum, saha tamamlamadım ancak yapımı sırasında da çok hoşuma giden ve herkesin işine yarıyacağını düşündüğüm bazı scriptler de yazdım ve onları sizlerle paylaşmak istedim, tabi bu arada yazdığım framework'ün de beta versiyonunu görmüş olacaksınız. framework tamamen bittiği zaman onun için ayrıca bir yazı ve dökümanasyon da hazırlayacağım şimdilik sadece bazı fonksiyonlara bakalım.<br /><br />Yeni framework birçok özellik içericek bunlar genelde bir website inşaa ederken ihtiyac duyabileceğiniz çeşit çeşit fonksiyonlardır, ben bunların arasından eylenceli olan iki tanesini seçtim. umarım işinize yarar. bunları kullanabilmek için <a href="http://www.cigdemkuafor.com.tr/framework.js"><span style="font-weight: bold;">Framework.js</span></a> dosyasını yüklemeniz gerekmektedir.<br /><br /><span style="font-weight: bold;">Blogger javascriptle ilgili bir sorun yarattı için kod örneklerini farklı bir sayfaya taşımak zorunda kaldım.</span><br /><br /><b>Ölçeklendirilebilir Textarea</b><br />Ölçeklendirilebilir textarea yı yaparken <a href="http://www.drupal.org/">Drupal'</a>dan esinlendim, kod olarak değil ama prensip olarak aynısını yaptım diyebiliriz. Peki nedir bu? sitenizdeki textarea lara ortak bir class ismi verin ardından aşağıdaki örnek fonksiyonu o class ismiyle birlikde çağırın, artık kullanıcılarınız yazı alanlarını istedikleri gibi ölçeklendirebilecekler.<br /><br /> <a href="http://serkanyersen.googlepages.com/framework"><span style="font-size:130%;"><span style="font-weight: bold; color: rgb(255, 153, 0);">Örnek sayfası</span></span></a><br /><br /><b>Anlık Düzenleme</b><br /><!-- Code -->Anlık düzenleme bizim zaten JotForm üzerinde kullandığımız birşeydi daha sonra diğer sitelerde de çok popüler oldu bende bunu bir fonksiyon haline getirdim artık belirlediğiniz class ismine sahip bir div, span yada benzeri objeyi bu anlık düzenleme kutularına dönüştürebilirsiniz. Mantık aynı. Ayrıca bunlara işlem tamamlandığında çalıştırmak istediğiniz fonksiyonlarıda verebilirsiniz aynı benim öneğimde olduğu gibi yeni değeri alıp ekrana basmasını istiyorum, siz ajaxla database'de yollayabilirsiniz :)<br /><br /> <a href="http://serkanyersen.googlepages.com/framework"><span style="font-size:130%;"><span style="font-weight: bold; color: rgb(255, 153, 0);">Örnek sayfası</span></span></a><br /><br />Bu arada örnekde kullandığım <span style="font-weight: bold;">Debug.echo </span>fonksiyonu da framework tarafından yaratıldı. resize, drag&drop gibi özellikleri framework'ü inceleyerek keşfedebilirsiniz.<br />Herzamanki gibi umarım işinize yarar.<br /><script type="text/javascript">resizable.init("resizable",{minHeight:25});instantEdit.init("editable",{oncomplete:function(elem){ Debug.echo("Yeni içerik: "+elem.innerHTML);}});</script>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0tag:blogger.com,1999:blog-5631421307843064249.post-67704545875306233902007-06-20T15:00:00.000+02:002007-06-22T14:35:03.412+02:00Browser information objectMerhaba,<br />Bu yazımda size kısa ve işe yarar bir koddan bahsedeceğim.<br />Hepimizin bildiği gibi JavaScript server tarafında değilde client yani kullanıcı tarafında çalışır. Bu durum bize bir çok avantaj sağlar, bu avantajlardan biride web sitemizin kullanıcı kitlesi hakkında bir çok bilgiye ulaşabilmemizdir. Mesela işletim sistemi, işlemcisi, ekran çözünürlüğü, kullanılan browser, sürümü hatta cookie'lerin çalışıp çalışmadığı gibi bilgiler.<br /><br />Peki bu bilgiler ne işe yarar?<br />bu bilgileri kullanarak kullanıcı kitlenizi tespit edebilirsiniz ve web sitenizi buna göre ayarlayabilirsiniz mesela kullanıcılarınızın %80'i 800X600 çözünürlük kullanıyor, demekki sizinde sitenizde bu duruma göre bir ayarlama yapmanız gerekiyor yada kullanıcılarınızın %90'ı firefox kullanıyor o zaman IE bug'larıyla okadarda uğraşmanıza gerek yokmuş :) peki bu bilgileri nasıl toplayacağız.<br /><br />Bunun için bir obje yazdım gayet derli toplu oldu.<br /><br /><pre class="highlighted"><br /><code class="javascript"><br />// Define Browser<br />function Browser(){<br /> this.name = navigator.appName;<br /> this.codename = navigator.appCodeName;<br /> this.version = navigator.appVersion.substring(0,4);<br /> this.platform = navigator.platform;<br /> this.javaEnabled = navigator.javaEnabled();<br /> this.cookieEnabled = navigator.cookieEnabled;<br /> this.userAgent = navigator.userAgent;<br /> this.screenWidth = screen.width;<br /> this.screenHeight = screen.height;<br /> this.loc = window.location.href;<br /> this.referrer = (document.referrer)? document.referrer : "Direct";<br /> this.charSet = (document.characterSet)? document.characterSet : document.charset;<br /> this.language = (navigator.language)? navigator.language : navigator.browserLanguage;<br /><br /> this.information = function(){<br /> info = "\n== Client Descriptions ==\n";<br /> info += "Application Name is: " + this.name + "\n";<br /> info += "Application Code name is: " + this.codename + "\n";<br /> info += "Application Version is: " + this.version + "\n";<br /> info += "Location: " + this.loc + "\n";<br /> info += "Referrer: " + this.referrer + "\n";<br /> info += "User agent: " + this.userAgent + "\n";<br /> info += "Platform is: " + this.platform + "\n";<br /> info += "Is java Enabled?: " + this.javaEnabled + "\n";<br /> info += "Is Cookie Enabled?:" + this.cookieEnabled + "\n";<br /> info += "Language: " + this.language + "\n";<br /> info += "Document Character Set: " + this.charSet + "\n";<br /> info += "Client screenWidth: " + this.screenWidth + "\n";<br /> info += "Client screenHeight: " + this.screenHeight + "\n";<br /> return info;<br /> }<br /><br /> this.alert = function(){<br /> alert(this.information());<br /> }<br />}<br /></code><br /></pre><br />Bu kodu kullanmak oldukça kolay. ilk önce bu objeden bir instance yaratmalıyız<br /><pre class="highlighted"><br /><code class="javascript"><br />var info = new Browser();<br /></code><br /></pre><br />Artık browser bilgilerine <b>info.information();</b> method'unu kullanarak ulaşabilirsiniz bu method kullanıcıdan toplanan bilgileri okunabilir bir string haline çevirip geri döndürür.<br />aynı çekilde <b>info.alert();</b> method'uda bu mesajı alert box içerisinde gösterir.<br />bir deneyelim <a href="javascript:showInfo()">info.alert()</a><br /><br />Sonuç genelde şuna benzer birşey olmalıdır:<br /><code><br />== Client Descriptions ==<br />Application Name is: Microsoft Internet Explorer<br />Application Code name is: Mozilla<br />Application Version is: 4.0<br />Location: http://www.jotform.com/results.php<br /><br />User agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)<br /><br />Platform is: Win32<br />Is java Enabled?: true<br />Client screenWidth: 1280<br />Client screenHeight: 1024<br /></code><br /><br />Bu yöntemle alınan bilgiyi biz <a href="http://www.jotform.com/" target="_blank">jotform</a>'un error report'ları için kullanıyoruz.<br /><br />bir runtime error oluştuğunda jotform sessizce ajax yoluyla bu error'u ve kulanıcı bilgilerini bize yolluyor bizde biran önce bu erroru onarıyoruz.<br /><br />Jotform'un yaptığı şu:<br /><pre class="highlighted"><br /><code class="javascript"><br />var iserrorsent = false; // Global to check error status (sent or not sent)<br />// Error Handling, Handle errors gracefuly<br />window.onerror = function(desc, file, line, chr){<br /> // Ignore these errors<br /> if(desc.match(/onBG|offBG|buttonOver|buttonOut|buttonDown/gim)){ return true; }<br /> var info = new Browser();<br /><br /> // Create message<br /> message = "\n== Error Descriptions ==\n";<br /> message += "Error: "+ desc +"\n";<br /> message += "Ocuured in: "+ file +"\n";<br /> message += "Occured on line: "+ line +"\n";<br /> message += info.information();<br /> // Send message<br /> if(!iserrorsent){ //Dont send more than one error in one session<br /> reportError( message ,"Error occurred in Jotform: "+desc);<br /> iserrorsent = true;<br /> }<br /> return true;<br />}<br /><br />// Send errors by ajax<br />function reportError(desc,title){<br /> var res = makeRequest("action=report_error" + "&title=" + encodeURIComponent(title) + "&desc=" + encodeURIComponent(desc));<br />}<br /></code><br /></pre><br /><br /><br />Tabi burda karşımıza yeni bir şey daha çıktı <b>window.onerror</b> onerror event'i browserda runtime error oluştuğunda tetiklenen event'tir tam kullanımı şudur.<br /><pre class="highlighted"><br /><code class="javascript"><br />window.onerror = function(description, fileLocation, lineNumber){<br /> message = "\n== Error Descriptions ==\n";<br /> message += "Error: "+ description +"\n";<br /> message += "Ocuured in: "+ fileLocation +"\n";<br /> message += "Occured on line: "+ lineNumber +"\n";<br /> alert(message);<br />}<br /></code><br /></pre><br /><br />Umarım bu bilgiler işinize yarar hepinize iyi çalışmalar.Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com4tag:blogger.com,1999:blog-5631421307843064249.post-73699412063981571272007-06-01T09:52:00.000+02:002007-06-21T13:39:03.526+02:00JavaScript Button RolloverMerhaba,<br />Bu yazımda biraz daha dizayn ağırlıklı bir konudan bahsedicez.<br />Konumuz rollover button'lar. Bilmeyenler için bir hatırlatma yapalım, Rollover bir çok sitede gördüğünüz farenin bir butunun veya bir imajın üzerine gelmesiyle o nesnenin değiştirilmesi işlemine verilen isimdir.<br /><br />Bu işlem çoğunlukla web sitelerdeki tuşları tanımlamak ve tıklanabilir olduklarını anlatmak için kullanılır.<br /><br />Aslında birçok kişi bu konuya Dreamweaver'dan aşina. Dreamweaver sizin için otomatik olarak rollover imagelar yaratabiliyor. Ancak yarattığı kod o kadar çirkin ve kullanışsızki, her yeni rollover image eklediğinizde HTML'inize birsürü karışık kodlar ekleyip daha sonra içinden çıkamıyacağınız bir hale getiriyor.<br />Bu iş için çok basit bir CSS Çözümü var aslında ancak IE herzamanki gibi oyun bozanlık yapıp bunu kullanmamızı engelliyor. Yinede ben %90 lık IE kullanıcılarını umursamıyorum diyorsanız CSS yöntemini bi hatırlatalım<br /><br /><pre class="highlighted"><br /><code class="css"><br />.rollover{<br /> background:url(images/button.gif);<br />}<br /><br />.rollover:hover{<br /> background:url(images/button_over.gif);<br />}<br /><br />.rollover:active{<br /> background:url(images/button_down.gif);<br />}<br /></code><br /></pre>Kodu biraz tanımlarsak. .rollover{ image'ın normal durumu .rollover:hower image'ın mouseover durumu ve .rollover:active ise image'ın mousedown durumudur. geri kalanı CSS sizin için halledicektir.<br />Gördüğünüz gibi oldukça basit, ancak iki kusuru var birincisi IE6 asla ne yapmaya çalıştığınızı anlamıyacak ve ikincisi her roll over image için ayrı ayrı bunları yazmanız gerekicek.<br /><br />Durum böyle olunca bende kendi javascript fonksiyonumu yazmaya karar verdim. heryerde kullanılabilecek oldukça geliştirmeye açık ve anlaşılır olmasını istedim. Sonuçta <a href="http://www.jotform.com/">JotForm</a> üzerinde kullanıyoruz ve oldukça başarılı oldu.<br /><br />İlk önce fonksiyonun nasıl çalıştığının bir örneğini görelim.<br /><br /><iframe src="http://www.cigdemkuafor.com.tr/button_rollovers.html" allowtransparency="yes" frameborder="no" style="border:none;" height="300px" width="100%"></iframe><br /><br />İlk tuş yukarda verdiğim CSS rollover örneğine ait. Alttaki iki tane ise benim javascript ile yaptığım örnekler<br />birisi normal imaj diğeri ise bir button, yazdığım fonksiyon ikisi arasındaki farkı anlayıp ona göre davranıyor. ayrıca fark ettiyseniz alttaki tuşda mousedown efekti yok buda fonksiyona gönderilen bir argumanla kapatılabiliyor.<br /><br />evet şimdi fonksiyonu görelim.<br /><br /><pre class="highlighted"><br /><code class="javascript"><br />function buttonOver(elem,noDown){<br /> var realImage = ""; // Should be empty. veriable to keep original background.<br /> var ext = ".gif"; // Define Extention .gif .png .jpg<br /> var over_ext = "_over" + ext; // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif<br /> var down_ext = "_down" + ext; // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif<br /> var regEx = /\.\w+$|\.\w+\)$/; // Remove extention of the image<br /> var preload_img = function(imgToLoad){<br /> var img = new Image;<br /> if(document.imageArray)<br /> document.imageArray.push(img.src = imgToLoad);<br /> else{<br /> document.imageArray = new Array();<br /> document.imageArray.push(img.src = imgToLoad);<br /> }<br /> }<br /> <br /> if(elem.style.backgroundImage){ // if object has a background.<br /> realImage = elem.style.backgroundImage.replace(regEx,""); //Take original background and replace with over image.<br /> elem.style.backgroundImage = realImage + over_ext +")";<br /> }else if(elem.src){ // if object has a src .<br /> realImage = elem.src.replace(regEx,""); //Take original background and replace with over image.<br /> elem.src = realImage + over_ext;<br /> }<br /> if(!noDown) preload_img((realImage + down_ext).replace(/^url\(/,"")); // Preload images<br /> elem.onmouseout = function(){ buttonOut(elem); } // Define mouseout event.<br /> elem.onmousedown = function(){ buttonDown(elem); } // Define mousedown event.<br /> elem.onmouseup = function(){ buttonUp(elem); } // Define mouseup event.<br /> var buttonOut = function(elem){ // on mouseOut revert back to original image.<br /> if(elem.style.backgroundImage){<br /> elem.style.backgroundImage = realImage + ext + ")";<br /> }else if(elem.src){<br /> elem.src = realImage + ext;<br /> }<br /> }<br /> var buttonUp = function(elem){ // on mouseUp revert back to mouseover image.<br /> if(elem.style.backgroundImage){<br /> elem.style.backgroundImage = realImage + over_ext +")";<br /> }else if(elem.src){<br /> elem.src = realImage + over_ext;<br /> }<br /> }<br /> var buttonDown = function(elem){ // on mouseDown replace with mouseDown image.<br /> if(noDown) return true;<br /> if(elem.style.backgroundImage){<br /> elem.style.backgroundImage = realImage + down_ext +")";<br /> }else if(elem.src){<br /> elem.src = realImage + down_ext;<br /> }<br /> }<br />}<br /></code><br /></pre><br /><br />buttonOver fonksiyonunu kullanmanız için ilk önce yapmanız gerek bir kaç küçük ayar var.<br />mesela fonksiyonun ilk satırındaki değerleri ayarlamak gibi.<br /><pre class="highlighted"><br /><code class="javascript"><br />function buttonOver(elem,noDown){<br /> var realImage = "";<br /> var ext = ".gif";<br /> var over_ext = "_over" + ext;<br /> var down_ext = "_down" + ext;<br />[...]<br /></code><br /></pre><br />Gayet açık kullanacağınız image'ların uzantısı <span style="font-weight: bold;">ext, </span>mouseover olduğunda gelicek resmin son eki <span style="font-weight: bold;">over_ext, </span>mousedown olduğunda gelicek olan resmin son eki <span style="font-weight: bold;">down_ext<br /></span>resimleriniz için genelde button.gif, button_over.gif, button_down.gif yada button.gif button2.gif button3.gif gibi isimler seçmeye özen gösterirseniz hem işinizde kolaylık sağlar hemde dosyaların yönetimi kolaylaşır.<br /><br />Fonksiyon artık kullanıma hazır. fonksiyonu çalıştırmak için yapmamız grekende çok basit. Sadece mouseover event'inde buttonOver(this) yazarak çağırıcaz tek yapmamız gereken bu. Fonksiyon sizin verdiğiniz ayarlara göre davranarak diğer bütün eventleri ayarlayacaktır.<br />Ayrıca mousedown işleminde gelicek olan resim içinde küçük bir <span style="font-weight: bold;">preload</span> var.<br />eğer mousedown event'inin çalışmasını istemiyorsanız da buttonOver(this,true) diyerek çalışmasını engelleyebilirsiniz.<br /><br />Fonksiyonla ilgili bir sorun yaşarsanız herzaman sorabilirsiniz.<br />İyi Çalışmalar.Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com2tag:blogger.com,1999:blog-5631421307843064249.post-57336497359832182372007-04-28T00:49:00.000+02:002007-06-20T14:14:54.933+02:00Ajax için kullanışlı fonksiyonlarMerhabalar.<br />7 aydır uğraştığımız projemiz <a href="http://www.jotform.com/">JotForm</a>'u tamamlama peşinde olduğumdan uzun zamandır blog'a vakit ayıramıyordum neyse ki JotForm başarıyla tamamlandı da sonunda içim rahat bi şekilde yazabiliyorum.<br /><br />Neyse eğer Jotform'a girip bir bakacak olursanız sitenin işlevlerinin çoğunun <span style="font-weight: bold;">ajax</span> yoluyla yapıldığını hemen farkedeceksiniz. Özellikle yeni form yaratırken ve payment özelliklerini ayarlarken kullandığımız <span style="font-weight: bold;">Wizard</span>'lar tamamen ajax yoluyla yükleniyorlar.<br /><br />Çalışmakta olan kodun üzerine server'dan yeni kod getirip sonra da çalışan kod dan bu yeni kod da bulunan bir javascript fonksiyonunu çağırmak istediğinizde ya da bu yeni çağırdığınız sayfadaki bir HTML elementini yakalamak istediğinizde bazı "zamanlama" hataları oluşuyor. Mesela, ya fonksiyonunuz daha sayfa yüklenmeden çalışıyor yada daha yaratılmamış bir elementi yakalamaya çalışıyorsunuz bazen de daha yüklenmemiş fonksiyonlara çağrı yapıyorsunuz. Tabi bunlar kişilerin internet hızlarına göre de değişim gösteriyor. Bu tür sorunları aşmak bizim için gerçekten de çok önemliydi bizde şu fikirle yola çıktık, bir fonksiyonu veya elementi çağırmadan varlığından emin olmalıyız eğer yoksa da yaratılana kadar beklemeliyiz.<br /><br />Bu mantıkla bazı fonksiyonlar yazdık ve gerçekden işe yaradı, ben de sizinde işinize yarayabileceğini düşündüğümden burada paylaşmak istedim.<br /><br />işte fonksiyonlar.<br /><br /><pre class="highlighted"><br /><code class="javascript"><br />function isExist(funcName){<br />try{<br /> if(typeof eval(funcName) == 'function')<br /> return true;<br /> }catch(e){<br /> return false;<br /> }<br />}<br />}<br /></code><br /></pre><br /><br />isExist fonksiyonu isminden de anlaşıldığı gibi bir fonksiyonun varlığını kontrol ediyor. <span style="color: rgb(51, 0, 153);">isExist</span>(<span style="color: rgb(153, 153, 153);">"foo"</span>) ; şeklinde kullanmak gerek () kullanmadan sadece fonksiyonun ismini yollamanız yeterli size true yada false return edicektir.<br /><br /><pre class="highlighted"><br /><code class="javascript"><br />function tryFunction(func,args,dur,trycount){<br /> args = args.replace(/\"/g,"'");<br /> trycount = (trycount)? trycount : 0;<br /> dur = (dur)? dur : 15;<br /> if(isExist(func)){<br /> eval(func + args);<br /> trycount=0;<br /> }else if(trycount < dur){<br /> trycount++;<br /> setTimeout("tryFunction(\""+func+"\",\""+args+"\","+dur+","+trycount+")", 100);<br /> }<br />}<br /></code><br /></pre><br /><br />tryFunction ise daha karmaşık, ayrıca isExist() fonkisyonunada bağımlı,şu şekilde çalışıyor, fonksiyon ismi ve argumanları verildiğinde bulana kadar deniyor bulursa da çalıştırıyor, bulamazsa hata vermeden çıkıyor.<br />iki şekilde kullanabilirsiniz,<br />ya <span style="color: rgb(51, 0, 153);">tryFunction</span>(<span style="color: rgb(153, 153, 153);">"funcName"</span>,<span style="color: rgb(153, 153, 153);">"(a,r,g,s)"</span>)<br />yada <span style="color: rgb(51, 0, 153);">tryFunction</span>(<span style="color: rgb(153, 153, 153);">"funcName"</span>,<span style="color: rgb(153, 153, 153);">"(a,r,g,s)"</span>,<span style="color: rgb(51, 204, 0);">45</span>)<br />sonuna eklediğiniz rakam fonksiyonu çalıştırmayı kaç kere deneyeceğini belirtiyor.<br />Buradaki 45, 4.5 saniye ye denk geliyor. hiç birşey vermezseniz de default olarak 15 alıyor.<br /><pre class="highlighted"><br /><code class="javascript"><br />function printInDiv(str,cnt){<br /> cnt = (cnt)? cnt : 0;<br /> if(document.getElementById('idDiv')){<br /> document.getElementById('idDiv').innerHTML = str;<br /> }else if(cnt < 45){<br /> cnt++;<br /> setTimeout("printInDiv('"+str+"',"+ cnt +")", 100);<br /> }else<br /> return false;<br />}<br /></code><br /></pre><br /><span style="font-weight: bold;">Bu bir fonksiyon değil bir yöntem,</span><br />burada varsayalım ki "printInDiv" diye bir fonksiyonumuz varmış ve biz bunu <span style="color: rgb(51, 0, 153);">printInDiv</span>(<span style="color: rgb(153, 153, 153);">"hello world"</span>) şeklinde kullanıyormuşuz. Ancak içine yazı koyulacak div, ajax'la geldiğinden ve hala yüklenmediğinden div element'inin orada olup olmadığını kontrol etmemiz gerek. fonksiyonu bu şekilde modifiye ettiğiniz zaman ya elementi bulup çalışıp durucak yada kendi kendisini 45 kere çağırıcak bulamayıncada hata verip durucak yine burda da 45, 4.5 saniye demek.<br /><br />fonksiyonun eski hali şu şekildeydi<br /><br /><pre class="highlighted"><br /><code class="javascript"><br />function printInDiv(str){<br /> document.getElementById('idDiv').innerHTML = str;<br />}<br /></code><br /></pre><br />Bu yöntemler benim gerçekten çok işime yaradı umarım sizde faydasını görürsünüz.<br />İyi çalışmalar.Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com3tag:blogger.com,1999:blog-5631421307843064249.post-76309729347619610132007-03-26T08:39:00.000+02:002007-06-20T14:21:45.074+02:00İnternet Explorer için Alternatif PNG DesteğiMerhabalar,<br />Eminim Hepiniz IE'nin PNG desteği verememesi sorunuyla uğraşmışsınızdır.<br />Her nekadar IE7'nin yarım yamalak bir PNG desteği olsa bile IE6 hala bizim müdahelemize ihtiyaç duyuyor.<br />PNGleri çalıştırmak için bir sürü yöntem var bende size Javascript yardımıyla bu işi yaptırıcam umarım güzel olur başlayalım,<br />Fonkisoyunumuzun düzgün çalışması için bir dosyaya ihtiyacımız var <a href="http://www2.blogger.com/img/blank.gif">BLANK.GIF</a><br />bu Dosyayı indirdip ulaşabileceğimiz bir yere koyduktan sonra.<br /><br />şu fonksiyonu kullanıyoruz.<br /><pre class="highlighted"><br /><code class="javascript"><br />function pngImages(){<br /> var img;<br /> if(document.all){<br /> for(x=0;x < arguments.length;x++){<br /> elm = document.getElementById(arguments[x]);<br /> img = (elm.src)? elm.src : (elm.background)? elm.background : (elm.backgroundImage)? elm.backgroundImage : "";<br /> elm.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='" + img + "')";<br /><br /> if(elm.src)<br /> elm.src = "images/blank.gif";<br /> else if(elm.background)<br /> elm.background = "images/blank.gif";<br /> else(elm.backgroundImage)<br /> elm.backgroundImage = "images/blank.gif";<br /> }<br /> }<br />}<br /></code></pre><br />Fonksiyon bütün ona yolladığımız elementlerin varsa SOURCE'una yada BACKGROUND'una blank.gif yerleştirip CSS sayesinde BACKGROUND-IMAGE'a da PNG resmini koyacak.<br /><br />Fonksiyonu Sayfa tamamen yüklendikten sonra (onload) bu şekilde çağırmalısınız.<br /><pre class="highlighted"><br /><code class="javascript"><br />pngImages("logo","faq","forum","blog");<br /></code><br /></pre>Bir deneyin bakalım birçok yöntemden daha hızlı ve sadece belirli nesneye yönelik olduğudan açılırken sadece ihtiyaç duyulan resimleri çevirerek hız kazanabilirsiniz.<br />bu avantajların yanında çevirmek istediğiniz her nesneye ID vermek zorunda olmanız ise DEZAVANTAJ.<br /><br />İyi Çalışmalar..Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com3tag:blogger.com,1999:blog-5631421307843064249.post-71658530411028455702007-03-25T14:31:00.000+02:002007-03-28T14:40:35.153+02:00İnceleme: Linkibol.comSelamlar,<br />Geçtiğimiz günlerde yeni bir siteyle tanıştım, <a href="http://www.linkibol.com/">LinkiBol.com</a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.linkibol.com/images/linkibolLogo.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px;" src="http://www.linkibol.com/images/linkibolLogo.png" alt="" border="0" /></a>Linkibol, Beni çok gururlandırdı çünki Türkiyenin ilklerinden.<br />Web 2.0 niteliklerini taşıyan. Yerli yerinde ve başarılı kullanılmış AJAX, İç açan tasarımı ve Sürekli genişleyen içeriği ile gerçekten göz dolduran başarılı bir site olmuş. Buradan sitenin yaratıcısı Volkan Özçelik'e tebriklerimi iletiyorum.<br /><br /><span style="font-weight: bold; color: rgb(255, 153, 0);"><br />NEDİR BU LİNKİBOL??</span><br />Linkibol, Temel anlamda, internette birçok örneğini gördüğümüz ve oldukça yaygın olan <span style="font-weight: bold;">Social Bookmarking</span> (Bookmark,Link paylaşım) sitelerinden biri, Ancak kendine özgü özellikleri, yapısı ve tasarımı ile internetteki bu social bookmark kalabalığından sıyrılmasını bilmiş. Özellikle rakiplerinizin <a href="http://del.icio.us/">del.icio.us</a> ve <a href="http://digg.com/">Digg</a> gibi dev siteler olduğu bir ortamda "<span style="font-weight: bold;">kendine özgü ve yenilikçi</span>" olmak başarının tek anahtarı gibi gözüküyor ve Linkibolcular bunu çok iyi başarmış.<br /><br /><span style="font-weight: bold; color: rgb(51, 204, 0);">LİNKİBOL DA NELER YAPABİLİRİM?<br /></span><span style="color: rgb(51, 204, 0);"><span style="color: rgb(0, 0, 0);">Web de dolaşırken gördüğünüz, beğendiğiniz siteleri Browserınıza kaydeder gibi linkibola kaydedebilirsiniz ve bu linklere istediğiniz an istediğiniz yerden ulaşabilirsiniz. Ayrıca Tag'ler sayesinde diğer linkibolcuların ekledikleri linkler arasında kendi ilgi alanınıza uygun linklere direk ulaşabilirsiniz. Beğendiğiniz linklere oy verip onların listede daha üst sıralarda görüntülenmesini sağlayabilirsiniz. Web de gezinmenizi kolaylaştırır çünki, <span style="font-weight: bold;">Bazı şeyleri burda bulmak çoğu zaman Google'dan bulmakdan bile daha kolay. </span>Çünki diğer kullanıcılar tarafından adeta özenle seçilmiş ve tag'lenmiş sitelere ulaşıcaksınız. Bu tarz Social Bookmarking siteleri çoğu zaman hayatınız kolaylaştırır, bizim için Linkibol'un artısı tamamen türkçe içeriğe sahip olması. Böylece bir şekilde Google da yer alamayan Türkçe içerikli sitelere de gün doğmuş oluyor. Ayrıca linkibol sayesinde sadece bookmark yapmakla kalmaz kendi sitenizide kullanıcıların görüşüne sunabilirsiniz ve popüleritenizide artırabilirsiniz.</span></span><br /><br /><span style="font-weight: bold; color: rgb(51, 204, 0);">TEKNİK OLARAK?</span><br />Linkibol, bir programcı gözüyle bakıldığında çok güzel özeliklere sahip. öyleki saatlerdir siteyi inceliyor olmama rağmen halen "vay nekadar güzel yapmışlar" dediğim birşeylere rastlıyorum.<br />Linkibol'un server tarafında her nekadar destekçisi olmasamda başarılı olduğu aşikar olan <span style="font-weight: bold;">ASP.NET</span> çalışıyor.<br />Kullanıcı tarafında ise yine Volkan Özçeliğin kendisine ait ve gayet başarılı bulduğum <a href="http://www.sarmal.com/sardalya/"><span style="font-weight: bold;">Sardalya Dynamic Framework</span></a> destekli <span style="font-weight: bold;">JavaScript</span> var. Site Halen beta aşamasında olmasına rağmen oldukça tutarlı ve düzgün çalışıyor. Test ettiğim süre içersinde sadece bir iki önemsiz bug ile karşılaştım bu bir beta için gayet başarılı.<br />Konu <span style="font-weight: bold;">AJAX</span>'a gelince işler güzelleşiyor çünki ajax'ı öyle güzel kullanmışlarki yabancı sitelerde dahil olmak üzere gördüklerimin en iyileri arasında diyebilirim. Mesela kullanıcı hesabı oluştururken ben daha kullanıcı adı yazar yazmaz linkibol benim enter'a ya da submit'e basmamı beklemeden server'a gidip kullanıcı adının kullanıma açık olup olmadığını kontrol etti. Benim için işleri kolaylaştırdı. Site içinde linklere bakarken bütün bilgiyi bir anda yüklemeyip siteyi hızlandırdı sadece görmek istiğim kısmı yükleyip (mesela comment'ler gibi) gereksiz bütün kalablığı ordatan kaldırdı. Bana <span style="font-weight: bold;">AJAX</span> böyle kullanılmalı dedirtti tebrikler.<br />Tabi birde, Linkkibol'un çok işe yarayan Screenshot özelliğinide <a href="http://www.snap.com/">Snap Preview</a> üstlenmiş.<span style="color: rgb(51, 204, 0);"><span style="color: rgb(0, 0, 0);"><br /><br /><span style="font-weight: bold; color: rgb(51, 204, 0);">SONUÇ<br /></span><span style="color: rgb(51, 204, 0);"><span style="color: rgb(0, 0, 0);"><a href="http://linkibol.com/">Linkibol.com</a> yerliyerinde ajax kullanımı, sade tasarımı ve Tag'ler gibi özellikleri ile Web 2.0'ı yakalamış, Türkiyenin öncü sitelerinden, içeriği ise cabası. Var olan bir iki kullanışlılık hatası, Arama bölümüdeki zorluklar gibi birkaç eksiğinde BETA sürecinde onarılacağından eminim çünki linkibol oldukça hızlı gelişiyor, inanın ben bu yazıyı yazarken bile bir update yapıldı :) şahit oldum.<br />Volkan Özçelik ve varsa Ekibi :)<br />Sizi tebrik ediyor ve başarılarınızın devamını diliyorum.<br /></span></span><span style="font-weight: bold; color: rgb(51, 204, 0);"></span></span></span>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com1tag:blogger.com,1999:blog-5631421307843064249.post-56178123955462271702007-03-01T10:23:00.000+02:002007-06-20T14:49:19.111+02:00Gerçek Zamanlı Web Sayfası Düzenleme.Selam,<br />Işte size çok güzel bi kod örneği.<br />bu kod sayesinde istediğiniz websiteyi Düzenleyebilirsiniz yazıların resimlerin yerini değiştirebilirsiniz. zevkli bi oyuncak. işte kod.<br /><br /><pre class="highlighted"><code class="javascript"><br />javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);<br /></code></pre><br /><br />yapmanız gereken tek şey istediğiniz site açıkkenn bu kodu alıp Adres Çubuğuna yapıştırmak<br />enter'a bastığınızda artık o sayfayı düzenleyebilirsiniz demektir.<br /><br />bu kodu birçok WYSIWYG HTML editörleri kullanır. ben sacede browserdanda çalışabilmesi için değişiklik yaptım<br />iyi eğleneler :)Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com2tag:blogger.com,1999:blog-5631421307843064249.post-21509988065173328172007-02-22T09:15:00.000+02:002007-06-20T14:52:29.594+02:00Bütün Form elementlerini değer olarak tanıtma, extract()Merhaba,<br />Geçenlerde bir kod yazdım ve sizinle paylaşmak istedim. Bu kod body->onload event'inde çalıştırldığında bir form element'ini adeta<br /><pre class="highlighted"><code class="javascript">var textbox = document.getElementById("textbox");</code><br /></pre>şeklinde tanıtmışsınız gibi bütün elementleri yakalayıp id'lerine göre tanıtıyor.<br />Bu function'ın çok benzeri PHP'de de var yine extract ismiyle.<br />Neyse işte kod.<br /><pre class="highlighted"><code class="javascript"><br />function extract(){<br />var ie = (document.all)? "var " : "";<br />var allelems = document.body;<br />for(var x=0;x < allelems.childNodes.length;x++){<br /> if(allelems.childNodes[x].id){<br /> eval(ie + allelems.childNodes[x].id + " = document.getElementById('"+ allelems.childNodes[x].id +"');");<br /> }<br />}<br />}</code><br /></pre><br /><br />Bu fonksiyonun bazı problemleri var mesela body->onload'da luzümsüz şeyleri çalıştırmak programınızı yavaşlatabilir.<br />bunun yanında eğer form'unuzdaki elementlere id'olarak allocated isimler verdiyseniz. yani "window", "document", "if", "for", "while" gibi bu isimlerle değer tanıtmaya çalışacağından sorun yaratabilir.<br /><br />Aslında bu probleminde bir çözümü var, değerleri şu şekilde:<br /><pre class="highlighted"><code class="javascript">var textbox = document.getElementById("textbox");</code><br /></pre>tanıtmak yerine, bu şekilde tanıtın.<br /><pre class="highlighted"><code class="javascript"><br />var elems = new Array;<br />elems["textbox"] = document.getElementById("textbox");<br />elems["textbox2"] = document.getElementById("textbox2");<br /></code><br /></pre>Bu sorunu çözecektir. size formdaki bütün elementleri içeren bir associative array vericek.<br /><br />Çokta kullanışlı bir function olmadığını biliyorum. ancak bazı özel durumlarda mesela dosya boyutunu düşürmede kullanılabilir. neyse umarım işinize yarar,<br />iyi çalışmalar.Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0tag:blogger.com,1999:blog-5631421307843064249.post-82582336849029777902006-12-18T23:24:00.000+02:002008-12-11T18:42:13.424+02:00JavaScript Debugger and Trace ToolHi, people.<br />Here is the tool that i wrote it for my self,<br />i sick of using alert() and i wrote a trace tool.<br />it can show you the errors also you can use it to prompt any thing on it, just like using alert().<br />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.<br />to promp on screen just use it like alert() but call it as trace("helloworld");<br />it's quite simple. it work on almost all browsers.<br />best part is, this tool is in a floating windows so this means you can place it anywhere in your page.<br /><a style="font-weight: bold;" href="http://www.interlogy.com/%7Ecigdem/trace/">You can see the working version here</a><br />-----<br />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.<br />-----<br /><a href="http://rapidshare.com/files/11825579/trace.rar" style="font-weight: bold;">you can find the code here</a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_VEQWbnXI2PQ/RauZgwsv8vI/AAAAAAAAAC0/W5wH0Q8LKBE/s1600-h/screen.JPG"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/_VEQWbnXI2PQ/RauZgwsv8vI/AAAAAAAAAC0/W5wH0Q8LKBE/s320/screen.JPG" alt="" id="BLOGGER_PHOTO_ID_5020274997742007026" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_VEQWbnXI2PQ/RauZqQsv8wI/AAAAAAAAAC8/fxSxfRWL-CQ/s1600-h/screen2.JPG"> <img style="cursor: pointer;" src="http://2.bp.blogspot.com/_VEQWbnXI2PQ/RauZqQsv8wI/AAAAAAAAAC8/fxSxfRWL-CQ/s320/screen2.JPG" alt="" id="BLOGGER_PHOTO_ID_5020275160950764290" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_VEQWbnXI2PQ/RYnF_hkVETI/AAAAAAAAACY/9wM9JuFXKUM/s1600-h/screen1.PNG"><br /></a>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0tag:blogger.com,1999:blog-5631421307843064249.post-67272708682254763732006-12-06T23:48:00.000+02:002008-12-11T18:42:13.765+02:00Color Picker, Basit bir renk seçme aracı<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_VEQWbnXI2PQ/RXc-AWarzDI/AAAAAAAAABw/XBfIAC8xQhk/s1600-h/screen.JPG"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_VEQWbnXI2PQ/RXc-AWarzDI/AAAAAAAAABw/XBfIAC8xQhk/s400/screen.JPG" alt="" id="BLOGGER_PHOTO_ID_5005537686584020018" border="0" /></a><br />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 :)<br /><br /><br />Örnek kod için <a href="http://rapidshare.com/files/6380654/color.zip.html">buraya </a>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0tag:blogger.com,1999:blog-5631421307843064249.post-22057215900127827092006-12-06T22:52:00.000+02:002008-12-11T18:42:14.002+02:00Rating 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.<br />İşlem oldukça basit.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_VEQWbnXI2PQ/RXcuS2ary-I/AAAAAAAAABI/L8sd6T1-LRE/s1600-h/star3.gif"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/_VEQWbnXI2PQ/RXcuS2ary-I/AAAAAAAAABI/L8sd6T1-LRE/s400/star3.gif" alt="" id="BLOGGER_PHOTO_ID_5005520412225555426" border="0" /></a><br />Öncelikle yıldız resimlerinin içinde bulunacağı bir table yapmalıyız.<br /><br /><pre class="highlighted"><code class="javascript"><br /><table id="starTable" width="75" height="15" border="0" cellpadding="0" cellspacing="0" background="star0.gif" onMouseOut="resetRate(this)"><br /><tr><br /> <td width="15" height="15" onMouseOver="changeRate('1')" onClick="rate(this,'1')"></td><br /> <td width="15" onMouseOver="changeRate('2')" onClick="rate(this,'2')"></td><br /> <td width="15" onMouseOver="changeRate('3')" onClick="rate(this,'3')"></td><br /> <td width="15" onMouseOver="changeRate('4')" onClick="rate(this,'4')"></td><br /> <td width="15" onMouseOver="change('5')" onClick="rate(this,'5')"></td><br /></tr><br /></table><br /></code></pre><br /><span style="font-size:100%;">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.<br />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.<br />Şimdi kod'a dikkat ettiyseniz 3 adet function görürsünüz<br />bunlar<br /></span><span style="font-weight: bold;font-size:100%;" >changeRate()<br /></span><span style="font-weight: bold;font-size:100%;" >rate()<br /></span><span style="font-weight: bold;font-size:85%;" ><span style="font-size:100%;">resetRate()</span><br /></span><span style="font-size:100%;">Ayrıca table'a birde background-image verdim bu image sıfır rating'i temsil ediyor.</span><span style="font-weight: bold;font-size:85%;" ><br /></span>functionların Şimdi hepsini bir bir açıklayalım Örnek kodu'da altta<br /><pre class="highlighted"><code class="javascript"><br />function changeRate(val){<br /> document.getElementById('starTable').style.backgroundImage = "url(star"+val+".gif)";<br />}<br /><br />function rate(val){<br /> document.getElementById('rated').value = val;<br />}<br /><br />function resetRate(elem){<br /> var val = document.getElementById('rated').value;<br /> if(val == "")<br /> elem.style.backgroundImage="url(star0.gif)";<br /> else<br /> elem.style.backgroundImage="url(star"+val+".gif)";<br />}<br /></code></pre><span style="font-weight: bold;">onMouseMove</span> event'inde çağırdığımız <span style="font-weight: bold;">changeRate</span> function'ı mouse'u üzerine getirdiğimiz <span style="font-weight: bold;">TD</span>'ye göre Table'ın background image'ını değiştiriyor. buda yıldızların dolma boşalma efektini oluşturuyor.<br />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<br />star0.gif<br />star1.gif<br />star2.gif<br />vs.<br />hangi rating verildiyse<br />"star"+val+".gif"<br />diyerek sadece bir seferde if kullanmadan resimlere ulaşabiliyoruz.<br />bu tarz dosya isimleri çoğu zaman hayat kurtarır.<br />---<br /><span style="font-weight: bold;">onMouseClick</span> event'inde çağırdığımız <span style="font-weight: bold;">rate</span> function'ı tek değer alıyor. buda rating değeri.<br />function basitçe kendisine gönderilen değeri bir <span style="font-weight: bold;">textbox</span>'ı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.<br />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.<br /><span style="font-size:85%;"><blockquote>Rating:<br /><input type="text" id="rated" /></blockquote></span><br />---<br />Üçüncü ve son functionda <span style="font-weight: bold;">resetRate</span> 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 <span style="font-weight: bold;">onMouseOut</span> event'ine koyduk ki mouse terk ettiğinde çalışsın.<br />function direkt <span style="font-weight: bold;">textbox</span>'ı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 <span style="font-weight: bold;">changeRate</span>'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.<br />--<br />kodlar gayet basit olduğuiçin istediğiniz gibi düzenleyebilirsiniz. Örnek kod için <a href="http://rapidshare.com/files/6379330/star.zip.html">buraya</a>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com3tag:blogger.com,1999:blog-5631421307843064249.post-7830772439640245552006-12-05T22:29:00.000+02:002007-06-20T14:59:08.291+02:00Aktif CSS DeğiştirmeWeb sitenize eklediğiniz CSS sheet'leri aktif olarak değiştirerek ziyaretçilerinizin farklı temaları <span style="font-weight: bold;">sayfa yenilenmeden</span> görebilmelerini sağlamak istermisiniz? bu yazıda bunu nasıl yapabileceğinizi anlatacağım.<br /><span style="font-weight: bold;">Java script</span>, <span style="font-weight: bold;">CSS</span>, ve <span style="font-weight: bold;">HTML</span> 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.<br />Şimdi başlayalım.<br /><span style="font-size:130%;"><span style="font-weight: bold;">Örnek Dosya için </span><a style="font-weight: bold;" href="http://rapidshare.com/files/6243461/cssSwitch.rar.html">buraya</a><br /><br /></span> Ö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ı (<span style="color: rgb(102, 102, 102);">her iyi sitede olması gerektiği gibi</span>). ş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.<br />Style sheet'i sayfaya linklediğimiz tag'e fazladan bir "ID" ekledim böylece javascript ile ona ulaşabileceğiz.<br /><blockquote style="color: rgb(0, 0, 153);"><link href="style1.css" id="stil" rel="stylesheet" type="text/css" /></blockquote>Şimdi birde basitçe HTML kodumuza bakalım, bu kodu body tag'inin içine yerleştirelim.<br /><pre class="highlighted"><code class="tml"><br /><div class="header">Bilgi Formu</div><br /><table width="260" border="0" cellpadding="5" cellspacing="0" class="mtable"><br /><tr><br /> <td width="70">&#304;sim:</td><br /> <td width="175"><input name="ism" type="text" class="elem" /></td><br /></tr><br /><tr><br /> <td>Soyisim:</td><br /> <td><input name="soyisim" type="text" class="elem" /></td><br /></tr><br /><tr><br /> <td>Tel:</td><br /> <td><input name="tel" type="text" class="elem" /></td><br /></tr><br /><tr><br /> <td valign="top">Adres:</td><br /> <td><textarea name="adres" rows="5" cols="20" class="elem"></textarea></td><br /></tr><br /><tr><br /> <td>Stil:</td><br /> <td><br /> <select name="select" class="elem" onchange="changeStyle(this)"><br /> <option>style1</option><br /> <option>style2</option><br /> <option>style3</option><br /> </select> </td><br /></tr><br /><tr><br /> <td colspan="2" align="center"><br /> <input type="button" value="Ok" class="btn" /><br /> <input type="reset" value="clear" class="btn" /><br /> </td><br /></tr><br /></table><br /></code></pre><br />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 <span style="font-weight: bold;">this</span> kullanarak yolladımki bizi birdaha onu çağırmakla uğraştırmasın<br />Şimdi bu function kısaca şunu yapıyor select'in seçili değerinin sonuna <span style="color: rgb(255, 0, 0);">".css"</span> ekleyip bir dosya ismine çeviriyor ve style link'inin bunu çağırmasını sağlıyor.<br />ben kolay olduğu için bu yöntemi seçtim isteyen <span style="font-weight: bold;">if</span> ile check edip istediği ismi çağıradabilir yani <span style="font-style: italic;">select'in değerlerini isme dönüştürmek zorunda değilsiniz</span> yada <span style="font-style: italic;">select kullanmak zorundada değilsiniz</span>. bu sadece bir örnek, neyse.<br />Function'da kısaca şöyle bu function'da sayfanızın HEAD kısmında, Script tag'inin içinde bulunmalı<br /><pre class="highlighted"><code class="javascript"><br />function changeStyle(elem){<br /> var stylelink = document.getElementById('stil');<br /> stylelink.href = elem.options[elem.selectedIndex].text + ".css";<br />}<br /></code></pre><br /><br />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.<br /><br />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.<span style="font-size:130%;"><span style="font-weight: bold;"><br /></span><a style="font-weight: bold;" href="http://rapidshare.com/files/6243461/cssSwitch.rar.html"></a></span>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com1tag:blogger.com,1999:blog-5631421307843064249.post-84928609091066363882006-12-04T09:55:00.000+02:002008-12-11T18:42:14.787+02:00Jotform.com<div style="text-align: justify;">Sonzamanlarda<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_VEQWbnXI2PQ/RXPfPAJTmtI/AAAAAAAAAA8/MAwLVmu5aPk/s1600-h/jotform.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://1.bp.blogspot.com/_VEQWbnXI2PQ/RXPfPAJTmtI/AAAAAAAAAA8/MAwLVmu5aPk/s200/jotform.jpg" alt="" id="BLOGGER_PHOTO_ID_5004589059768818386" border="0" /></a> sürekli üzerinde çalıştığım site <a href="http://www.jotform.com/">Jotform.com</a>. Ş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<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_VEQWbnXI2PQ/RXPblAJTmrI/AAAAAAAAAAc/0pzJQqm7bqw/s1600-h/jotform_2.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="http://1.bp.blogspot.com/_VEQWbnXI2PQ/RXPblAJTmrI/AAAAAAAAAAc/0pzJQqm7bqw/s200/jotform_2.jpg" alt="" id="BLOGGER_PHOTO_ID_5004585039679429298" border="0" /></a> 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ır<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_VEQWbnXI2PQ/RXPb1QJTmsI/AAAAAAAAAAk/n-huo__LrTE/s1600-h/jotform_3.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://2.bp.blogspot.com/_VEQWbnXI2PQ/RXPb1QJTmsI/AAAAAAAAAAk/n-huo__LrTE/s200/jotform_3.jpg" alt="" id="BLOGGER_PHOTO_ID_5004585318852303554" border="0" /></a>ken 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 <span style="font-weight: bold;">Aytekin TANK</span>'ın Blog'una <a href="http://atank.interlogy.com/blog/">buradan erişebilirsiniz.</a> Ş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. <a href="http://www.jotform.com/">Jotform'u bir kere mutlaka deneyin eminim çok işinize yarıyacak.</a><br /></div>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com4