Professional Documents
Culture Documents
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
Introduction home about non-technical introduction newsletter archive HTML 5 html5 development center Primers html social media and html ad banners perl & cgi asp javascript database - sql HTML & Graphics Tutorials getting started backgrounds buttons browser specific colors forms frames html 4.01 tags html 4.01 ref image maps tables web graphics Beyond HTML asp cascading style sheets css keyword ref cgi scripting dhtml/layers dot net java applets javascript
1 of 9
10-02-2012 19:03
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
javascript frameworks javascript keyword ref javascript script tips mobile web development open source cms php security SEO vb script keyword ref webmaster tips webmaster projects webmaster toolbox video xml general reference pieces the master list Need Help? discussion boards mentors technology jobs Web Development earthwebdeveloper.com javascripts.com Best Practices for Developing a Web Site: Checklists, Tips, Strategies & More. Download Exclusive eBook Now. Best Practices for Developing a Web Site: Checklists, Tips, Strategies & More. Download Exclusive eBook Now. Post a comment Email Article Print Article Share Articles Reddit Facebook Twitter del.icio.us Digg Slashdot DZone StumbleUpon FriendFeed Furl Newsvine Google LinkedIn MySpace Technorati Windows Live YahooBuzz
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
By Joe Burns
Tweet
with updates by HTMLGoodies Editorial Staff You've probably been on a web page and wanted to print out the page for later reference. Wouldn't it be great to be able to provide visitors to your site to be able to do just that? This tutorial for web developers will show you how to use JavaScript's window.print function, complete with examples!
Saving Grace!
The good thing about the command, the way the authors set it up, is that it does not immediately fire a print. It actually only fires the print window, which still gives your site's visitors a choice in the matter!
It's then up to the person who triggered the method whether to then continue with the printing or not. That's good because I can see a ton of problems with printers not being turned on and huge, huge files being set to print. So, how to you set up the code? Well, try this first and then look at the code:
3 of 9 10-02-2012 19:03
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
The JavaScript is triggered by using the command "javascript:" in place of a URL, thus allowing a hypertext link to fire off the JavaScript. And before you ask, yep, this will work with almost any JavaScript Event Handler as long as the format allows you to write it as a specific line or trigger a function. You can set it to print off of an image:
<A HREF="javascript:window.print()"> <IMG SRC="print_image.gif" BORDER="0"</A>
To make sure that your visitors have JavaScript enabled before you provide them with a button that only works using JavaScript, you can use JavaScript to print out the button. That way if they have it disabled, no button appears, saving them the frustration of clicking a button that does absolutely nothing:
4 of 9
10-02-2012 19:03
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
Allow the User to Choose to Print - My print offering would be text at the bottom or an icon that doesn't intrude. Everyone knows they can already print your pages without any help from your coding. So, make this something you offer as a help rather than putting it into people's faces. Never Attach This to a User Event - Don't set this to an onLoad, or an onMouseOver, or some other user event. It will only tend to upset those who have visited your page and probably stop them from coming back. Additionally, there are more detailed methods of printing pages that allow you to separate the content from the ads, site navigation, etc. This is easier if your content is separate from your site's design, i.e. in a database. We'll go into those techniques in a later tutorial!
That's That...
There you go. Now you can set up a print request through JavaScript. If used correctly, this is a very nice addition to a page and a help to the user, so use it wisely and well. Enjoy!
Make a Comment
5 of 9
10-02-2012 19:03
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
Reply
6 of 9
10-02-2012 19:03
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
7 of 9
10-02-2012 19:03
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
Reply
8 of 9
10-02-2012 19:03
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...
Related Articles So You Want To Open A Window, Huh? Hovering HTML Windows and Animated Hovering Using JavaScript Creating a Modular JavaScript Toolbox Using Multiple JavaScript Onload Functions
Copyright 2012 QuinStreet Inc. All Rights Reserved. Terms of Service | Licensing & Permissions | Privacy Policy About the Developer.com Network | Advertise
9 of 9
10-02-2012 19:03