solidhex.com

Since my post on opening external links with jQuery has proven popular, I thought I would port that same technique to Prototype. Yes, it’s just as laughably trite of an example, but hey, it gives me something to write about.

My example will make use of the dom:loaded event, which fires once the document has finished loading, excluding images:

document.observe("dom:loaded", function() {
	$$('a[rel~=external]').each(function(el) {
		Event.observe(el, "click", function(e) {
			window.open(this.href);
			Event.stop(e);
		});
	});
});

Like I said above, dead simple. We’re perusing the document for anchor tags containing the rel attribute external, registering a click event to the anchor tag, opening the link in a new window, and finally, stopping the browser default action, which in this case means following the link.

It’s slightly more verbose than my jQuery example, but it gets the job done just the same.

JavaScript has become much easier to write over the past two years with the help of top notch libraries such as Prototype and jQuery. Before getting my feet wet with either of the two aforementioned heavy-weights, I spent my time slugging it out with tedious DOM methods and ‘vanilla’ loops. It was certainly time consuming, but I knew exactly what my code was doing and would still know what it was doing six months from then.

Now, much like the rest of the world, I can’t seem to get by without jQuery or Prototype to do most of the heavy lifting for me. This is all well and good, but if/when the occasion arrives when you can’t rely on a library to plug all the holes for you, you might be surprised how much plain ole JavaScript you’ve mis-remembered.

I certainly was. I had to lean pretty heavily on the ole Rhino book - which by the way, is a book no serious JS scripter should be without - because I had forgotten stuff I used to be able to do in my sleep.

So, as a healthy exercise, I think it’s a good idea to try and write some scripts without using one of the fantastic libraries and frameworks out there, so you can spend some quality time reacquainting yourself with JavaScript. In fact, if you have some time to kill, you might want to run through Chris Heilman’s JavaScript course and work on the demos. Though the course is a few years old by now, the exercises are still worth taking a shot at to keep your skills in check. It’ll force you to think a little bit differently once you can’t rely on CSS selectors to whiz up and down the DOM tree for you.

Don’t worry - I am not suffering from a fit of dementia in which I want to do away with libraries and frameworks - quite the opposite. Why, I even helped debug a famous jQuery plugin. I just think it’s healthy to approach code from a different angle every once in a while and realize how good these libraries make our lives as developers.

If you’ve launched a large site recently, you may find yourself surprised at the amount of traffic IE6 drags in. In some cases, as much as 18% of our user base for large sites has been using the lil browser that could. It’s even more shocking considering these are cutting edge, community based sites. This breeds one (okay, maybe more than one) unfortunate drawback - lack of transparent PNG support in IE6. I don’t know about you, but I simply can’t live without transparent PNGs.

Fortunately, there are several work arounds. Even more fortunately, there is an updated version of a well known PNG fix - IEPNGFix 2 - and according to Angus Turnbull, it now supports background position and repeat!

via Ajaxian

A tried and true use of JavaScript is to open external links in a new window (or tab, depending on your preferences). I’ve come across countless scripts written to do this task, and even though some are using jQuery or Prototype, they are not making the most out of the library or framework they are using.

Basically, there are three ways to open an external link in a new window:

1. Give the a tag a class of ‘popup’, or something to that effect, iterate through the links and open those with class of ‘popup’ in a new window.
2. Set the rel attribute to external, and again, iterate through the links in the document, find the ones that contain this attribute and value pair and open the links in a new window.
3. Iterate through all the links in the document, check to see if the href contains the current site’s URL and if it doesn’t, pop it open in a new window.

For this example, I am going to assume my links are marked up like so:

<a href="http://google.com" rel="external">google.com</a>

With jQuery, there’s no need to iterate through each link and test for the rel attribute, and it exists, test for the value external. You can simply use CSS selectors to grab only the links you need without having to loop over them, then simply apply the Click Event Helper directly to those links like so:

$(function(){
	$('a[rel=external]').click(function(e){
		open(this.href);
		e.preventDefault();
	});
});

That’s what I like about jQuery - you get in, get what you need and get out.

Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design. The big problem I experienced with every plug-in I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that’s not true. The default CSS works fine, but most of time it’s a mix between required elements and optional. This mean you have to be very careful when editing it. The other problem is the animation. That’s the worst point. I never found one plug-in allowing to redefine easily the animations.

And with that, Cedric has relased nyroModal.

The seeds for this idea were planted as he and I continued to work on large sites utilizing many modal windows. Once you stop using them for simple login pages and image galleries, they can become quite a mess to customize.

Cheers to him for solving our problems and making it available for others to use.