Home Tips and Instructions Web Design Tips and Tutorials Printing A Specific Section of Web Page Without Hiding Any Content
Printing A Specific Section of Web Page Without Hiding Any Content PDF Print E-mail

The most common way to prepare a web page for printing is to use a style sheet that hides certain elements when a page is printed. Using a style sheet for printing generally works great for printing everything except for items such as menus and banners. Or to put it another way, the style sheet method works great for hiding items like menus and banners when printing. However, if you were to use the style sheet method to print only a particular section then you eliminate the ability to print any other additional content.

No fear though! Using some simple JavaScript and an input button or buttons you can print only a specific area or specific areas of the content while still allowing you to use a style sheet to specify what elements should be printed when your visitor(s) print the page. Specifically this method requires javascript and more specifically it uses the jqPrint plugin (http://plugins.jquery.com/project/jqPrint) and JQuery (http://jquery.com/).

Here are some basic instructions on how to do this:

1. In the <head> section of your web page first make a link to JQuery and then the jqPrint plugin. You should put jqPrint in a local folder on your server and I recommend that you let Google host JQuery and simply link to it on their servers. See http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/ for a detailed explanation about why you should let Google host jQuery for you!

Also, the current version of jqPrint as of writing this is 0.3 so that is what you will see in the examples.

Example for use with an standard HTML page (Place the following in the <head> section of your page.):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.jqprint.0.3.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
                $("#PrintVocab").click( function() {
                    $('#divToPrint').jqprint();
                    return false;
                });
             });
</script>

*Note: In this example "#PrintVocab" and "#divToPrint" can and should be replaced with terms that match your specific situation better. See below.

2. The next step is to then create a div containing the section that you wish to print. For this tutorial I have chosen to use a div id of divToPrint as a container/wrapper for the content that is to be printed. This is why you see divToPrint in the $('#divToPrint').jqprint(); part of the script in the <head> section above. As another example, if you give the div that you want to print an id of PrintSection then the script in the <head> section should read $('#PrintSection').jqprint(); instead of $('#divToPrint').jqprint();.

Here is an example that matches the script specified above.

<div id="divToPrint">
Content/section to be printed.
</div>

3. The last step is to create a button to call the script. To do this you have to give your button (input) an id and this id has to be specified in the script in the <head> section. In the examples above you can see that PrintVocab has been specified as the button id in $("#PrintVocab").click( function() { so the id of your button (placed somewhere in the <body> section of your web page) would have to be PrintVocab. You can make this whatever you want but it obviously has to match!

So the code for the button in this example would look like this:

<input id="PrintVocab" value="Print Vocabulary" type="button">

In Joomla! 1.5

To use this in Joomla! you have to modify the script slightly. This is because Joomla! 1.5 templates typically load the MooTools JavaScript library and currently Mootools and jQuery don't play nice together without modification. To use jQuery within Joomla! requires using a feature of jQuery called noConflict(). Using noConflict() allows you to resolve conflicts that can occur when using multiple JavaScript libraries.

Again you will need to link to both jQuery and jqPrint in the <head> section of your web page. In Joomla! you would do this in the index.php file in your template folder. Also, note that you don't have to hard code the link to your template folder. You can use <?php echo $tmpTools->templateurl(); ?>/ for the path to the folder in your template folder that houses the jqPrint plugin. (This is useful if you would rename your template folder.)

Additionally, in Joomla! 1.5 most templates have a js (javascript) folder inside of your template folder, which is where the jqPrint plugn is located in example below.

The modifications to the script in order to use noConflict() are as follows:

1. add jQuery.noConflict(); before the $(function() { line.

2. Change all instances of $ to jQuery.

3. See these modifications in the example below.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/<?php echo $tmpTools->templateurl(); ?>/js/jquery.jqprint.0.3.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
     jQuery.noConflict();
          jQuery(function() {
                jQuery("#PrintVocab").click( function() {
                jQuery('#divToPrint').jqprint();
                return false;
                });
           });
</script>