control what parts of webpage prints out

victory92 · Mar 21, 2005

I am trying to print only a portion of a web page when a print button is pressed. I have done what the following site suggests - but I keep getting the entire web page printing.

http://javascript.about.com/library/blprint.htm

Can anyone help me? I am unsure of what should be put in the onClick.

Thank you

Mighty · Mar 22, 2005

I use a combination of style sheets and javaScript to do this. I have the following code in a myStyleSheet.css file:

@media print {
#screenView {display: none;}
#printView {display: block;}
}

@media screen {
#screenView {display: block;}
#printView {display: none;}
}

Then my actual HTML file would be something like:

<HTML>
<HEAD>
<LINK REL=stylesheet HREF="/styles/myStyleSheet.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript">

window.onbeforeprint()
{
printView.innerHTML = Details.innerHTML;
}

</SCRIPT>
</HEAD>
<BODY>
<DIV ID="screenView">
<P>This would contain all the stuff that you want to appear on the screen when the user looks in the browser. This paragraph would not appear on the printout.</P>

<DIV ID="Details">
<P>All the stuff in here would also appear on the screen when the user is looking through a browser. The difference is that if the user chose to print the page, this is the only section that would print.</P>
</DIV>

<P>This stuff would appear on the screen but not in the printout.</P>

</DIV>
<DIV ID="printView>
</DIV>
</BODY>
</HTML>

I hope that helps. This works fine for me on my IE only Intranet. Not too sure about the cross-browser functionality.

Mighty

victory92 · Mar 22, 2005

Mighty Programmer -

I've inserted the code - however I am getting an error on line 33 - which is

printView.innerHTML = Details.innerHTML;

I do not understand what innerHTML is. I'm a rookie here! The error is Object doesn't support this property or method.

This error only appears when I test with FrontPage.

When I press print button in an IE browser... The full page is printed.

If you want to take a look - it's at

http://www.almosthomefoundation.org/membership4.html

I appreciate your help. I'm sure I'm doing something wrong.

Thanks!!

Mighty · Mar 22, 2005

My fault. It should be:

function window.onbeforeprint()
{
printView.innerHTML = Details.innerHTML;
}

Mighty

victory92 · Mar 22, 2005

I still can't get this to work. I wish the error messages were more meaningful.

Could you please take a look at my print button statement. The error I get is that object doesn't support this method or property

I appreciate any help you can give... This is a bit frustrating when you cannot see what's wrong.

Thanks

BillyRayPreachersSon · Mar 22, 2005

Mighty,

I do not understand why JavaScript is needed at all. Even if it were, I am at a loss to understand why you would ever think of trying to define a function with this code:

Code:

function window.onbeforeprint() {

victory92,

I suggest not using any JavaScript (with the possible exception of a button that calls the print method of the window object), and sticking with simple CSS that would work whether the user instigated printing from the print button on the page, or from the File menu, etc.

If the CSS you copied from the site you gave to no joy, I'd try and resolve that issue - it should have worked with not many issues.

My advice? Take this up in the HTML / CSS forum. There have been a spate of these queries recently, so I'm sure many people will be able to help you out.

Hope this helps,
Dan

The answers you get are only as good as the information you give!

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!

control what parts of webpage prints out

victory92

Programmer

Mighty

Programmer

victory92

Programmer

Mighty

Programmer

victory92

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor