tag:blogger.com,1999:blog-357835202024-02-20T08:23:10.407-08:00It's Not Java, It's JavaScript..Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-35783520.post-59960112019012876042007-03-15T13:42:00.000-07:002007-05-07T00:06:49.982-07:00New Version of Javascript Debugger and Trace tool<span style="font-family:trebuchet ms;">Hi,</span><br /><span style="font-family:trebuchet ms;">I finally finished my proje</span><span style="font-family:trebuchet ms;">ct, my very own tool, my favourite application.</span><br /><span style="font-family:trebuchet ms;">Javascript Debugger and Trace tool </span><span style="font-weight: bold;font-family:trebuchet ms;" >The Trace.<br /></span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp3.blogger.com/_VEQWbnXI2PQ/Rfm25bOzywI/AAAAAAAAADs/mZtbeLGQfPI/s1600-h/js_tracer.jpg"><img style="cursor: pointer;" src="http://bp3.blogger.com/_VEQWbnXI2PQ/Rfm25bOzywI/AAAAAAAAADs/mZtbeLGQfPI/s200/js_tracer.jpg" alt="" id="BLOGGER_PHOTO_ID_5042262355496651522" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp2.blogger.com/_VEQWbnXI2PQ/Rfm29LOzyxI/AAAAAAAAAD0/y96neZc44Vw/s1600-h/js_tracer2.jpg"><img style="cursor: pointer;" src="http://bp2.blogger.com/_VEQWbnXI2PQ/Rfm29LOzyxI/AAAAAAAAAD0/y96neZc44Vw/s200/js_tracer2.jpg" alt="" id="BLOGGER_PHOTO_ID_5042262419921160978" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp0.blogger.com/_VEQWbnXI2PQ/Rfm3ArOzyyI/AAAAAAAAAD8/HQlgxzZ55uU/s1600-h/js_tracer3.jpg"><img style="cursor: pointer;" src="http://bp0.blogger.com/_VEQWbnXI2PQ/Rfm3ArOzyyI/AAAAAAAAAD8/HQlgxzZ55uU/s200/js_tracer3.jpg" alt="" id="BLOGGER_PHOTO_ID_5042262480050703138" border="0" /></a><br /><br /><a style="font-weight: bold; font-family: trebuchet ms;" href="http://interlogy.com/%7Ecigdem/trace/">= ONLINE DEMO & DOWNLOAD = </a><br /><br /><span style="font-family:trebuchet ms;">OK here is the detailed explanation </span><span style="font-weight: bold;font-family:trebuchet ms;" ><br /></span><h2 style="font-family: trebuchet ms; color: rgb(204, 153, 51);">Introduction</h2> <p style="font-family: trebuchet ms;">JavaScript Tracer Tool simply covers the the function of <code>alert();</code> but i took it one step forward and added some other functions to make it more useful. This application gives you the opportunity of continuously debugging and seeing each and every steps of your application. Without even adding any irrelevant code to your own application.</p> <h2 style="font-family: trebuchet ms; color: rgb(204, 153, 51);">Using the code</h2> <p style="font-family: trebuchet ms;">Tracer is a very useful application. Because, to make it work you just only have to call the <i>trace.js</i> file. It will run by itself.</p> <pre class="codes"><span style="color: rgb(102, 102, 102);"><script</span> <span style="font-weight: bold;">type=</span><span style="color: rgb(51, 0, 153);">"text/javascript"</span> <span style="font-weight: bold;">src=</span><span style="color: rgb(51, 0, 153);">"trace.js"</span><span style="color: rgb(102, 102, 102);">></script></span></pre>Here is a list of functions Tracer has. Just give them the particular elements. <ul style="font-family: trebuchet ms;"><li><code style="color: rgb(51, 0, 153);">trace()</code>: in your application you just use it as <code style="color: rgb(51, 0, 153);">trace("hello world");</code>, instead of <code style="color: rgb(255, 0, 0);">alert("Hello World");</code>. Tracer will print the result with numbering and coloring. <code style="color: rgb(51, 0, 153);">trace()</code> also have another format to use, <code style="color: rgb(51, 0, 153);">trace("arg1","arg2","arg3")</code> in this option you just only give the values as arguments it will number them and print in order. this is useful to print function arguments. </li><li><code style="color: rgb(51, 0, 153);">traceArr()</code>: this function displays the each element of an array with their positions. </li><li><code style="color: rgb(51, 0, 153);">traceAssoc()</code>: This function is for associative arrays. If you give this function an array it will show you the key and the value of each array element. </li><li><code style="color: rgb(51, 0, 153);">traceStr()</code>: This function is almost the same as <code style="color: rgb(51, 0, 153);">traceArr()</code> but it works for strings shows you the each character of a string with numbers. </li><li><code style="color: rgb(51, 0, 153);">traceError()</code>This function is for custom error messages. very suitable for <strong>Try, Catch</strong> blocks. </li><li><strong>RunJS tab:</strong> is for Running the JavaScript codes <strong>realtime</strong> on the page. </li><li><strong>Watch: </strong>When you write the ID of an Object in text box, watch follows that elements content and prompts on screen. It's quite useful for hidden elements and automatically changing values. <strong>Watch can catch more than one Element</strong>. </li><li>Tracer also catches the <strong>runtime errors</strong> and displays them with the file name and line numbers. This feature is really useful for IE users. Error handling is optional, you can stop handling in settings tab. </li><li>Also, whole Tracer body is <strong>floating</strong>, that means you can move it where you want. Tracer can <strong>remember</strong> last position, last state, last tab and last setting by using <strong>cookies.</strong> </li></ul> <p style="font-family: trebuchet ms;"> </p><span style="font-weight: bold;font-family:trebuchet ms;" ><br /></span> <p>You can find more helpful information on the <a href="http://interlogy.com/%7Ecigdem/trace/">Online Demo</a> page.</p>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com1tag:blogger.com,1999:blog-35783520.post-73081238950133200172007-03-07T23:44:00.000-08:002007-06-20T04:22:54.756-07:00Search BookmarkletsHi, I wanted to share my "search bookmarks" with you,<br />These are very easy to use search functions<br /><pre class="highlighted"><br /><code class="javascript"><br />//Prototype API<br />javascript:w=prompt('Search Prototype API');if(w){w=w.replace(/\./g, '/');window.location.href='http://prototypejs.org/api/'+w.toLowerCase();}else void(0);<br />//PHP REFERENCE<br />javascript:w=prompt('PHP REFERENCE...');if(w){w=w.replace(/\./g, '/');window.location.href='http://tr2.php.net/manual-lookup.php?pattern='+w.toLowerCase();}else void(0);<br />//Answers.com<br />javascript:w=prompt('Answers.com');if(w){w=w.replace(/\./g, '/');window.location.href='http://www.answers.com/'+w.toLowerCase();}else void(0);<br />//script.aculo.us<br />javascript:w=prompt('script.aculo.us');if(w){w=w.replace(/\./g, '/');window.location.href='http://wiki.script.aculo.us/scriptaculous/search/?page%5Bname%5D='+w.toLowerCase();}else void(0);<br />//wikipedia<br />javascript:w=prompt('Wikipedia.org');if(w){w=w.replace(/\./g, '/');window.location.href='http://en.wikipedia.org/wiki/'+w.toLowerCase();}else void(0);<br /></code><br /></pre><br /><br /><br />Its pretty easy to use them just drag-and-drop these links <span style="font-weight: bold;">BELOW</span> to you bookmarks toolbar (in every browser, especially in FIREFOX)<br />Here is the links.<br /><br /><a href="javascript:w=prompt('Search Prototype API');if(w){w=w.replace(/\./g, '/');window.location.href='http://prototypejs.org/api/'+w.toLowerCase();}else void(0);">Prototype API</a><br /><a href="javascript:w=prompt('PHP REFERENCE...');if(w){w=w.replace(/\./g, '/');window.location.href='http://tr2.php.net/manual-lookup.php?pattern='+w.toLowerCase();}else void(0);">PHP Reference</a><br /><a href="javascript:w=prompt('Answers.com');if(w){w=w.replace(/\./g, '/');window.location.href='http://www.answers.com/'+w.toLowerCase();}else void(0);">Answers.com</a><br /><a href="javascript:w=prompt('script.aculo.us');if(w){w=w.replace(/\./g, '/');window.location.href='http://wiki.script.aculo.us/scriptaculous/search/?page%5Bname%5D='+w.toLowerCase();}else void(0);">script.aculo.us</a><br /><a href="javascript:w=prompt('Wikipedia.org');if(w){w=w.replace(/\./g, '/');window.location.href='http://en.wikipedia.org/wiki/'+w.toLowerCase();}else void(0);">wikipedia</a><br /><br />also you can make your own search bookmarks just examine the code.<br />However, if you need help, feel free to ask.<br />Have Nice Dayy...Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0tag:blogger.com,1999:blog-35783520.post-25809028259735147432007-03-06T06:37:00.000-08:002007-06-20T04:30:57.592-07:00Alternative PNG Support for IE6Hi,<br />If you are looking for an alternative PNG support for IE6 here is a piece of code.<br />to use this code you will need the <a href="http://www2.blogger.com/img/blank.gif">blank.gif</a><br />a transparent gif image.<br /><br />only thing you have to do is,<br />simply put this function in to your application.<br />The real matter is calling the function<br /><br /><pre class="highlighted"><br /><code class="javascript"><br />function pngImages(){<br />if(document.all){<br />for(x=0;x < arguments.length;x++){<br /> elm = document.getElementById(arguments[x]);<br /> elm.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='" + elm.src + "')";<br /> elm.src = "images/blank.gif";<br /> }<br />}<br />}<br /></code><br /></pre><br /><br /><br />function should be called after all image elements loaded, or on the body->onload event.<br /><br />What you have to do is send function a string which is containing the IDs of png images. like this,<br /><pre class="highlighted"><code class="javascript"><br />pngImages("logo","faq","blog","about","shadws","bckgrd");<br /></code><br /></pre>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0tag:blogger.com,1999:blog-35783520.post-39901027626622328802007-03-01T00:43:00.001-08:002007-06-20T04:35:03.401-07:00Real-Time Page Editting on Browser.Hi,<br />Here is a great piece of code to edit any page you want on browser.<br /><br /><pre class="highlighted"><code class="javascript"><br />javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);<br /></code></pre><br /><br />Just copy this code to the Address bar. when you hit enter you'll get the ability of editing the content of the current web page.<br /><br />this is a code that most of the WYSIWYG HTML editors uses. I just made is usable for browsers.<br /><br />Enjoy!!!.Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0tag:blogger.com,1999:blog-35783520.post-44463395608895894362007-02-11T23:27:00.000-08:002007-06-20T04:39:37.176-07:00Extracting all the elements as veraibles ( javascript extract )hi,<br />i wrote a code recently that extracts all the id's of the objects as a variables.<br />ones<br />you run this function on body->onLoad it gets all the elements and<br />defines them by giving them their ids as variable names. function acts<br />like:<br /><pre class="highlighted"><br /><code class="javascript"><br />var textbox = document.getElementById("textbox");<br /></code><br /></pre><br />for all the elements, it gives you the opportunity of using all of them without even defining.<br />this function has an equal in PHP(a bit different but it's about the same)<br />anyway here is the code:<br /><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 />}<br /><span style="color: rgb(51, 0, 153);"><br /><br /></span></code></pre>This<br />function has some problems first one is, it's not a good thing to run<br />any unnecessary functions at the onload event. it can cause slowing<br />down.<br />Secondly it can cause some problems if you give your elements<br />the allocated names such as, "for","while","if","document" or "window"<br />as an ID.<br />In fact this problem can be solved by modifying the code to make it act like<br />not define the variables as<br /><pre class="highlighted"><code class="javascript"><br /> var textbox = document.getElementById("textbox");<br /></code></pre>but define them as<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>this<br />will solve the problem. if you use the function like this you will have<br />an associative array that contains all the elements.<br /><br />I know, it's not "so" useful but in some specific situations it might be really useful like downsizing the file size.<br />any way, i hope it will be useful, see you later.Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0tag:blogger.com,1999:blog-35783520.post-76302455771915812522007-01-25T08:47:00.000-08:002007-06-20T04:47:27.430-07:00Rating Stars, Add Star themed Rating measure to your siteHi, here is a example of, how to add rating stars on your site.<br />By using this codes, you can simply add your site, this tiny little rating stars. :)<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp3.blogger.com/_VEQWbnXI2PQ/RXcuS2ary-I/AAAAAAAAABI/L8sd6T1-LRE/s1600-h/star3.gif"><img style="cursor: pointer;" src="http://bp3.blogger.com/_VEQWbnXI2PQ/RXcuS2ary-I/AAAAAAAAABI/L8sd6T1-LRE/s400/star3.gif" alt="" id="BLOGGER_PHOTO_ID_5005520412225555426" border="0" /></a><br />Proccess is quite easy<br />First we have to create a 5 X 1 table which has a background of star pictures.<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><span style="font-size:100%;"><br />It seems like each <span style="font-weight: bold;">TD</span> has a one particular background, but it's not like that, there are 6 pictures to define 0,1,2,3,4,5 rating points. by this way, it gets more easy to do this.<br /></span><span style="font-size:100%;"><br />i set the default background of the table. this background represents the zero rating points.</span><br /><span style="font-size:100%;"><br />If you'll pay attention to the Code you'll se three different functions such as,<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>let's explain the each function. here is the sample code.<br /><pre class="highlighted"><code class="javascript"><br /><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> In the <span style="font-weight: bold;">onMouseMove </span>event the function we call <span style="font-weight: bold;">changeRate()</span> changes the backgroun d image, when we mouseover on particular <span style="font-weight: bold;">TD</span> this function creates the effect of the changing stars.<br />it gets the TD id and sets' the background by this id. this is a easy step because we gave images a smart filenames such as,<br />star0.gif<br />star1.gif<br />star2.gif<br />etc.<br />For each rating, "file name" increases . so we can use them like this in our Script.<br />"star"+val+".gif"<br />this proccess keep us away from a lot of work.<br />---<br />on the <span style="font-weight: bold;">onMouseClick</span> event we call <span style="font-weight: bold;">rate()</span> function it has only one argument which is rating value. This function takes the argument and puts it into a <span style="font-weight: bold;">textbox</span>. We have to keep the selected rating value in some where so we can remember what was selected. Also we can POST or GET the value by this proccess. This function is most important function because when you want to implement this tool into your application or your site, the rating proccess will be in this function. You can call AJAX functions or directly go to the server in this function.<br />simply this function is the only place you have to edit.<br />Also you can use Hidden field intead of textbox it will be more appropriate.<br />I used text box because this is a demo :)<br />---<br />The last function is <span style="font-weight: bold;">resetRate()</span><br />when the mouse lefts the table, it should remember what was selected. this function simply does that.<br />function directly checks the value of the <span style="font-weight: bold;">textbox</span> (or hidden box) that we create, if the value is <span style="font-weight: bold;">NULL</span> function simply puts the image ZERO, but if is there any values in it, function does the same thing of the <span style="font-weight: bold;">changeRate</span> function does.<br />--<br />the Codes are really simple so you can edit them whatever you like<br />for the source codes <a href="http://rapidshare.com/files/13349950/star.zip">Click Here</a><br />I hope this will be helpful for you.Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com8tag:blogger.com,1999:blog-35783520.post-10564440768272569732007-01-25T00:10:00.000-08:002007-05-07T00:13:26.918-07:00Personal DNAI recently find a web site that takes you a test about your personality.<br />results are impressive.<br />also site gives a graphical presentation of your personality.<br />Just Mouse over the Colors.<br /><script src="http://personaldna.com/t/?k=iquxOPuhkcpONZY-GN-DDAAA-1331&t=Attentive+Inventor"> </script><br /><br />And if you want to see my whole report<br /><a href="http://www.personaldna.com/report.php?k=iquxOPuhkcpONZY-GN-DDAAA-1331"><br />My Personal Dna Report</a>Serkan Yerşenhttp://www.blogger.com/profile/15826188140482451702noreply@blogger.com0