noblends
asked on
javascript: override window.print()?
Here's what I need:
1) User opts to print a webpage (IE, FF, Safari)
2) I need to execute some Javascript code on my elements to clean things up a bit
3) User is presented with print dialogue box and page to print
How can I override the window.print() command to execute some Javascript before the page is rendered for printing? Any answer that includes jQuery code is acceptable.
1) User opts to print a webpage (IE, FF, Safari)
2) I need to execute some Javascript code on my elements to clean things up a bit
3) User is presented with print dialogue box and page to print
How can I override the window.print() command to execute some Javascript before the page is rendered for printing? Any answer that includes jQuery code is acceptable.
ASKER
The user prints the page either by a keyboard shortcut (ctrl+p) or through the browser's menu. There are no "click this link to print" elements on my page.
With regards to changing the page using JS, there are a variety of things that need to be changed that only seem to with via JS, rather than a custom CSS print-only stylesheet.
For example, a page loads, then the majority of elements fade out. If the user prints this page, the faded-out items do not render. Using a CSS stylesheet (media="print") where all elements' opacity/visibility is set to 1/visible, will not make the elements render when printed. It appears that I need to change the opacity of the elements before the page is actually rendered for print.
With regards to changing the page using JS, there are a variety of things that need to be changed that only seem to with via JS, rather than a custom CSS print-only stylesheet.
For example, a page loads, then the majority of elements fade out. If the user prints this page, the faded-out items do not render. Using a CSS stylesheet (media="print") where all elements' opacity/visibility is set to 1/visible, will not make the elements render when printed. It appears that I need to change the opacity of the elements before the page is actually rendered for print.
Not sure if all browsers support it, but I believe there is a window.onprint event. But why can't the print css set the opacity?
Ah
it was IE and it is
window.onbeforeprint=funct
// change opacity here
}
it was IE and it is
window.onbeforeprint=funct
// change opacity here
}
Is it an option to let the user print in another way, by clicking a button on your page, which would allow you to fire off, onClick, some JavaScript statements and the print() function?
ASKER
mplungjan: window.onbeforeprint() is exactly what I need, however it has to work in FF and Safari.
eejones: there's no room (nor do I want to make room) for a print button on the page.
As for why a media="print" stylesheet doesn't work - I'm not entirely sure but I suspect it's partly because I load all my pages using AJAX and then use a substantial amount of JS to style them.
You can see http://gdad.sva.edu/#blog for an example. FF is the worst printer - doesn't even capture the whole page.
eejones: there's no room (nor do I want to make room) for a print button on the page.
As for why a media="print" stylesheet doesn't work - I'm not entirely sure but I suspect it's partly because I load all my pages using AJAX and then use a substantial amount of JS to style them.
You can see http://gdad.sva.edu/#blog for an example. FF is the worst printer - doesn't even capture the whole page.
ASKER
As far as I'm concerned, this cannot be done.
1. don't fade
2. use <link rel="alternate" media="print" href="printable.pdf" />
2. use <link rel="alternate" media="print" href="printable.pdf" />
the answers have been given
1. for IE use onBeforePrint
2. For all browsers give an alternative url for the print
1. for IE use onBeforePrint
2. For all browsers give an alternative url for the print
Accept http:#25177948
Alternatively try this (not tested):
function printAll() {
var w = window.open('','newwin');
w.document.write('<body onLoad="window.focus(); window.print()">'+document
w.document.close();
return false
}
window.print=printAll;
Alternatively try this (not tested):
function printAll() {
var w = window.open('','newwin');
w.document.write('<body onLoad="window.focus(); window.print()">'+document
w.document.close();
return false
}
window.print=printAll;
ASKER
That won't work because I don't have a Print button/link on the page. Whatever javascript would be triggered (such as your window.open() method) would have to be triggered onPrint (so either when user presses ctrl+p or hits the print icon). I've come to realize that this is simply not possible.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This question should have been terminated weeks ago when I answered it myself on 8/25. I've tried closing it many times however I've been unable to do so. The last response by mplugjan was an answer, however if one follows the thread one would see that it does not answer my question (see my comment on 9/24).
With regards to the grade, I know you're just trying to do the right thing, and now that I see what "C" means I'm more than willing to change it. So how do I do that and how can I put this question to rest?
With regards to the grade, I know you're just trying to do the right thing, and now that I see what "C" means I'm more than willing to change it. So how do I do that and how can I put this question to rest?
Just one last comment. I repeatedly answered this. If the suggestions I gave you did not work for you, then the logical conclusion is that with your constraints the answer is : not possible.
That was the result already on the 25 of aug.
Thanks for reconsidering. It is not the points just the principle of not shooting the messenger or punishing the bearer of bad news
That was the result already on the 25 of aug.
Thanks for reconsidering. It is not the points just the principle of not shooting the messenger or punishing the bearer of bad news
ASKER
Solution did not achieve original objective.
How are you changing the page content with JavaScript? Are you using document.write or innerHTML or something else?
If you could paste some code it would help to understand your task.