Unobtrusive “Print this window” using MooTools and jQuery!

by keif on February 3, 2009

Edit: As Oskar points out, the MooTools can be more concise, so I’ve updated the code!Thanks Oskar!

So I’m a fan of unobtrusive javascript – that means I like avoiding “onclick”, “onblur”, “onfocus” etc. etc. I don’t like doing “href=’javascript:dostuff();return false;'”. It makes me cringe – in this day and age, everyone has their favorite javascript library, and they make event delegation damned easy to the point that I have to ask – if you load a javascript library on your site, why not use it?

Print this window!

Generally, those “print this window” links tend to be something along the line of:

or even:

Why do it this way? Why create a link that may not work?

The MooTools way:

MooTools is my rifle – I tend to focus on it first and foremost when it comes to thinking about UI.

Let’s take a “Print this Window” link and add a CLASS.

Why CLASS over ID?

This is a valid question – some people like having things spelled out down to the letter, and they like their specificity. MY concern here is (recently) a client had a “print” link at the top and bottom of an overlay – IDs become invalid! So I prefer to keep that in mind at all times and code accordingly to the “what-if” scenario:

ZOMG! So easy! And it’ll hit EVERY class with “.print-window”! This method will hit ALL elements, so you may want to tighten it up a little bit:

Now, why not search for “a.window-print”? Why use an “anchor” if it’s not going to be used?

To be honest – you don’t have to use an anchor. The class name is what’s important – you can make it a <span> if you don’t like using <a> or simply attach it to an image.

jQuery “Print this Window”

Simply delicious! You may need to double check me on that – jQuery is my backup, the dillinger to my glock.

What if javascript is not enabled?

Gasp! The horror!

No doubt this is something that may need to be accounted for – and I’m all about accounting for it all. This also brings up the question – do we care if search engines see it? Are google searches for “print window” a maker or breaker? Really, for our purposes, they’re a “nice to have” function that adds no real added value to our page, and if you don’t care if a search engine sees it, there’s more than one way to jam this tune out.

For this, I like to use javascript to inject the elements in the page – javascript is needed to USE the link, so why not use it to make it available?

For this, it could be as simple as using CSS to HIDE the links, and javascript to SHOW the element, or you could go a step further and generate the images via javascript to begin with!

It’s kind of a pandora’s box – use with care!

  • Oskar Krawczyk

    Actually you can simplify the MooTools code:

    $$('.print-window').addEvent('click', function(e) {

    • keif

      I break the array out of force of habit – thanks for the clean-up!

  • Oskar Krawczyk

    Breaking arrays in most cases is a very good thing to do, say, if one wants to apply two (or more) methods:

    Array.each(function(el) {

    This code loops through the Array only once, where doing a simplified-statement on the same Array will constitute in executing three loops– one for each method.

    I’m sure you know that, but perhaps some of the readers don’t!

  • keif

    @Oskar: Thanks again! Regardless of something “feeling” common knowledge, it’s always great to hear it said again (especially to the benefit of everyone)!

  • George


    For you jQuery code, the only thing you’re really missing is the inevitable “return false;” before closing the function. Also, don’t forget about that wonderful deviation in IE7 for Vista where the global variable returnVal really determines whether or not an action is carried out.

    returnVal = false;
    return returnVal;

  • Thomas Aylott


    $$('#container .print-window').addEvent('click', function(e){ e.stop(); window.print(); });


    $('#container .print-window').addEvent('click', function(e){ e.preventDefault(); window.print(); });

  • Receipt Printer

Previous post:

Next post: