Hi everyone. Here’s a second post that was published by Johan Meyer, Ukuvuma’s senior Microsoft Developer.
Enjoy
John.
From Johan Meyer at Ukuvuma Solutions
Okay, this is a nice short tutorial where I will show you the following:
- How to create a print button on a web page.
- Use Firebug (Firefox), Developer Tools(IE) or any other developer tools available to identify what controls needs to be hidden or showed before the page gets printed.
- Show you what code is needed for jQuery or Dojo.
1. How to create a print button on a web page.
First off you need to create a Print button. Now normally when I create an image as a button on a web page I will use CSS for the style and a <div> for the button.
So first add a <div></div> tag to your Page and give it a class name, for this example I will be using “printButton” as the class name.
In your HTML file add this div:
<body> <div class="printButton"> </div> </body>
Now that you have your div you need to create the Stylesheet that will style our print button. Add a CSS file to your project and add the following to it. The dot before printButton means that this style is applicable to the printButton Class. If the printButton had a # before it would look for the div’s ID.
.printButton {
background-image: url(“printButton.jpg”);
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
height: 20px;
width: 20px;
padding: 5px;
}
This style will change your div however you want it. The first two lines will show your image without repeating it. Then we use two cursors, the first one works for IE and the second for Firefox (this is the code that will show the little hand when you hover over the image). Then we set the fixed width of the div and the padding to make it look a bit nicer.
The image above shows how the button should look by now. To create an actual print button we need to add the Javascript print command. Add the following to your printButton div.
<html>
<head>
<script type=”text/javascript” language=”javascript”> function printDocument() { window.print(); } </script>
</head>
<body>
<div onclick=”javascript:printDocument();”> </div>
</body>
</html>
The onclick event fires a javascript function called printDocument(). Inside this function we call a JavaScript function that calls the browsers print class. This will print the document but not always as the user would want it to print.
2. Use Firebug to enhanced the nor window.print JavaScript function
For now I’m not going to go into depth of how firebug works but I will post on how to use it and all about what I know of firebug in one of my future posts.
Use Firebug and look through the website that you want to print and identify what controls you want to hide before printing, or what controls you want to modify in size before printing.
If you have a layout that looks like this, it is likely that you only want the content part of this layout. So identify the controls by ID or by class and write them down.
The sections that we will want to hide are: LeftSide, Header, Footer and RightSide.
3. JQuery and Dojo code
Now that you know what controls you don’t want to show, you need to hide them before calling the printing function and show them again after printing.
In the printDocument function add the following code for jQuery:
<script type=”text/javascript” language=”javascript”>
function printDocument() {
jQuery(“.LeftSide”).hide();
jQuery(“.Header”).hide();
jQuery(“.Footer”).hide();
jQuery(“.RightSide”).hide();
window.print();
jQuery(“.LeftSide”).show();
jQuery(“.Header”).show();
jQuery(“.Footer”).show();
jQuery(“.RightSide”).show();
}
</script>
And this if you want to use Dojo:
<script type=”text/javascript” language=”javascript”>
function printDocument() {
dojo.query(“.LeftSide”).style(“display”, “none”);
dojo.query(“.Header”).style(“display”, “none”);
dojo.query(“.Footer”).style(“display”, “none”);
dojo.query(“.RightSide”).style(“display”, “none”);
window.print();
dojo.query(“.LeftSide”).style(“display”, “block”);
dojo.query(“.Header”).style(“display”, “block”);
dojo.query(“.Footer”).style(“display”, “block”);
dojo.query(“.RightSide”).style(“display”, “block”);
}
</script>
If you need to call some of the controls on the ID instead of Class, you can change the jQuery to “#Header” and the dojo you need to remover the string with the dot and add dojo.byId(“Header”) instead.
You can manipulate the page as you like, just return everything back to normal after the user has printed or redirect them to a new page.
Hope you enjoyed this tutorial.
