dog portraits

How To Make A Print This Webpage Link

Ever wonder how to make a link for printing a webpage? Wonder no more, it's as simple as adding a little javascript to the link like so:

<a href="#" onclick="window.print();return false;">Print this page</a>

When the viewer clicks the link it will activate the printer dialog box so the viewer can print the webpage. However it will print the entire webpage, navigation bar, ads and all. Wouldn't it be nice if you can control which part of the webpage will print? It just so happens that you can with some CSS. Here's how:

Open any text editor such as Notepad and write this:

body {visibility:hidden;}
.print {visibility:visible;}

Save the file as print.css and upload it to where you keep your webpages. Next open the webpage and link to the file you just made by adding the following code between the <head></head> tags:

<link rel="stylesheet" href="print.css" type="text/css" media="print">

One last step is to add class="print" to the HTML tag which contains the section of the page you want to print such as a div tag containing the main content, example:

<div id="content" class="print">

That's it, when folks click the "Print this page" link only the stuff within that tag will print, stuff outside of that tag won't. Cool, wouldn't you agree? Yeah I thought you would.

MOCAHOST WEB HOSTING

Unlimited website traffic and disk space on all plans starting at $1.95 per month on 3 year plan. Money back guarantee.