site-wide printer-friendly print script

IE not working

[patricia_e]

Hi,

I'm trying to create a printer-friendly javascript function that will be included on all pages of my site. I have a link on the page that calls a function called showPrintPage(). This is the code for that function:

function showPrintpage(){
document.getElementById("dontPrintTop").style.display = "none";
document.getElementById("dontPrintLeft").style.display = "none";
document.getElementById("copyright_td").style.display = "none";
document.getElementById("relatedlinks_td").style.display = "none";
document.getElementById("printerFriendlyRow").style.display = "none";
document.getElementById("hide").style.display = "inline";
window.print();
}

... on each web page via an include...

<a href="" class="printerFriendlyRow" onclick="showPrintpage();">Printer-friendly page</a>

It hides all the "fluff" navigational things and then prints the page. Right now I'm testing it on Netscape 7.1 and IE 6.0.

It works like I want it to in Netscape 7.1 but in IE 6.0, after some time, it refreshes to the index page in that current directory.

Any ideas on what is causing this?

Also, I'm trying to set the timeout to have a longer delay in refreshing on both browsers but haven't figured out the code for that part yet.

Thanks,

Patricia

[adni18]

In HTML, the part of your link:

<a href=""

is basically the same as:

<a href="/"

Your link should start off something like this:

<a href="#"

or

<a href="javascript:void(0)"

[patricia_e]

Yes, but then it takes away the nice refreshing of the screen after a few seconds to the non-printer-friendly version. To go "back" the user must not hit their back button because this would jump them one too many pages back. This is because when they hit the "printer-friendly" link, it refreshes the page and, using css, hides the areas that I don't want to print. So, they hit the "printer-friendly" link, it hides the images but stays on the same page, the printer dialog box pops up, they hit print and the page automatically reloads itself and the web-friendly version reappears. They don't have to get too confused by having to do anything to get back to where they were. The only downside to this was that my supervisor wanted me to delay the time that it takes to go back (make it wait a little while longer) and also it wasn't working in IE 6. In IE 6, it would go up to the index file instead of refreshing that particular page.

[whoisgregg]

This is because when they hit the "printer-friendly" link, it refreshes the page and, using css, hides the areas that I don't want to print.

To have a CSS stylesheet that is always used for printing, just define your stylesheets like so:

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

No refreshes or extra javascript required. Of course, it brings up the question of user experience because how do they know the page will be made pretty for printing? I like the idea of using javascript to hide the same things the CSS will hide, so why not have your javascript toggle the printing stylesheet to be the main stylesheet? That way, you don't need to change your javascript every time the printing CSS changes. :)

added bold, corrected rel="stylesheet"

[whoisgregg]

Here's a step farther, declare your CSS styles with an id like so:

<link href="/css/screen.css" rel="stylesheet" media="screen" type="text/css" id="screenCSS" />
<link href="/css/print.css" rel="stylesheet" media="print" type="text/css" id="printCSS" />

And use this javascript to toggle:

function ToggleCSS() {
var screenCSS = document.getElementById('screenCSS');
var printCSS = document.getElementById('printCSS');
if (screenCSS.flag == true) {
screenCSS.href = screenCSS.oldhref;
screenCSS.flag = false;
//alert('When you are done printing, just click the \'Printer Friendly\' link again.');
} else {
screenCSS.oldhref = screenCSS.href;
screenCSS.href = printCSS.href;
screenCSS.flag = true;
}
}

And a link like so:

<a href="#" onclick="ToggleCSS();return false;">Printer Friendly</a>

[patricia_e]

I'm sorry, but you guys/gals rock! Sometimes, I just sit here in awe of the huge help that is freely given on sites like these. You are the best! I hope you have stellar Mondays! THANK YOU!