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:
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:
.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:
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:
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.
