View Full Version : whats the best way to print the contents of a div?

11-06-2006, 05:37 PM

If i have three sections of one page that i want to allow people to print individually (via 3 different print buttons)

am i better off simply having three .htm files to call and print, or is there a way to say "pass the contents of this div to the printer"?

11-06-2006, 05:48 PM
The three html files might be the easy and more accessible solution but you could do it dynamically as well. HTML has the ability to choose stylesheets based off of the media attribute.

<style type="text/css" media="print">
/*print css here*/
You can have 3 stylesheets where each stylesheet will set one section of content to display:block; and everything else to display:none. Then you can call a javascript function to switch the print stylesheet and then call window.print(). I recommend using a link that has the external pages but also calls the function onclick with return false at the end of the onclick this way if js is enabled they get the dynamic printing, if not they get directed to the external pages.

11-06-2006, 06:16 PM
its a good idea, but all the sections are visible at once.

the context is that I'm providing users driving directions to a particular location. there are three ways they can come so I wanted to allow them to print only the direction they want.

i think i'll go with the html... i'm complicating my life aren't I :D

11-06-2006, 06:45 PM
this is a css question but I'll ask it here because it relates.

if I use the 3 html file approach, how do i make my links work like this?

<link rel=alternate media=print href="print_linecard.html">

this prints an external link without opening it... but this particular code is a 'page-wide' code. how do i recode this to get the effect onclick?

(basically I need to have the href in the above code dependant on what link is clicked)

11-06-2006, 07:05 PM
You shouldn't be putting links to other pages in the link tag. You should be changing the stylesheet. Look up a stylesheet changer. There are plenty out there. You'll probably want a JS one.

11-06-2006, 08:04 PM
The alternate page to print option only works in IE. All other browsers will just print whatever part of the current page that the current print media stylesheet tells it to.

What you need to do is set up the Javascript in the print buttons to switch the print media stylesheet to be the one that hides everything except what you want that button to print.

Mr J
11-06-2006, 08:21 PM
Someones bound to shout at me but take a look at this js example that prints the contents of a div(s), see if this will do


Not sure how cross browser it is though

11-06-2006, 08:27 PM
Seems to work in firefox but would be nice if the popup closed by itself hmm or maybe the content was loaded into a hidden iframe and then the iframe was printed.

11-06-2006, 09:52 PM
Aero, you hit on what i was trying to get at.

Would loading the div content into a hidden iframe and then printing it work? if so, how?

Maybe you can explain how changing the stylesheet would help... because a stylesheet (to my knowledge) only changes the appearance of the page, which I don't want.... I just want a section of the page to be printed.

for ex: http://collab.concordia.ca/english.html --> click on Directions. This is what I want to do. I want to give people the option of just printing their own route instead of the whole page

11-06-2006, 10:10 PM
You use a stylesheet to change the "print" appearance of the page so that all of the parts you don't want are display:none

11-06-2006, 10:39 PM
hers is what you do:

create a hidden iframe as suggested.... have the iframe load a html file whos' html is as such:

<link href="yourcssfile.css">
<script type=text/javascript>
function PrinT(){
<div id=printarea></div>

then in your main page have the buttons call to a function that grabs the innerHTML (or outerHTML, which ever you prefer) of the section of the page you want to print. it then writes that into the iframe. after writing it to the iframe, it then calls the function inside the iframe. and there you have it.

main file should contain the below some where:

<iframe src="print.html" id=IF1 name=IF1></iframe>

script type=text/javascript>
function printDiv(divid){

be sure that if you are using .css files that both the main window and the iframe have the <link> to them.

Mr J
11-06-2006, 11:16 PM
Seems to work in firefox but would be nice if the popup closed by itself hmm or maybe the content was loaded into a hidden iframe and then the iframe was printed.

No iframe was used and it does close in IE but I've yet to find a way to close itself in Firefox

11-07-2006, 06:26 AM
Other browsers will automatically print the current page when you select print. The only cross browser way to do it is to swap media=print stylesheets that hide everything except the div to be printed.

11-07-2006, 07:32 AM
To explain what Felgall is talking about, its something like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="defaultstyle.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="dir1.css" type="text/css" media="print" id="printsheet" />
<script type="text/javascript">
function printDir(what)
return false;
<div class="box" id="directions1">This is directions 1</div>
<a href="#" onclick="return printDir('dir1');" id="print1">Print Directions 1</a>
<div class="box" id="directions2">This is directions 2</div>
<a href="#" onclick="return printDir('dir2');" id="print2">Print Directions 2</a>
<div class="box" id="directions3">This is directions 3</div>
<a href="#" onclick="return printDir('dir3');" id="print3">Print Directions 3</a>


html, body {
font-family:Verdana, Arial, Helvetica, sans-serif;
.box {
border:1px solid #000;

#directions2, #directions3, #print1, #print2, #print3 {

#directions1, #directions3, #print1, #print2, #print3 {

#directions1, #directions2, #print1, #print2, #print3 {

11-08-2006, 02:22 AM
i see i see :)

why couldn't i simply re-use the dir1.css, as the others are exact replicas?

p.s: thank you all for your help, this is awesome :)

11-08-2006, 02:43 AM
They aren't exact replicas. Look closer. Each one has a different div not set to display:none.