Unobtrusive 'Print This Page' Link

Roger Johansson Sep 24, 2007

General

This script will add a link to your page for your visitors to print the contents of a stated DIV. If the visitor does not have JavaScript enabled, the link will not display, so as not to confuse them.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Notes

Created by: Roger Johansson
Web Site: http://www.456bereastreet.com/
Posted: September 24, 2007

For a more in-depth discussion, visit the original article.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: addprintlink.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Roger Johansson | http://www.456bereastreet.com/ */
var addPrintLink = {
	init:function(sTargetEl,sLinkText) {
		if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
		if (!document.getElementById(sTargetEl)) {return;} // Check that the target element actually exists
		if (!window.print) {return;} // Check that the browser supports window.print
		var oTarget = document.getElementById(sTargetEl);
		var oLink = document.createElement('a');
		oLink.id = 'print-link'; // Give the link an id to allow styling
		oLink.href = '#'; // Make the link focusable for keyboard users
		oLink.appendChild(document.createTextNode(sLinkText));
		oLink.onclick = function() {window.print(); return false;} // Return false prevents the browser from following the link and jumping to the top of the page after printing
		oTarget.appendChild(oLink);
	},
};

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  addPrintLink.init('article','Print this page');
  // In the function above, replace 'article' with the name of the DIV you want printed.
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="addprintlink.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="article">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details