bahattab
24-02-2008, 11:30 AM
Print with JavaScript
By Joe Burns (http://www.atyafonline.com/feedback.php/http://www.htmlgoodies.com/beyond/javascript/article.php/3471121)
Use these to jump around or read it all...
[The Command (http://www.atyafonline.com/vb/#break)]
[Saving Grace (http://www.atyafonline.com/vb/#grace)]
[Suggestions for Use (http://www.atyafonline.com/vb/#sug)]
You know what I hate? I mean other than bad Christmas presents and the blink command. I hate it when I'm happily answering questions and, right out from under me, the variables change.
There I am, happily answering questions, in discussions (http://www.webdeveloper.com/forums/) when a fellow asks if he can initiate a print using JavaScript (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#). I happily answer that he cannot, but he can set where the page will break when printing via CSS print (http://www.atyafonline.com/beyond/css_print.html) commands. I also gave him the URL since I'm a nice guy.
Why am I "happily" answering that he cannot get a print, you ask? Well, it's certainly not because of the nice people who wish to offer a link or button that allows a print at the user's request, it's because of those who would flood their pages with print commands so that when you visit their pages everything you look at prints. How fun is that?!
Well, as soon as I hit enter, posting the message, a bunch of e-mail came in telling me that with IE5 you can use a JavaScript function to get the print to fire on its own. After gulping, I asked a few people about the actual command. It is:
window.print()Print is a method of the object "window." At first I thought that the command was simply capturing the buttons along the top of the browser window (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#) so all I had to do was substitute "print" with one of the other items, like "mail" or "home". No dice. I also tried setting up the same type of format with items found in the menus like "properties" and "Options." Error after error. It's apparently put into the DTD as a method unto itself.
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:
http://www.atyafonline.com/images/print.jpg It's then up to the person who triggered the method whether to then continue with the print or not. That's good because I can see a ton of problems with printers (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#) 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:
Click to Print This Page (javascript:window.print()) And here's the code:
<A HREF="javascript:window.print()">Click to Print This Page</A>
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>
You can set it to trigger off a button:
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
And, if you really want to be annoying, off of just about any Event Handler like this, adding onLoad will force a print request when the page loads (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#):
onLoad="window.print()"
Some Suggestions
Okay, now you have the power to force a print request, but that doesn't mean to simply offer a print on any page. You should make a point of being helpful to your users. Make a Page for Printing
The Goodies tutorials, as you can see, have a wavy background, a bunch of images, and stuff stuck in all over the place. They're not very good for printing. If I was to offer this page for printing, I would make a point of creating basically a text-only page, or at least a page with limited images and no background.
Make the Page Printer-Friendly
I would lose all text colors and make sure the width of the page was no more than 500px, left justified, so that what was shown on the screen would print on the printed page in the same way.
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.
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!
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
By Joe Burns (http://www.atyafonline.com/feedback.php/http://www.htmlgoodies.com/beyond/javascript/article.php/3471121)
Use these to jump around or read it all...
[The Command (http://www.atyafonline.com/vb/#break)]
[Saving Grace (http://www.atyafonline.com/vb/#grace)]
[Suggestions for Use (http://www.atyafonline.com/vb/#sug)]
You know what I hate? I mean other than bad Christmas presents and the blink command. I hate it when I'm happily answering questions and, right out from under me, the variables change.
There I am, happily answering questions, in discussions (http://www.webdeveloper.com/forums/) when a fellow asks if he can initiate a print using JavaScript (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#). I happily answer that he cannot, but he can set where the page will break when printing via CSS print (http://www.atyafonline.com/beyond/css_print.html) commands. I also gave him the URL since I'm a nice guy.
Why am I "happily" answering that he cannot get a print, you ask? Well, it's certainly not because of the nice people who wish to offer a link or button that allows a print at the user's request, it's because of those who would flood their pages with print commands so that when you visit their pages everything you look at prints. How fun is that?!
Well, as soon as I hit enter, posting the message, a bunch of e-mail came in telling me that with IE5 you can use a JavaScript function to get the print to fire on its own. After gulping, I asked a few people about the actual command. It is:
window.print()Print is a method of the object "window." At first I thought that the command was simply capturing the buttons along the top of the browser window (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#) so all I had to do was substitute "print" with one of the other items, like "mail" or "home". No dice. I also tried setting up the same type of format with items found in the menus like "properties" and "Options." Error after error. It's apparently put into the DTD as a method unto itself.
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:
http://www.atyafonline.com/images/print.jpg It's then up to the person who triggered the method whether to then continue with the print or not. That's good because I can see a ton of problems with printers (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#) 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:
Click to Print This Page (javascript:window.print()) And here's the code:
<A HREF="javascript:window.print()">Click to Print This Page</A>
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>
You can set it to trigger off a button:
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
And, if you really want to be annoying, off of just about any Event Handler like this, adding onLoad will force a print request when the page loads (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#):
onLoad="window.print()"
Some Suggestions
Okay, now you have the power to force a print request, but that doesn't mean to simply offer a print on any page. You should make a point of being helpful to your users. Make a Page for Printing
The Goodies tutorials, as you can see, have a wavy background, a bunch of images, and stuff stuck in all over the place. They're not very good for printing. If I was to offer this page for printing, I would make a point of creating basically a text-only page, or at least a page with limited images and no background.
Make the Page Printer-Friendly
I would lose all text colors and make sure the width of the page was no more than 500px, left justified, so that what was shown on the screen would print on the printed page in the same way.
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.
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!
http://www.htmlgoodies.com/beyond/javascript/article.php/3471121