Log in

View Full Version : 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
<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 (http://www.htmlgoodies.com/beyond/javascript/article.php/3471121#grace) 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 (http://alistapart.com/stories/goingtoprint/) 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:

/* 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:


<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? :o

Here's my print button:


<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.


<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:


/* 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:


/* 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:


<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