Adding Print buttons and different print settings to your web page

Here are several different ways that you can use to add a Print button and different print settings to your web pages.

To insert a basic Print button, simply copy and paste this code to create the button where you wish the button to appear on your page:

<form>
<input onclick="window.print();return false;" type="button" value="Print" />
</form>

The print button will look like this:

If you want to insert a text link instead of a button, simply use this code:

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

Your link will look like this: PRINT

You can also use Javascript to create the print button, using this script:

<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form> '
+ '<input type=button name=print value="Click" '
+ 'onClick="javascript:window.print()"> To Print this page!</form>');
}
// End -->
</script>

The button will look like this:

If you don’t want the Print button itself to print when the web page is printed, use these Javascript codes. First, insert this part into the <head> section of your website:

<script language="JavaScript">
function printPage() {
if(document.all) {
document.all.divButtons.style.visibility = 'hidden';
window.print();
document.all.divButtons.style.visibility = 'visible';
} else {
document.getElementById('divButtons').style.visibility = 'hidden';
window.print();
document.getElementById('divButtons').style.visibility = 'visible';
}
}
</script>

And then add the button in your webpage using this code:

<div id="divButtons" name="divButtons">
<input type="button" value = "Print this page" onclick="printPage()"   style="font:bold 11px   verdana;color:#FF0000;background-color:#FFFFFF;">
</div>

If you want to be able to print just one section or frame of your page, insert this code into the frame or section to be printed to create the button:

<INPUT TYPE =button name="cmdPrint" VALUE="Print"
onClick="parent.mainFrame.print()">

Change the name “mainFrame” to the name of the section or frame you wish to be printed when the button is clicked.

Another way to control which parts of the page print out is to add a separate stylesheet that will be used for printing. (You can read more about print stylesheets here.) Add this to the <head> section of your page:

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

Now create a print.css file in your favorite text editor which contains the following:

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

Upload the print.css file to your server. Now all you need to do is to assign “class=print” to whichever parts of your web page that you want to have print out when the page is printed. Anything on the page not assigned to this class will not print.

Have questions or comments? Let me know!

Related Posts:

  • No Related Posts

2 Responses to Adding Print buttons and different print settings to your web page

  1. George says:

    Hello . I am using this post, on sharepoint list. What do you mea by “assign “class=print” to the parts”. can you explain me the proccedure?

    • Libby Fisher
      Twitter:
      says:

      Hi George,

      That means that if there are only certain parts of your web page that you want to print when people print the page – for example: a div called “sidebar” – you would add the class “print” to that div. So, this code:

      < div id="sidebar" >

      would become:

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

      Hope that helps!

Please note: If you need coding assistance or help, please contact me through Icode4you.net and I would be happy to help!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled

Notify me of followup comments via e-mail. You can also subscribe without commenting.