Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

printing content within a <div> tag 3

Status
Not open for further replies.
shnazz

shnazz

Technical User
Jul 27, 2004
22
US
Hi,

All the pages in my site are broken up by several div's with id's. My site is NOT framed. I want to create a "print" button on all the pages that will only print the main content of a page, not things like the navigation bar or footer. All the main content per page is in a div tag called "main".

Any ideas as to how I can do this dynamically and efficiently?

Any help is appreciated. :)
 
Sort by date Sort by votes
It's a CSS question, really and the answer is:

Assign CLASS attributes to the DIVs you DON'T want printed, such as:

<div id='header' class'noprint'>...</div>

Then, in your HEAD section, add:

Code: 
<style type="text/css" media="print">
.noprint{
 display:none;
}
</style>

Using JavaScript's window.print() will send the page to the printer, but you'll only see those items NOT in the .noprint class. Meanwhile, everything will appear on the screen.

'hope that helps.

--Dave
 
Upvote 0 Downvote
Eric Meyer's article on aListApart.com should hit that nail right in the head.


All you need is there and it works perfectly.

Gives you a lot of information, so read carefully, it will be worth it.


good luck

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------
 
Upvote 0 Downvote
thnx Lookingforinfo and grtfercho.

I just hope this solution does not display the "main" content in the same exact position it would have been had things like the nav bar been displayed.
 
Upvote 0 Downvote
You could also do this with JavaScript:

(untested)

Code: 
<html>
<head>
<title>stuff</title>
<script language="javascript">
function getPrintPage() {
    var pp = window.open();
    pp.document.writeln(document.getElementById('stuff_to_print').innerHTML);
    pp.print();
}
</script>
</head>

<body>
<div>Do not print this div.</div>
<div id="stuff_to_print">Print this stuff.
<table border="1">
<tr><td>print this cell</td></tr>
<tr><td>and print this cell too</td></tr>
</table>
</div>
<input type="button" onclick="getPrintPage()" value="printer friendly version">
</body>
</html>

*cLFlaVA
----------------------------
Ham and Eggs walks into a bar and asks, "Can I have a beer please?"
The bartender replies, "I'm sorry, we don't serve breakfast.
 
Upvote 0 Downvote
Using display:none will act as if the elements were never there.

If you WANTED space to be saved where these items were (on some other project, perhaps), you would, instead, use: visibility:hidden (as opposed to visibility:visible).

--Dave
 
Upvote 0 Downvote
I just hope this solution does not display the "main" content in the same exact position it would have been had things like the nav bar been displayed.
Click to expand...


In the article I submitted above( from Eric Meyer) there's a section that deals with that problem. Just give it a read and you'll see how to output a clean page.

good luck, let us know how it went

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------
 
Upvote 0 Downvote
FYI:

I tested cLFlaVA's 'untested' code. It almost works. I needed to add pp.document.close(); before the print() command to make it work.

--Dave
 
Upvote 0 Downvote
CLflava, your code worked except that it did not retain my styles from my stylesheet. Is there any way to include the styles?

the css method would retain the styles, but after reading the article, I realized it would be more tedious for me as I have several div id's, and I wish to keep it that way.

thnx
 
Upvote 0 Downvote
Move your CSS into a separate style sheet and include it in your page as:

<link rel='stylesheet' type='text/css' href='path/cssFile.css'>

Then when you write the document in the new window, add the same:

Code: 
var pp = window.open();
[b]pp.document.writeln("<html><head><link rel='stylesheet' type='text/css' href='path/cssFile.css'></head><body>");[/b]
pp.document.writeln(document.getElementById('stuff_to_print').innerHTML);
[b]pp.document.writeln("</body></html>");
pp.document.close();[/b]
pp.print();

'hope that helps.

--Dave
 
Upvote 0 Downvote
thank you everyone. My code is working great, and in the process I learned alot.

- shnazzz
 
Upvote 0 Downvote
Thanks, LookingForInfo, for covering me while I was in a hellacious meeting.

;)

*cLFlaVA
----------------------------
Ham and Eggs walks into a bar and asks, "Can I have a beer please?"
The bartender replies, "I'm sorry, we don't serve breakfast.
 
Upvote 0 Downvote
Hi clFlava I've tried your javascript code for "printing content within a <div> tag"
and on this line:

pp.document.writeln(document.getElementById('stuff_to_print').innerHTML);

I get the following message

"object doesn't support this property or method"

Any ideas??
 
Upvote 0 Downvote
what browser are you using?

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
cLFlaVA - see thread216-984503

He had a typo

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Upvote 0 Downvote
i feel famous! a post title with my name in it!

oh well, thanks for covering for me.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
974
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
872
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
602
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top