Howdy all. I have seen the tutorial about printing dynamic stuff but I want to print a table full of non dynamic content.

The user will fill out a few text boxes and then print the form to mail. If possible I would also like to print without the graphics too.

Does anyone have any input on this?

<h6>JUXTAFLO_</h6>
<img src="www.juxtaflo.com/images/flashkit_footer.jpg" border=0>

Hi

I've utilised this script many times and I'm sure you can too, it's pretty damn cool.

www.eggheadcafe.com/articles/20030627a.asp

All you need to do is put a DIV around the area you would like to print and give it an ID.

Let me know how you get on.

Digga

Sharing Knowledge Saves Valuable Time!!!

Great link. Thanks! It worked for the most part.

I have a few questions though....

1. Is there a way to end the print area? I put the same DIV tag at the end of the area I would like to print and it just ignores it.

2. I am wondering why there isnt code to just print the area in question instead of popping up a new window.

3. If I dont have a choice about the 2nd window thing, Can I specify a background color for this new window?

Thanks for your help Digga.

<h6>JUXTAFLO_</h6>
<img src="www.juxtaflo.com/images/flashkit_footer.jpg" border=0>

Hi

I'll answer your questions in order.

1. You can't have to DIV's with the same ID so the solution is this.

Encapsulate the entire area you would like to print like this:

<pre id=code><font face=courier size=2 id=code> &lt;div id="contentstart"&gt;
&lt;p&gt;My First Line&lt;/p&gt;
&lt;p&gt;My Second Line - Don Not Print&lt;/p&gt;
&lt;p&gt;My Third Line&lt;/p&gt;
&lt;/div&gt;</font id=code></pre id=code>

In this example the second line is the one you do not want to print so add another div to the second paragraph, like this:

<pre id=code><font face=courier size=2 id=code>&lt;div id="contentstart"&gt;
&lt;p&gt;My First Line&lt;/p&gt;
&lt;div id="myDiv"
&lt;p&gt;My Second Line - Don Not Print&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;My Third Line&lt;/p&gt;
&lt;/div&gt;</font id=code></pre id=code>

And change the javascript function like this setting the visible property to hidden and setting the onload event for the body tag:

<pre id=code><font face=courier size=2 id=code>&lt;script language="JavaScript"&gt;
function PrintThisPage()
{

var styleObj = document.getElementById('myDiv').style;
styleObj.display='none';

var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,";
sOption+="scrollbars=yes,width=750,height=600,left=100,top=25";

var sWinHTML = document.getElementById('contentstart').innerHTML;

var winprint=window.open("","",sOption);
winprint.document.open();
winprint.document.write('&lt;html&gt;&lt;LINK href=/mystyles.css rel=Stylesheet&gt;&lt;body onload=javascript:window.print();&gt;');
winprint.document.write(sWinHTML);
winprint.document.write('&lt;/body&gt;&lt;/html&gt;');
winprint.document.close();
winprint.focus();
}
&lt;/script&gt; </font id=code></pre id=code>

2. You can't do the selective printing without creating a new page.

3. Yes you can set the background by editing the javascript function above and adding the neccessary code, either setting the body tag attribute, the body tag style attribute etc, etc.

Digga

Sharing Knowledge Saves Valuable Time!!!

Edited by - Digga the Wolf on 31 Jul 2003 14:25:23

Almost forgot to tell you that this worked perfectly. Thank you for your help Digga. Its been very helpful. You can see the site at

www.gruvinc.com/contest.htm

<h6>JUXTAFLO_</h6>
<img src="www.juxtaflo.com/images/flashkit_footer.jpg" border=0>