[SOLVED] Javascript Printer-Friendly Page "Creator"

Stuart · #1 (**permalink**) Oct 8th, 2007, 20:06

Hello again,

I am trying to work out a small problem I am having. What I am trying to do is to create a link that says 'Print this page', or something like that. When clicked, it will bring the user to print.htm, where a javascript code will output everything that is inside a certain tag, such as

HTML: Select all

<div id="content"></div>

And the link would be

HTML: Select all

<a href="print.htm" target="_blank">Print this page</a>

I have the code:

Code: Select all

 <script language="javascript">
     document.write(window.opener.document.getElementById("content").innerHTML);
     window.print();
</script>

Now the only thing is to not take the inner.HTML of an element with an id, but instead to take everything out of the body. I was thinking this:

Code: Select all

<script language="javascript">
document.write(window.opener.document.getElementsByTagName("body").innerHTML);
</script>

I used document.getElementsByTagName("body") instead of document.getElementById("content"), but it does not seem to work. Print.htm is showing me "undefined". (What is going on here??)

Any help would be appreciated.

Thanks,
SWagner

PS: My server does not allow/support asp, php, cgi, cfm, etc... so using those (although they're much better to use!), is out of the question.

alexgeek · #2 (**permalink**) Oct 8th, 2007, 20:23

The following may work:

Code: Select all

<script type="text/javascript">
var x=document.getElementById("content").innerHTML;
myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write(x)
myWindow.print();

</script>

alexgeek · #3 (**permalink**) Oct 8th, 2007, 20:25

Tested in FF with the following code:

HTML: Select all

 <html>
<head>
<script type="text/javascript">
function printIT() {
var x=document.getElementById("content").innerHTML;
myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write(x)
myWindow.print();
}
</script>
</head>

<body>
<a href="#" onClick="printIT();">click</a>
<div id="content">Hello world</div>
</body>
</html>

Stuart · #4 (**permalink**) Oct 8th, 2007, 20:28

Thanks for replying, but I am trying to output the entire body.
SWagner

alexgeek · #5 (**permalink**) Oct 8th, 2007, 20:30

Oh sorry! Try making your body tag like this:
<body id="content">

Stuart · #6 (**permalink**) Oct 8th, 2007, 20:33

I had that idea too, but I have over 50 web pages that I would have to do this with. A little tedious, don't you think?

Stuart · #7 (**permalink**) Oct 8th, 2007, 20:35

Are you sure that

Code: Select all

<script language="javascript">
document.write(window.opener.document.getElementsByTagName("body").innerHTML);
</script>

wouldn't work somehow?

alexgeek · #8 (**permalink**) Oct 8th, 2007, 20:36

Quote:

Originally Posted by swagner

I had that idea too, but I have over 50 web pages that I would have to do this with. A little tedious, don't you think?

I think I'm missing something.. as either way you will have to edit those 50 pages if they are static html.

Stuart · #9 (**permalink**) Oct 8th, 2007, 20:43

I am still curious. Javascript has always worked for me. I think that I am just using the wrong code.

Code: Select all

document.getElementsByTagName("body").innerHTML

seems ok, but for some reason, it crashes and displays "undefined" on print.htm. Is it possible that the code is supposed to be getElementByTagName instead of Elements? Maybe it is just some little thing like that...

alexgeek · #10 (**permalink**) Oct 8th, 2007, 20:55

try the following:

Code: Select all

<html>
<head>
<script type="text/javascript">
function printIT() {
var spanArray = document.getElementsByTagName('body');
myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write(spanArray[0].innerHTML)

}
</script>
</head>

<body>
<a href="#" onClick="printIT();">click</a>
<div id="content">Hello world</div>
</body>
</html>

Stuart · #11 (**permalink**) Oct 8th, 2007, 21:02

Thanks, it's working great!
Regards,
SWagner

alexgeek · #12 (**permalink**) Oct 8th, 2007, 21:03

You're welcome, I wasted some ink on this

.
Glad you got it working.

Stuart · #13 (**permalink**) Oct 8th, 2007, 21:10

One more thing. I have a

Code: Select all

document.write('<img src="file.jpg" />')

on my page (index.htm). Now it is being produced twice on print.htm since the original code (see above) is written, as well as the image written by the code on my page (index.htm). Any solution?

alexgeek · #14 (**permalink**) Oct 8th, 2007, 21:14

Could you show the source of the entire page?
I'm not too certain of what is happening.

Stuart · #15 (**permalink**) Oct 8th, 2007, 21:29

Yes, here is the source:

HTML: Select all

<!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">
<head>
    <title>My Page</title>
   
<style type="text/css">
<!--
.style1 {
    font-size: 20px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
}
.seperator {color: #acacac;}
.more {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #151078; }
-->
</style>
</head>

<body>

<hr />

<div id="sectiontitle"><script type="text/javascript">//<![CDATA[
document.write('<img src="http://www.webforumz.com/images/spacer.gif" id="mainImg" width="740" height="193" alt="" border="0" />');
//]]></script></div>

<hr />

<!-- wrap -->
<div id="wrap" class="threecolumn">

<!-- content -->
<div id="content" class="threecolumn"><br />

<div class="threecolumn">
<p class="style1">
About Us
</p>
<p align="justify">
Text
</p>
<p align="justify">
Text
</p>
<p>
<a href="about.htm" title="">Read more</a><span class="more"> &raquo;</span><br />
<br />
<img src="http://www.webforumz.com/images/spacerGRAY.gif" height="3" width="740" alt="" />
</p>
</div> 
<!-- end -->

</div>
<!-- end content -->

</div>
<!-- end wrap -->
</body>
</html>

The image now appears twice since it is already on this page, written by Javascript. but the Javascript code is also "printed", so on print.htm, the image appears twice.

Thanks

Stuart · #16 (**permalink**) Oct 8th, 2007, 22:51

I don't like to do this, but ok. Here is the link.

alexgeek · #17 (**permalink**) Oct 8th, 2007, 22:57

Okay, is that the page the error is on?
and can you explain the error further?

Stuart · #18 (**permalink**) Oct 8th, 2007, 23:05

Yes. The error is in the middle of the page:

HTML: Select all

<div id="sectiontitle"><script type="text/javascript">//<![CDATA[
document.write('<img src="images/spacer.gif" id="mainImg" width="740" height="193" alt="" border="0" />');
//]]></script><noscript><img src="images/banner/noscript.jpg" width="740" height="193" alt="" border="0" /></noscript></div>

This code generates an image. The <noscript> part is not the error! The error is that the image the above code generates is copied into print.htm, the way it is supposed to. Ok so far? Now, the above code is also copied, meaning print.htm ends with two copies of this code: one finished copy (image), one "raw" copy (code). Do you see what I am getting at? There are two copies of this code being copied into print.htm. I need to eliminate one of them.

Stuart · #19 (**permalink**) Oct 8th, 2007, 23:40

If you still have problems understanding this, just ask. I know it's a little confusing...

alexgeek · #20 (**permalink**) Oct 9th, 2007, 00:06

I personally do not know of a solution I am afraid, maybe a "mentor" can help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] PHP Printer-Friendly Page	Stuart	PHP Forum	35	Oct 17th, 2007 23:47
[SOLVED] Show "Image" Depends On User "Status"?	Monie	Classic ASP	6	Oct 16th, 2007 01:22
? IS "meta name="robots" content="?" necessary in pages ?	Love2Java	Starting Out	6	Aug 8th, 2007 13:48
window.opener.document["nameForm"].getElementById("someid").value; doesnt work	drpompeii	JavaScript Forum	0	Feb 17th, 2007 23:09
printer-friendly web page	marisol	Web Page Design	4	Sep 28th, 2006 21:12

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Javascript Printer-Friendly Page "Creator"

[SOLVED] Javascript Printer-Friendly Page &quot;Creator&quot;

[SOLVED] Javascript Printer-Friendly Page "Creator"