Native hashchange event - Good bye polling

I just discovered that there is a native HashChange event in the latest version of several browsers (FF, Webkit, IE) - this way navigation solutions working with the hash at the end of a URL work without nasty timers.

To add the event, simply use:

if ( window.addEventListener ) {

window.addEventListener( 'hashchange', function () { checkHashChange(location.hash) }, false );

} else if ( window.attachEvent ) {

window.attachEvent( 'onhashchange' , function () { checkHashChange(location.hash) } );

}

Take a look at these samples as well. In real world applications you still will need to use a combination of both methods (polling + events).

Concerning the support of the feature in various browsers, please click here for a comparison chart.

Silent Setup of Sun JDK (Linux, Debian)

I was looking for a way to install the latest Java Runtime Environment without any user interaction and came across this posting

Here's a tips I found trying to do the same as you :
1. Create an answers.txt file with the word yes inside
2. Launch fhe following command (assuming you want to install jdk-xx.bin)
./jdk-xx.bin <>/dev/null

Works like a charm!

Add missing Array.indexOf to Internet Explorer

When dealing with JSON it comes in handy to get the position of a certain string in an array, image an array with column names returned by a SerializeJSON'ed CFQUERY.

Internet Explorer does not support this function, but just add the following snippet and you can use Array.indexOf( 'TITLE' ) in any browser without built-in support as well (We add a new function to the Array prototype!)

// make sure indexOf is supported
if(!Array.indexOf){
   Array.prototype.indexOf = function(obj, start){
       for(var i=(start||0); i<this.length; i++){
           if(this[i]==obj){
               return i;
           }
       }
   }
}

JavaScript variables set in onclick - different behaviour in IE / FF

I recently discovered that the behaviour of internet explorer and Firefox is quite different when it comes to settings variables in an onClick event - in Firefox these variables will become global variables, in IE they are just "local" and will nur be available for other functions.

An example:

a onClick="variableA = 'peter';CallFunction();return false;" ...

function CallFunction() {
alert(variableA);
}

In FF, an alert box will show "Peter", in IE you'll receive an exception.

How to solve that? Simply declare variableA on top of your JavaScript file, this way IE will modify the global variable.

var variableA = '';

XML vs JSON: Incredible performance differences

I admit - I am a real fan of XML and try to use this format whenever it is possible. The reason is simple: It's a clear format and very easy to exchange data with other applications (also with applications not running in a browser).
During the finalization of a project we came across several performance problems with a huge dataset and I tried to move the data interaction to JSON.
The result: The time of parsing a XML with jQuery (loop over the element using each) was up to 100 times higher than doing a simple JSON request (According to the results of the firebug console.timer output). No special treatment, just looping over the records and building an array in javaScript using the default jQuery way.

So, I hope in future times XML parsing will speed up with faster computers (although I think there will be not much gain in the near future because browser XML parsers just use MSXML or Xerces right now).
If you do not have ColdFusion 8 (which offers built-in JSON support), you might take a look at this library.

escape vs encodeURIComponent

As long as you pass on only A-Z, 0-9 and so on to javaScript functions, encoding with escape is the proper method. As an Austrian company we have to deal with umlaute (special characters) a lot, however. Therefore in this situation encodeURIComponent is the best choice. Here you can find a good explanation and some examples concerning the differences.

jQuery 1.2 released

Yeasterday a new version of jQuery has been released (1.2). If you ever have to deal with JavaScript in your application in a professional way, give this library a try. It's sooo smooth and I prefer this one very very much over prototype.

So, what's the big deal of this tiny (22kb) little .js file?
The design of the library is just gorgeous. The basic principle is very simple:

1. Select the desired objects
2. Perform some action on them

Sounds simple, hmm? The power of the system can be shown in some short example:
$('#this_is_the_id').hide();
In this case an object with the ID this_is_the_id is selected and hidden.

$("#orderedlist > li").addClass("blue");
I this example, the CSS class "blue" is added to all child elements of an ordered list.

$(document).ready(function() {
...
}


Here some code can be placed which is executed as soon as the DOM structure of the document has finished loading - so no more onLoad events which can have a huge delay because of e.g. external images or advertising stuff.

Here you can find some more tutorials on this.

Thanks to Ben for his posting about the new release. He also mentions his fear about getting lazy in writing real hardcore JS stuff, but my opinion is goes ahead with the the jQuery credo in this case: Write less, do more!