Putting a Print Button

In your WEBPLUS Pages

 

It is often convenient to give your site visitors the option of printing some of the pages in your site. A typical use is where you have articles that people may wish to keep for future reference, or maybe you want users to be able to print a confirmation page with their details after submitting a form to you.

 

You can do this with a simple script that you can add to ANY page in your site using the “Add html” function of WEBPLUS.

 

Simply copy and paste the following script into the body section of your html dialog:

<style type="text/css" media="print">
.printbutton {
visibility: hidden;
display: none;
}
</style>
<h2>Optional Title</h2>
<script>
document.write("<input type='button' " +
"onClick='window.print()' " +
"class='printbutton' " +
"value='Print This Page'/>");
</script>

The items in Bold are optional. The Title will appear above your print button and can have any style tag that suits your site - in this example we’ve used the h2 tag. The Print This Page item is the text that will appear on your print button.
 

Help Out Your Site Visitors

 

When using this script, think about your site visitor. Don’t just stick the script on a general page because there’s nothing more annoying than having a whole web page outputting to a printer complete with all its graphics and nav bars. Instead, try to only use this script on pages that can be output independently of your main web page design. For example, if you create articles that can be printed, try and create the articles on separate site pages and have them display in your main site pages in I-Frames. By doing this, visitors will be able to click on your print button WITHIN the article page, and will then only get a print out of the article, and not the whole page that it’s displaying in.

 

Below is an example of how it works. Notice that your print out will be just this article and not the entire web page.