There are times when I have to implement designs that have print links on them. While I may think they are useless, I still have to make them work as they are a part of an approved comp. Sure, it is easy to have a link and then add an onclick event to launch the print window, but is that the right thing to do?
Clicking a JavaScript print link does nothing more than launch the browser’s print window. If a person has JavaScript disabled, nothing will happen when they click a link like this:
<a href="#" onclick="window.print(); return false;">Print</a>
Ideally, we do not want to have things on a page that do not work without JavaScript enabled. So the solution is to write the print link into the DOM using JavaScript, then attach a click event to the link. Luckily, I use jQuery on every project, so it makes the process much easier.
The Solution
In this example, we are going to prepend a list item with a link to an unordered list with the id of tools. Then, we attach a click event to the link we have just added to the DOM. Finally, we return false to override the action of the link.
Here is the script:
$(document).ready(function() {
$('ul#tools').prepend('<li class="print"><a href="#print">Click me to print</a></li>');
$('ul#tools li.print a').click(function() {
window.print();
return false;
});
});
Take a look at the demo page to see it in action. The script is nothing complex; it is just another example of using jQuery to improve a user’s experience.
Categories
Recent Articles
May 2012
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
20 Comments
Renkai
12.10.2008Very nice, thanks for that
Garrick Cheung
12.11.2008Instead of writing the print link to the DOM when the page has Javascript enabled, I suggest having the print link in the markup already but hidden (via display:none or visibility:hidden).
Once the page is loaded and we know Javascript is enabled, have Javascript flip the switch on it.
Trevor
12.11.2008@Garrick Cheung-
Hmm, I’m not sure if I see the advantage in that. What if someone has CSS and JavaScript disabled? They would see the link. I see what your intention is though.
Mike Schinkel
12.28.2008Why not have a print link actually go to a page formatted for printing? Sure, you can use CSS to make the regular page print nicely but there are two problems with that being the only solution:
1.) Many people (myself included) want to see what the printed page will look like before it is printed instead of wondering if the site developer was nice (clueful?) enough to include a print stylesheet.
2.) Most websites don’t include a print stylesheet so most people (myself included) assume a site won’t include a print stylesheet (but I am pleasantly surprised when they do.)
It’s often better to give someone the explicit ability to control something than it is to simply rely on them discovering that they don’t need to control it. Thus having a formatted-for-print page visible on the screen provides a lot of value especially since you can reuse the same stylesheet you’d use for printing anyway.
On another note, some people actually want to print the page as formatted on screen so not giving them the option of printing either or both can frustrate some users.
That said, here’s one of my favorite print dialogs, ever! :-) http://mikeschinkel.com/blog/themostawesomeprintdialogonthewebever/
Trevor
12.29.2008@Mike-
True, I see your points. Although, I actually can’t think of the last thing that I printed that wasn’t directions.
Most of the sites that I work on are really all about the main content area, which is what shows up in the printed version. While I can see the value in giving the users another page that gives a better idea of what the print version would actually be, isn’t that basically the same as a Print Preview?
I still feel as though we are recreating browser tools that already exist. I feel the same was about text resizers. Instead of implementing custom solutions on our sites, wouldn’t it be more valuable to educate users on the ability to resize text with the tools built in to the browser?
Mike Schinkel
12.30.2008@Trevor: True, I see your points. Although, I actually can’t think of the last thing that I printed that wasn’t directions.
Me, I print *all-the-time*. Can’t stand to read long articles online. I’m much less distracted when I can focus on paper than when I have links I can click on front of me.
FWIW, I use FinePrint and a duplexing printer and print either 4 or 8 pages per printed sheet and I edit out the cruft in FinePrint’s print preview dialog so I’m really no killing that many trees when I print.
@Trevor: While I can see the value in giving the users another page that gives a better idea of what the print version would actually be, isn’t that basically the same as a Print Preview?
Yes, and no. Using your tip it pops up a print dialog. However neither FF or IE allows a user to select print preview from that dialog (at least not on Windows.) So the usability really isn’t there.
@Trevor: I still feel as though we are recreating browser tools that already exist. I feel the same was about text resizers. Instead of implementing custom solutions on our sites, wouldn’t it be more valuable to educate users on the ability to resize text with the tools built in to the browser?
I agree we are recreating functionality but the problem is that the powers that control it (the standards bodies and the browser implementors) have not been great stewards of usability related to either of those issues: printing and text resizing. In a perfect world browsers would have more obvious hooks for those things and HTML would have more standard features to support them. But alas, they don’t. So we can either take the position that “Users should know better” or we can take the position that “Anything we do that our users don’t immediately grok is something we can improve on.”
I can actually see the argument for the former because it takes time and effort to address the latter but I think the ideal is the latter, don’t you?
Mike Schinkel
12.30.2008P.S. Sure would be nice if you’d add a “Comment Preview” plugin to your site. Also, I really like the site redesign. (As I’ve said before) You are very talented in your designs and layouts.
Trevor
12.31.2008@Mike-
Excellent points. I didn’t even think about the fact that you cannot get to the preview from the regular print dialog. Although, you can on Macs.
I agree, the ideal situation is probably to display a preview of what the printed page would look like using the print stylesheet, but if it were up to me, I wouldn’t include a print link at all.
Thanks for the comments on my redesign. I have considered a comment preview plugin, but one thing that I hate about them is that as you are typing more, the preview keeps pushing the comment box down. Maybe when I get around to it, I may try and add something in. Thanks for the suggestion.
Mike Schinkel
12.31.2008@Trevor: if it were up to me, I wouldn’t include a print link at all.
Why? I really, really like sites that do me the courtesy of providing a print link. Not providing one (on a site that obviously has had effort invested into it) feels to me like an insult. I’m just sayin…
@Trevor: I have considered a comment preview plugin, but one thing that I hate about them is that as you are typing more, the preview keeps pushing the comment box down.
It doesn’t have to be an in-page preview (though I do like those), it could be one that requires an HTTP post.
Or maybe you meant the same? In that case it could have the preview below the comment.
Trevor
12.31.2008@Mike-
I guess I should clarify that statement and say that I wouldn’t want to include a print link that just pops up the print dialog and doesn’t show a “preview”. But sometimes, you are dealing with clients, and we know how that goes.
It is curious to me that someone so web savvy appreciates it so much. I’m sure you know how to go to File > Print Preview. On a site that would be printed frequently and would probably have a good amount of novice users, it certainly makes sense to give a preview of what the site would look like printed.
My plan for the comment preview is to just add a preview button via JavaScript next to the Add Comment button, and then when clicked, it would add the preview via JavaScript. It’s just a matter of finding the time to do that.
Mike Schinkel
12.31.2008More from my perspective…
@Trevor: I guess I should clarify that statement and say that I wouldn’t want to include a print link that just pops up the print dialog and doesn’t show a “previewâ€. But sometimes, you are dealing with clients, and we know how that goes.
I appreciate when sites have a print link that just pops up the print dialog. See my next comment.
Yes, I can and often do use File > Print Preview but I first look for a “Print” link. Why? It tells me the site designer actually paid attention to the print interface. Without a print link, I don’t know that.
And at least a javascript link doesn’t eat paper unwantingly. If I click the print link I know (almost?) for certain that it won’t print but will give me options.
Actually a print link with javascript tells me the designer thought about print but doesn’t tell me for sure if they did anything to make my printing experience better.
In summary my arguments on Print links and Dialogs can be summed up in one statement: “Don’t Make Me Think.” (with thanks to Steve Krug.)
As for the comment preview and finding time; I hear ya, I hear ya!
Happy New Year!
Cerium
01.21.2009You should test the method print() of the window object ;) So if the visitor have JS enabled BUT don’t support the print() method, there is no problem ;)
if(window.print())
{
//run the code here
}
Shannon
03.17.2009I’ve been struggling for days to find a way to get my coloring pages to print without ads. I installed the wp-print plugin, and that got rid of the ads, but now the page shows the byline, categories and number of comments when I print. So I want to install the coding you reference above as the Solution, but I don’t know where to put it. Secondly, once the coding is in, where/how do I create the Click to Print button for people to see on each coloring page? I’d really appreciate any help!
Trevor
03.18.2009@Shannon-
I’m not really sure what you mean. All that the script above is doing is adding a link to the page with JavaScript that will bring up the normal browser print dialog when clicked. You may want to look into a print stylesheet to help you control how your pages look when printed.
jim
04.02.2009CTRL-P
Anthony James Bruno
09.04.2009Note: This does not work in IE6
Trevor
09.04.2009@Anthony James Bruno-
Works fine for me. Don’t forget you need to have JavaScript enabled in order for it to work.
simpleton
11.28.2009A print cart/basket using this would be an interesting script that would provide functionality not already present in the browser. Anyone know of a good downloadable script for that?
michael j
06.03.2010A print cart/basket using this would be an interesting script that would provide functionality not already present in the browser. Anyone know of a good downloadable script for that?
——-
Chris Hayes
12.16.2010I believe the best solution would be a “print” link that opens up a pop-up preview window, and the javascript triggers there.
My reasons:
1) A print preview, even on browsers/OSes that don’t really provide one. (least important reason).
2) If they have javascript disabled, they can still get a “printer-friendly” version of the page to print, since the pop-up window can be laid out & styled differently.
3) If they have CSS disabled, then the “printer-friendly” version of the page can take that into account, as well, in layout.
4) Now, there’s no reason to hide the print link on the original page, because it’s in no way dependent on Javascript OR CSS. And the user having either on or off will not impact the page or introduce unexpected bugs (such as a previous comment’s display: none example with CSS off).
5) It’s the cleanest separation of content from functionality. Your example takes content, and hides it away inside functionality (using JS to display a link, or not, dependent only on whether the user has JS on - which the majority of users do). With my solution, content is in the html file, functionality is in the javascript file, and styling is in the CSS file. Ne’er the three shall meet.
Too late, comments are closed!
Don’t worry, you can email me or contact me on Twitter.