Print script

**bassa** · 10-05-2008, 04:14 PM

Hello,

I have been looking for a print script but haven't found one so far, or at least, the specific one I would like to have.

Essentially, I just need a simple(?) print script that can be applied to a button (in this case a CSS class) that, when pressed, gives the usual Print dialogue.

However, the printed area of the page should be determined by Div ID's, or maybe other tags as well, so that it doesn't print the BODY, but merely a specific region with the headline and text and images.

Anyone have one of these, or know where to find one?

Thanks!

Cheers,
Bassa

**molendijk** · 10-05-2008, 07:35 PM

Code:

<script type="text/javascript">
var gAutoPrint = true; // Flag for whether or not to automatically call the print function
function printtekst(){
if (document.getElementById != null)
{var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null)
{var headTags = document.getElementsByTagName("head");
if (headTags.length > 0)html += headTags[0].innerHTML}
		html += '\n</HE' + 'AD>\n<BODY onblur=close()>\n';
		var printReadyElem = document.getElementById("tekst");
	if (printReadyElem != null)
		{html += printReadyElem.innerHTML;}
		else{alert("Could not find the printReady section in the HTML");
			return;}			
		html += '\n</BO' + 'DY>\n</HT' + 'ML>';
		
		var printWin = window.open("","printtekst");
		printWin.document.open();
		printWin.document.write(html);
		printWin.document.close();
		if (gAutoPrint)
			printWin.print();
	}else{alert("Sorry, the print ready feature is only available in modern browsers.");

	}}

</script>

<input type="button"  VALUE='Print' onclick="javascript:void(printtekst())"></input><br>

<div id="tekst">this will be printed, because it has "id=tekst".</div>

<div>this will NOT be printed, because it DOESN'T have "id=tekst".</div>

Arie Molendijk

**Medyman** · 10-06-2008, 12:35 AM

There is absolutly no need to go the javascript route here. At least not the extent that is mentioned above. You'll need some sort of javascript to initiate the print screen.

Here is a simple snippet that does just that.

As far as controlling what is printed and what is not, that can be done through CSS and print stylesheets. Here is an article on A List Apart that explains the usage of print-only stylesheets.

If you want to strictly control what is printed, you could add a print-only stylesheet like the following:

Code:

/* Hides ALL divs on the page */
div {
   display:none; 
}

/* Shows all divs with a class of print */
.print {
   display:block;
}

Next, you would simply add "print" to the class of any element that you want to print.

**bassa** · 10-06-2008, 04:11 PM

Very nice, indeed.

Thank you both. I'll look into these suggestions and see how they work out.

I don't have a printer myself, unfortunately, so I cannot verify how it will look "on paper", but I do have Adobe Acrobat Pro installed, so that will allow me to print to a file instead and check it out an alternative way.

Cheers!
Bassa

**bassa** · 10-06-2008, 09:03 PM

Ok, so I tried out Medyman's example above, but I just can't get it to work.

I'll hook you up with my code to display what I did.

Here's the stylesheets enabled in my HEAD:

Code:

<link href="css/froso.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />

Could it be that they're conflicting somehow?

Here's my print button:

Code:

<a href="javascript:window.print()" class="print"></a>

Below contains the HTML markup that shows the contents and containers of what is to be printed.

Code:

<div id="page" class="print">
<div class="h1">Velkommen til Fr&oslash;s&oslash; K&oslash;kkenfornyelse</div>
<div id="textarea" class="text">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed velit erat,   placerat in, placerat eget, iaculis id, turpis. Ut malesuada ipsum vitae nisl.   Aliquam sem. <span class="link"><a href="#" class="link">Nullam sapien enim</a></span>, scelerisque quis, sollicitudin vitae, lobortis   ac, neque. In justo. Vestibulum ante ipsum primis in faucibus orci luctus et   ultrices posuere cubilia Curae; Sed posuere, sapien suscipit interdum   condimentum, velit nibh adipiscing purus, in vulputate dolor mauris et tellus.   Etiam orci. Maecenas erat dui, ornare id, condimentum at, fermentum a, leo. Duis   porttitor cursus orci. Proin posuere nisi a augue. Suspendisse vulputate   ullamcorper nisi. Nullam mattis urna non lacus. Suspendisse at metus. <span class="link"><a href="images/listenmusic.jpg" rel="facebox"class="link">Pr&oslash;v og klik p&aring; mig</a></span>. Dui id tempus posuere, odio est placerat massa, at feugiat arcu   elit a tortor. Nullam velit velit, aliquet vel, tincidunt in, aliquam nec,   lectus. Maecenas non diam nec orci dignissim tempor. Sed id pede.</p>

  <p>Nullam sit amet tellus. Nullam dapibus. Sed ut ligula ac massa porta aliquam.   Vivamus viverra lorem congue odio. Aliquam id lacus commodo pede euismod   aliquam. Duis vulputate, leo sit amet egestas dictum, nisi pede adipiscing enim,   quis pharetra odio neque ac odio. <span class="link"><a href="#" class="link">Sed eget dolor</a></span>. Duis est eros, mattis eget,   pharetra et, facilisis nec, leo. In leo dolor, porta a, pellentesque eget,   interdum ac, risus.</p>
</div>

</div></div>

And here's the CSS I'm using:

Code:

/* Hides ALL divs on the page */
div {
   display:none; 
}

/* Shows all divs with a class of print */
.print {
   display:block;
}

Anything wrong somewhere?

I get a blank page with only the title of the webpage displayed.

Cheers,
Bassa

**Medyman** · 10-06-2008, 11:32 PM

Since you're hiding all DIVs, you need to add the print class to all that you want to show. In your code snippet, you're printing the container div, but none of the divs within it. To fix it, you could add the print class to all the child divs, or change your CSS to:

Code:

/* Hides ALL divs on the page */
div {
   display:none; 
}

/* Shows all divs with a class of print */
.print, .print div {
   display:block;
}

**bassa** · 10-07-2008, 05:46 AM

That didn't work.

I've got the main text and headline body inside the 'page' Div ID, but adding the class .print to it doesn't help? It seems a bit weird.

I have a few classes inside the 'page' ID container, and there will likely come one or two more container ID's as well, to better control images within the text and so on and so forth.

It's just odd that it won't print the .print class, nor the #print ID container?

Cheers,
Bassa

**Medyman** · 10-07-2008, 02:25 PM

Your HTML should be this:

Code:

<div id="page" class="print">
	<div class="h1 print">Velkommen til Fr&oslash;s&oslash; K&oslash;kkenfornyelse</div>
	<div id="textarea" class="text print">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed velit erat,   placerat in, placerat eget, iaculis id, turpis. Ut malesuada ipsum vitae nisl.   Aliquam sem. <span class="link"><a href="#" class="link">Nullam sapien enim</a></span>, scelerisque quis, sollicitudin vitae, lobortis   ac, neque. In justo. Vestibulum ante ipsum primis in faucibus orci luctus et   ultrices posuere cubilia Curae; Sed posuere, sapien suscipit interdum   condimentum, velit nibh adipiscing purus, in vulputate dolor mauris et tellus.   Etiam orci. Maecenas erat dui, ornare id, condimentum at, fermentum a, leo. Duis   porttitor cursus orci. Proin posuere nisi a augue. Suspendisse vulputate   ullamcorper nisi. Nullam mattis urna non lacus. Suspendisse at metus. <span class="link"><a href="images/listenmusic.jpg" rel="facebox"class="link">Pr&oslash;v og klik p&aring; mig</a></span>. Dui id tempus posuere, odio est placerat massa, at feugiat arcu   elit a tortor. Nullam velit velit, aliquet vel, tincidunt in, aliquam nec,   lectus. Maecenas non diam nec orci dignissim tempor. Sed id pede.</p>
		<p>Nullam sit amet tellus. Nullam dapibus. Sed ut ligula ac massa porta aliquam.   Vivamus viverra lorem congue odio. Aliquam id lacus commodo pede euismod   aliquam. Duis vulputate, leo sit amet egestas dictum, nisi pede adipiscing enim,   quis pharetra odio neque ac odio. <span class="link"><a href="#" class="link">Sed eget dolor</a></span>. Duis est eros, mattis eget,   pharetra et, facilisis nec, leo. In leo dolor, porta a, pellentesque eget,   interdum ac, risus.</p>
	</div>
</div>

Is that what you have? If not, post a link to your site. What I suggest does work if done right. There might be other things on your page that are preventing it from working.

**bassa** · 10-07-2008, 04:49 PM

Yeah, mate. I've done exactly as you wrote, but still to no avail.

Here's a link to the test site:

http://www.froso.dk/test/index.html

Cheers,
Bassa

**bassa** · 10-08-2008, 10:20 AM

Thank you very much Medyman for your invaluable help, although I did this "my own way" (I started from scratch and began testing various methods), and I finally got it to work beautifully.

Again, thank you!

Cheers,
Bassa

Thread: Print script

Thread Tools

Search Thread

Print script

Bookmarks

Bookmarks

Posting Permissions