Something really simple I hope!

Verdaccio

01-23-2012, 04:54 PM

Hello!

I have a script that prints a DIV and I am looking to set the font for the generated page, and the font color and size. But for the life of me, I cannot figure out if it can be done in this script, or if I have to setup a separate print.css.

Here is my script:

<script type="text/javascript">
function PrintDiv_print_all() {
var divToPrint = document.getElementById('print_all');
var popupWin = window.open('', '_blank', 'width=600,height=800,scrollbars=yes');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>

I am still learning this stuff and any help is appreciated! :)

Old Pedant

01-23-2012, 07:30 PM

There are better ways to do this, but...

popupWin.document.write(
'<html>\n'
+ '<head><style type="text/css">\n'
+ '* { font-family: courier; font-size: large; color: red; }\n'
+ '</style></head>\n'
+ '<body onload="window.print()">\n'
+ divToPrint.innerHTML
+ '</html>\n'
);

But of course if there are any inline styles in that <div> they will override the * default.

Verdaccio

01-23-2012, 08:16 PM

Hello and thanks for your reply and solution!

Yea, I am betting that I could do this more simply if I only knew what I was really really doing around java and CSS.

This started as simply wanting to have a print button on a page to print multiple divs and I ended up with this frankenscript and now I am trying to make it work.

I am happy to hear other ideas and I can only apologize for my patchwork knowledge. I am self-taught and I am learning and growing with each project. :)

Verdaccio

01-23-2012, 08:20 PM

I thank you for your help!

I am sure there has to be a better way of doing this. This started out with me trying to print multiple divs on a page, and thus I ended up with this frankenscript that now I am trying to make work.

I am open to other suggestions for doing this better, and I apologize for my patchwork knowledge of java and CSS. I am learning as I go! :)

Old Pedant

01-23-2012, 11:43 PM

Okay, one way to do this:

<style type="text/css">
@media SCREEN {
div { display: block; }
}

@media PRINT {
div { display: none; }
div.PRINTME { display: block; font-family: courier; font-size: medium; }
}
</style>
...
<script type="text/javascript">
function printDiv( id )
{
var pdiv = document.getElementById(id);
var saveClass = pdiv.className;
pdiv.className = "PRINTME";
window.print();
pdiv.className = saveClass;
}
</script>

You can expand on that theme. As shown, that will only affect div's. If you need it to affect content outside of div's then the CSS needs to be adjusted. But the concept is correct.

Basically, you can use the media choice to completely control the appearance of anything on the page.