Lesson 27- Creating user defined print buttons
generation technology
Up until JavaScript1.2, printing a document means reaching out to the print button on the toolbar of your browser. That works fine, but wouldn't it be nice if webmasters could create their own print buttons? When NS2.x was introduced, wemasters finally were allowed to use their own image or text links to replace that ugly submit button. Now, with NS4.x, the same idea applies to the print button too.
Basic syntax to print a document:
The JavaScript syntax used to simulate the print button currently only works with NS4.x, so other browser users, please feel free to read the below, but you'll still need NS4.x to do the test run.
Here's the syntax used to print a document:
window.print()
Really simple, right? Right. That's all there is to it. Lets see a basic example that uses a button to print a document:
<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>
If you're using NS4.x, clicking the above button will print this page.
You probably want to add a filter to the above code so that people using other browsers do not receive errors when clicking the button. If you're unfamiliar with adding filters, please check chapter 10 of my JavaScript tutorial.
Using images as print buttons
Just like you can use custom images in place of submit/reset buttons, the same can be done with print buttons. There are two ways to go about creating image print buttons, the first one of which we should all be familiar, the latter, not for some.
1st method: Using "return false" in an image link:
<a href="whatever.htm" onClick="window.print();return false"><img src="print.gif"></a>
Return false cancels the default action, which is to link to "whatever.htm". By canceling the default action, the image above becomes exclusively a button that prints a document, which is what we want in this case. (Note: there is another similar way to achieve the same thing, which is to create a false (non existence) anchor link, and taking out the return false part.)
2nd method: Using a "JavaScript url" in an image link:
Another way to accomplish the exact same task as above is to use a "JavaScript url". A JavaScript url is a special kind of url that executes a command, instead of loading the specified url. Lets see an example of such before explaining what exactly it is:
<a href="javascript:window.print()"><img src="print.gif"></a>
The part in red is a JavaScript method, but look at where it is inserted-in place of the target link! The syntax for all JavaScript urls are the same:
javascript:script codes here
Any JavaScript codes can be inserted inside to carry out an action when a link is clicked, thus the name, JavaScript url! For example, the below will pop up an alert box when the link is clicked:
<a href="javascript:alert('hi there!')">Click here</a>
Both NS and IE support JavaScript url, so all browsers, click above! While the two methods we have presented to print a document in essence accomplish the same task, the difference is that a JavaScript url makes a request to the server (the browser icon on the upper right corner "flashes"), whereas the first method doesn't, since we used the "return false" command to cancel this action. Choose whichever you desire, although using the second method is a little less "hassling" than the first.