Forum Moderators: open
How do you attain a nice look, pagination, maybe some footer e.g. page 1 of n etc. etc.
On one of our apps, our logo is very much integrated into the site header and looked odd when printed, so i added another logo that is more suitable to print and used display:none in the screen css, and then hide the original and show the print one in the print.css
Controlling page x of x is maybe difficult to achieve, as you have no way of knowing for sure what the users printer setup is, and browsers have built in headers and footers also.
I found splitting long tables of data over mnultiple pages problematic, as firefox tends to repeat <thead> <tfoot> elements on every page (iirc) which looks odd when your <tfoot> contains the table totals.
[edited by: benihana at 10:51 am (utc) on June 27, 2007]
Marshall
Post Script:
I was typing my post while benihana was posted. I have a JavaScript that pulls selected sections of a page into a "Printer Friendly" version which can incorporate a template design for the content to be interted in. It utilizes "id"s to grab the appropriate sections, which I wrap in a <div> for ease. With it, I eliminate everything from the page except the "You Are Here" and the content. If you want it, let me know. I will have to cut out URL's to post it.
[edited by: Marshall at 11:09 am (utc) on June 27, 2007]
<script type="text/javascript>
function PrinterFriendly()
{
var disp_setting="toolbar=yes,location=yes,directories=yes,menubar=yes,resizable=yes,";
disp_setting+="scrollbars=yes,width=700, height=600, left=10, top=10";
var content_vlue1 = document.getElementById("here").innerHTML;
var content_vlue2 = document.getElementById("content").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>PAGE TITLE</title>');
docprint.document.write('<style type="text/css">a {color: #000} a.visited {color: #000}</style>');
docprint.document.write('</head><body style="font-family: Arial; font-size: .8em;">');
docprint.document.write('<h3>SLOGAN Line 1<br>Slogan Line 2<br>Web Site Address</h3><hr>');
docprint.document.write(content_vlue1);
docprint.document.write('<hr>');
docprint.document.write(content_vlue2);
docprint.document.write('<center>');
docprint.document.write('<hr><p>Copyright © 1999-2007 ¦ MY COMPANY ¦ All Rights Reserved</p><p>MY COMPANY<br>My Address<br><a href="http://www.mysite.com/">www.MYSITE.com</a></p>');
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
THE LINK:
<a href="javascript:PrinterFriendly()" title="Printer Friendly Version - Requires JavaScript - Link opens in a new window">Printer Friendly Version</a>
Good Luck
Marshall
Marshall
[edited by: Marshall at 10:00 am (utc) on June 28, 2007]
