'Print Me' Link

would like the code to add to a page

[sweetla21]

i'm definitely now a pro in the web field - still in school. looking for the code to add to a page so that it can be printed without the menu bar. would someone help? thx

lala

[pageoneresults]

Welcome to Webmaster World sweetla21. Try this one on for size...

<a href="#" onclick="window.print()">Print This Page</a>

And, if you want to get fancy, you can add the title attribute to the link like this...

<a title="Print This Page" href="#" onclick="window.print()">Print This Page</a>

[sweetla21]

thank you much, i will definitely try that!

[Axacta]

Also welcome sweetla21.

Or you can make up a separate page that prints exactly what you want and substitutes for the current page when printing:

<link rel="alternate" media="print" href="substitute_page.htm">

[RussellC]

If you want a button you could do this:

<script language="Javascript1.2">
<!--
var message = "Print this Page";
function printpage() {
window.print();
}
document.write("<form><input type=button "
+"value=\""+message+"\" onClick=\"printpage()\"></form>");
//-->
</script>

[rewboss]

window.print(), of course, may not work on all platforms. Be careful with it, and never call it automatically.

Another part of your question is how to get only certain parts of your page to print -- say, you just want the text without the navbar, which merely takes up space when you print it and serves no practical use whatsoever. You can do this with CSS, although it only works on newer browsers. (I've tried it. It works, and it's cool.)

Decide which elements you don't want to be printed out. You may need to assign a special class to them -- say, class="noprint".

Now you need an external stylesheet (call it, say, "printstyles.css"). Each id or class that you don't want printed should be assigned a display property of "none":

.noprint { display: none; }

In your HTML document, put the following code:

<style type="text/css">
@import url(printstyles.css) print;
</style>

Note that @import must be the first directive in any stylesheet.

Not all browsers implement the @import directive. Some may implement it but not understand the print media type: according to the CSS specs, they should then ignore the entire line and not import the stylesheet (otherwise they wouldn't display noprint items on screen either), so it shouldn't be an issue.

You can of course have messages that show up only when the document is printed (for example: "This document is from mydomain.com"). All you need to do is to do it the other way around, so to speak. In your HTML document, you need the following:

<script type="text/css">
.printonly { display: none; }
</script>

<script type="text/css">
@import url(printstyles.css) print;
</script>

Note that, because of the cascade and the rules for @import directives, you must have two separate <style> tags and they must be in this order. In your CSS file, then, you include:

.printonly { display: block; }

(or whatever is appropriate). Some search engines might not like this, though.

You can do a lot more subtle stuff with such techniques. For example, sans-serif fonts are easier to read on screen, but serif fonts are easier to read in print; so you can arrange to have the page printed out in Times New Roman while appearing on screen in Verdana. Or you might have chosen a nice blue colour for the text, but when printed on a black-and-white laser printer this comes out as a grey produced by using dots which can make small fonts hard to read; so you can set the font colour for the printer to be black.