What is a Javascript Library?

Anyone who’s ever done serious coding with Javascript knows that to get code to work cross-browser is a nightmare. Internet Explorer likes one way, Safari another, and Firefox another. It can be quite time consuming. This is where the Javascript libraries come to save the day! Hurray! Javascript libraries take the hassle out of coding for cross browser by extending Javascript so you don’t have to waste time developing for each browser.

So which one to choose?

There are two main Javascript libraries which are really in play, those are Prototype and jQuery. There is also MooTools, however it is not anywhere near as widely used as Prototype and jQuery. That’s not to say it’s not as good, but I’m just going to compare the two leaders. It is important to note, there is no right or wrong answer, there is just preferences

Prototype – The Grandfather

It’s older but wiser. The key focus of Prototype is that it’s not really  designed to re-work the way Javascript is written, but to make your code more stable across more browsers and extented Javascript’s capabilities . Prototype builds on what’s already in Javascript, so you generally still get to do Javascript coding. It doesn’t build in fancy effects etc like jQuery does, it has it’s little sister scriptaculous to do that for it. One issue with Prototype is size, jQuery is available minified and gzipped, so it’s ready to go at 19kb. Prototype doesn’t have this available which is definitely hurting it’s numbers with younger developers. To gzip javascript yourself using PHP see my gzip script here.

So why have I dubbed it “The Grandfather” and will this effect future development?

The problem with Prototype is it is becoming less and less active whilst jQuery becomes more and more active. More and more sites are switching to the hip young jQuery. Key switchers here are Twitter, Digg, NBC and the list goes on. So is the lack of progress going to affect it’s future? Right now no, but fast forward a year from now, if it’s still as inactive as it is now as newer browsers come out it’s going to quickly die out.

Prototype is still very stable and well featured, so it’s not to be overlooked.

jQuery – The Cool Guy

In contrast to Prototype, jQuery is built to reshape how Javascript is written and make it faster to write scripts. In short it does the hard work for you. jQuery is now the most widely used and supported Javascript library out there. There are literally hundreds of plugins, possibly thousands and the support is only growing. According to SlickSpeed jQuery is significantly faster than Prototype, with the latest release said to be much much faster again. We’re only talking milliseconds so it’s not necessarily a huge deal but it’s always better to shave off time where possible.  It can take a bit of getting used to if you’re an advanced Javascript developer, but it seems like it will be of benefit in the long term. If you haven’t learnt Javascript before, jQuery can make it easier for you to get started making great scripts today.

So which to choose?

Ultimately it’s up to you, if you can’t decide, you can use both. I myself have been using Prototype for sometime and it is implemented in just about all of my sites AND I have built my own set of functions to compliment it. Having said that, the temptation to trial jQuery has gotten too great so I will be using both for a period of time before weening out Prototype now that jQuery can do pretty much all that Prototype can do, plus do it some of it easier.

They’re both great libraries and each have their pros and cons. jQuery is just hitting more of the pros today.

Download Prototype here

Download jQuery here

If you use the prototype javascript framework there is a call built in! Handy…

Here’s the code for Prototype users:

var pos = $("elementID").viewportOffset();
var x = pos[0];
var y = pos[1];

Nice and easy…

For those of you who don’t use prototype, below is a function you can use to get the X & Y coordinates relative to the page (viewport).

The Function:

function viewportOffset(forElement) {
	var valueT = 0, valueL = 0;<
	var element = document.getElementById(forElement);
	do {
		valueT += element.offsetTop  || 0;
		valueL += element.offsetLeft || 0;
		if (element.offsetParent == document.body) break;
	} while (element = element.offsetParent);
	element = forElement;
	do {
		if (element.tagName == 'BODY') {
			valueT -= element.scrollTop  || 0;
			valueL -= element.scrollLeft || 0;
		}
	} while (element = element.parentNode);
	return [valueL, valueT];
}

This is a modified function from the prototype framework.

Calling The Function:

var pos = viewportOffset("elementID");
var x = pos[0];
var y = pos[1];

I tried several of the functions on various blogs etc none of them seemed to return anything but 0 in Safari. The above has been tested and works in the latest versions Safari, Firefox, IE and Opera.

Enjoy!