New Version of Javascript Debugger and Trace tool

Hi,
I finally finished my project, my very own tool, my favourite application.
Javascript Debugger and Trace tool The Trace.



= ONLINE DEMO & DOWNLOAD =

OK here is the detailed explanation

Introduction

JavaScript Tracer Tool simply covers the the function of alert(); 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.

Using the code

Tracer is a very useful application. Because, to make it work you just only have to call the trace.js file. It will run by itself.

<script type="text/javascript" src="trace.js"></script>

Here is a list of functions Tracer has. Just give them the particular elements.

• trace(): in your application you just use it as trace("hello world");, instead of alert("Hello World");. Tracer will print the result with numbering and coloring. trace() also have another format to use, trace("arg1","arg2","arg3") 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.
• traceArr(): this function displays the each element of an array with their positions.
• traceAssoc(): 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.
• traceStr(): This function is almost the same as traceArr() but it works for strings shows you the each character of a string with numbers.
• traceError()This function is for custom error messages. very suitable for Try, Catch blocks.
• RunJS tab: is for Running the JavaScript codes realtime on the page.
• Watch: 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. Watch can catch more than one Element.
• Tracer also catches the runtime errors 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.
• Also, whole Tracer body is floating, that means you can move it where you want. Tracer can remember last position, last state, last tab and last setting by using cookies.

You can find more helpful information on the Online Demo page.

Search Bookmarklets

Hi, I wanted to share my "search bookmarks" with you,
These are very easy to use search functions

//Prototype API
javascript:w=prompt('Search Prototype API');if(w){w=w.replace(/\./g, '/');window.location.href='http://prototypejs.org/api/'+w.toLowerCase();}else void(0);
//PHP REFERENCE
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);
//Answers.com
javascript:w=prompt('Answers.com');if(w){w=w.replace(/\./g, '/');window.location.href='http://www.answers.com/'+w.toLowerCase();}else void(0);
//script.aculo.us
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);
//wikipedia
javascript:w=prompt('Wikipedia.org');if(w){w=w.replace(/\./g, '/');window.location.href='http://en.wikipedia.org/wiki/'+w.toLowerCase();}else void(0);

Its pretty easy to use them just drag-and-drop these links BELOW to you bookmarks toolbar (in every browser, especially in FIREFOX)
Here is the links.

Prototype API
PHP Reference
Answers.com
script.aculo.us
wikipedia

also you can make your own search bookmarks just examine the code.
However, if you need help, feel free to ask.
Have Nice Dayy...

Alternative PNG Support for IE6

Hi,
If you are looking for an alternative PNG support for IE6 here is a piece of code.
to use this code you will need the blank.gif
a transparent gif image.

only thing you have to do is,
simply put this function in to your application.
The real matter is calling the function

function pngImages(){
if(document.all){
for(x=0;x < arguments.length;x++){
    elm = document.getElementById(arguments[x]);
    elm.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='" + elm.src + "')";
    elm.src = "images/blank.gif";
  }
}
}

function should be called after all image elements loaded, or on the body->onload event.

What you have to do is send function a string which is containing the IDs of png images. like this,

pngImages("logo","faq","blog","about","shadws","bckgrd");

Real-Time Page Editting on Browser.

Hi,
Here is a great piece of code to edit any page you want on browser.

javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);

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.

this is a code that most of the WYSIWYG HTML editors uses. I just made is usable for browsers.

Enjoy!!!.

Extracting all the elements as veraibles ( javascript extract )

hi,
i wrote a code recently that extracts all the id's of the objects as a variables.
ones
you run this function on body->onLoad it gets all the elements and
defines them by giving them their ids as variable names. function acts
like:

var textbox = document.getElementById("textbox");

for all the elements, it gives you the opportunity of using all of them without even defining.
this function has an equal in PHP(a bit different but it's about the same)
anyway here is the code:

function extract(){
var ie =(document.all)? "var " : "";
var allelems = document.body;
for(var x=0;x < allelems.childNodes.length;x++){
  if(allelems.childNodes[x].id){
   eval(ie + allelems.childNodes[x].id + " = document.getElementById('"+ allelems.childNodes[x].id +"');");
  }
}
}

This
function has some problems first one is, it's not a good thing to run
any unnecessary functions at the onload event. it can cause slowing
down.
Secondly it can cause some problems if you give your elements
the allocated names such as, "for","while","if","document" or "window"
as an ID.
In fact this problem can be solved by modifying the code to make it act like
not define the variables as

  var textbox = document.getElementById("textbox");

but define them as

var elems = new Array();
elems["textbox"] = document.getElementById("textbox");
elems["textbox2"] = document.getElementById("textbox2");

this
will solve the problem. if you use the function like this you will have
an associative array that contains all the elements.

I know, it's not "so" useful but in some specific situations it might be really useful like downsizing the file size.
any way, i hope it will be useful, see you later.

Rating Stars, Add Star themed Rating measure to your site

Hi, here is a example of, how to add rating stars on your site.
By using this codes, you can simply add your site, this tiny little rating stars. :)

Proccess is quite easy
First we have to create a 5 X 1 table which has a background of star pictures.

<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>

It seems like each TD 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.

i set the default background of the table. this background represents the zero rating points.

If you'll pay attention to the Code you'll se three different functions such as,
changeRate()
rate()
resetRate()
let's explain the each function. here is the sample code.

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)";
}

In the onMouseMove event the function we call changeRate() changes the backgroun d image, when we mouseover on particular TD this function creates the effect of the changing stars.
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,
star0.gif
star1.gif
star2.gif
etc.
For each rating, "file name" increases . so we can use them like this in our Script.
"star"+val+".gif"
this proccess keep us away from a lot of work.
---
on the onMouseClick event we call rate() function it has only one argument which is rating value. This function takes the argument and puts it into a textbox. 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.
simply this function is the only place you have to edit.
Also you can use Hidden field intead of textbox it will be more appropriate.
I used text box because this is a demo :)
---
The last function is resetRate()
when the mouse lefts the table, it should remember what was selected. this function simply does that.
function directly checks the value of the textbox (or hidden box) that we create, if the value is NULL function simply puts the image ZERO, but if is there any values in it, function does the same thing of the changeRate function does.
--
the Codes are really simple so you can edit them whatever you like
for the source codes Click Here
I hope this will be helpful for you.

Personal DNA

I recently find a web site that takes you a test about your personality.
results are impressive.
also site gives a graphical presentation of your personality.
Just Mouse over the Colors.


And if you want to see my whole report

My Personal Dna Report