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.
noblendsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

eejonesCommented:
How does the user choose to print the contents of the window? Do you have a button and onClick() or onSubmit() JavaScript?

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.
0
noblendsAuthor Commented:
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.

0
Michel PlungjanIT ExpertCommented:
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?
0
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

Michel PlungjanIT ExpertCommented:
Ah

it was IE and it is
window.onbeforeprint=function() {
  // change opacity here
}
0
eejonesCommented:
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?


0
noblendsAuthor Commented:
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.
0
noblendsAuthor Commented:
As far as I'm concerned, this cannot be done.
0
Michel PlungjanIT ExpertCommented:
1. don't fade
2. use <link rel="alternate" media="print" href="printable.pdf" />
0
Michel PlungjanIT ExpertCommented:
the answers have been given
1. for IE use onBeforePrint
2. For all browsers give an alternative url for the print
0
Michel PlungjanIT ExpertCommented:
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.body.innerHTML+'</body>')
  w.document.close();
  return false
}
window.print=printAll;

0
noblendsAuthor Commented:
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.
0
Michel PlungjanIT ExpertCommented:
So that is the answer then - use link alternate to serve another page


0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
noblendsAuthor Commented:
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?
0
Michel PlungjanIT ExpertCommented:
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
0
noblendsAuthor Commented:
Solution did not achieve original objective.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.