Navigation Menu
Alphabetical Listing
Site Contents

Site FAQ
About JSS
JavaScript Forum
JavaScript Tutorial
Friends of JSS

Link to Us
JavaScript Help
Contribute a script
Technology Jobs

Become a Partner

Internet.commerce

Be a Commerce Partner














Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Developer Channel

FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!


Hiermenus Central


Promotions

Free Announcements


Social Bookmark

General

Your visitors may not be familiar with style sheets for printing and don't see a 'print preview' in their browser. This script will provide them with a reliable print preview.


View the demo page

Notes

To read the entire article, visit A List Apart

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: print-preview.css


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


User Comments

Add a comment, suggestion, or correction
[For questions about usage, consult the Notes tab above or visit the JavaScript forum. Do not include more than two (2) lines of code in your comments. If you have suggestions or corrections, you can submit them to us.]

    
   
       
[optional]
 
[optional]

   

Comments feed Comment Feed RSS 2.0

12. From: D.Kiruthiga
12/04/2008 22:34:27

ya it was useful. But the above source code will not help for learners.

10. From: DITCH
THE # CREATES NOTHING to link
10/12/2007 10:15:13

The # seems to break the function? Otheres seem to have the same issue??

11. From: Lee (Admin)
11/07/2007 15:36:02

It shouldn't be a problem but, if for some reason it is, you can always just put the page link there, e.g.:

<a href="index.html" onclick="print_preview(); return false;">Print this page</a>

8. From: Joel Rosado
Print to Preview
08/20/2007 23:28:23

I still get the yellow box with the content thats not supposed to show when I print a page. Am I missing a portion of the script that should prevent the yellow box with the information inside from printing?

9. From: Lee (Admin)
10/03/2007 14:39:12

Joel,

You can check the original article for further details.

7. From: Jodh
Still shows yellow box that is not supposed to be there
05/17/2007 13:25:10

HI,

It still shows the yellow box when i try to print.

6. From: Josh
How to specify what gets printed
05/17/2007 13:01:12

How do i specify what gets printed. I just dont want 2 buttons to get printed. (submit and print button).

Thanks

3. From: malcolm
05/07/2007 09:40:44

What should I put on #, at <a href="#" onclick="print_preview(); return false;">Print this page

4. From: Lee (Admin)
05/10/2007 15:15:56

The "#" is just a place holder. You don't need to put anything there.

2. From: hakkie
11/25/2006 14:31:57

What shall i put by #?

Like :
<a href="#" onclick="print_preview(); return false;">Print this page


next comments...

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.