iWeb Tip #24 – Print Page Button

20
2639
Print Button in iWeb

Print Button in iWebiWeb 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:

View Demo »

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.

Download Print Buttons

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’]

20 comments

  1. Tarek Ahmed 31 August, 2010 at 14:29 Reply

    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

    • iWebUnlimited 21 September, 2010 at 22:29 Reply

      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 ;-)

  2. Phil Nudelman 12 November, 2010 at 10:44 Reply

    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

  3. Megan 3 January, 2011 at 15:21 Reply

    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.

  4. Andrea 10 January, 2011 at 02:20 Reply

    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…

  5. Chris 23 March, 2011 at 17:50 Reply

    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

    • Lee 12 June, 2011 at 13:44 Reply

      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

  6. Lee 12 June, 2011 at 13:49 Reply

    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

  7. Andi 24 April, 2012 at 06:45 Reply

    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

  8. Ana 31 January, 2016 at 09:40 Reply

    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

Leave a Reply to iWebUnlimited Cancel reply

Recommended

Facebook
Twitter
YouTube