iWeb Tip #24 – Print Page Button
iWeb Tip #24 is on how to add a print page button in iWeb. There are times when you create a page on your website that viewers might want or need to print frequently, so this tip will help you add an easy “Print Page” button to your site. This tip makes it quick and easy! Simply paste the code below in an html snippet and that’s it! So here we go:
You can see a demo of both Print page button as a form button and a graphic button in action created in iWeb by clicking the button below:
There are two versions of the code below. One is to use your own button, the other is to use a form button. We’ll first start with a form button.
Print Page Form Button
The print page form button doesn’t require any extra graphics or anything, simply paste the code below in an HTML Snippet in iWeb and you’ll have a print page button. It’s as simple as that! Here’s the code:
<script Language="Javascript">
function printit(){
if (parent.window.print) {
parent.window.print() ;
} else {
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<SCRIPT Language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()"></form>');
}
</script>
Print Page Button with your own Graphic
This one does the same thing but lets you use your own graphic for the print button. Much better if you’re trying to match a similar style to your custom iWeb design. It just takes a few steps:
1) First make a graphic in photoshop or whatever else to be your print button and upload it to your server (i.e. MobileMe, Your Host Server, etc).
2) Paste the code below, but replace the code in red with the URL link to your image.
<a href="javascript:parent.window.print()"><IMG SRC="https://www.mysite.com/imagefolder/mybtnimage.png"; width="127" height="31" alt="Print this page" border="0"></a>
3) Hit apply and presto!
If you don’t know how to make a button here are some free print buttons you can use for your own sites.
Or you can find some great print icons by going here: https://findicons.com/search/print
That should be it. If you have any questions or comments post them below.
[iWeb-Code=’tweet’]
Thanks a lot for your very helpful site!
Greetings from Hamburg, Deutschland (Germany)
Your very welcome Ralf. Thanks for stopping by.
Thanks a lot for your very helpful site and your patience!
saludos desde mexico brother!
Saludos amigo mio. Gracia por visitar mi sitio.
Dear iWebUnlimited
Please i have 2 questions
1- did u design all this site using iweb ?
2- my website is very small , very very small , i designed it using ur tutorials of iweb , but it is very heavy and slow in loading , do u have a solution for this ?
please see my homepage http://www.tarekpodcast.com
i’ll really appreciate it
thank you
Tarek
Tarek, wrong place for those questions silly, this is the Print Tip page, only comments about the print page go here. Post your questions outside of the print tip on the forum. Thanks for visiting, happy to help, just post on the forum instead ;-)
Dear iWebUnlimited, I have used the snippet code for “Print this Page” and it works fine for me both on my Mac with Safari and on my PC with ie. However, others that have called the site from their pc’s cannot get the “Print this Page” to work. They can print using the browser’s print command but not using the button on my site. Any ideas would be appreciated. Your site is a great help. Thanks, Phil
I have the same problem. Works fine on Mac with Safari. On my PC with IE8 it fails to print – it only prints the Print-buttom :-).
Thanks for the helpful tips. New to this and having trouble with this one in particular.
1. Where do I upload the graphic in the server?
2. What URL link to the image am I pasting into the code? And where am I pasting your given code?
Not sure why I’m so confused by this one! Thanks for the help.
Hy,
thank you for usefull tips; I have a question. I have a page with an iFrame and inside the iframe a scrollable page. So if I put the print button on that page it will print only the visible part of the iFrame. I want to print all the page inside the iFrame but before activate the print action I want to loading the page inside the iFrame. So I ask you a code that load one page and immediatly after and automatically activate the print dialog box. Basically I tried to use something like this but I don’t know html javascript and more lenguages.
Thanks for help. My website is: http://dl.dropbox.com/u/1166330/web/at/home.html, if you click on curriculum you will see an iFrame page. Than click on the print image and all the curriculum will be loaded in a single page. At this point I want the dialog box for printing will appear automatically…
I was curious if you could link this button to a separate sheet, so instead of printing the actual page being viewed. If I had a pdf or jpg stored and had the print button print it instead. I am an industrial designer and would love people to be able to print out “what they see” but have it be in a slightly better set up tear sheet. Any suggestions would be helpful.
Best Regards,
Chris
Chris,
just wondered if you had any luck with this question? I am trying to get my print button to just print the text and not the backgrounds, but even better would be a seperate PDF as you suggested. any help you could give would be apprieciated.
Thanks
Lee
Thanks for the great tip! Really appreciate it!
Thanks so much for this tutorial, I really needed it! You’re website is awesome, keep it up!
This is great thanks, but i wonder if there is an addition to the code to print everything on the page but ignoring the background, so essentially printing all the content but on a white background instead of the web page background?
Thanks
Lee
That’s absolutely great! Thanks for providing us with cool stuff!
Just one question toi the Print-Button:
Is it possible to define the color, in which text will be printed?
My site has a black background and white text. If I use your print-code, the page will be printed, but the text is white so I don’t see anything. It would be great, if I could change it so that the white text will be printed in black.
Thanks a lot
Andi
you have the best website ever and it looks really nice
i love iweb, and are updating my site as we speak. Why oh why can iweb not become an open source software, for genious like you guys to develop on…
Missing answers to a lot of questions in here – print without background/print a pdf …
Hello, i have 2 questions about the snippet.
Can i somewhere say what it should not print? – i have some h1, h2 words hidden in background that get print…i dont want that
or is it possible to print with background?
That would be cool…
Thenx
Wbw