This content originally appeared on David Walsh Blog and was authored by David Walsh
Media queries provide a great way to programmatically change behavior depending on viewing state. We can target styles to device, pixel ratio, screen size, and even print. That said, it’s also nice to have JavaScript events that also allow us to change behavior. Did you know you’re provided events both before and after printing?
I’ve always used @media print in stylesheets to control print display, but JavaScript provides beforeprint and afterprint events:
function toggleImages(hide = false) {
document.querySelectorAll('img').forEach(img => {
img.style.display = hide ? 'none' : '';
});
}
// Hide images to save toner/ink during printing
window.addEventListener('beforeprint', () => toggleImages(true))
window.addEventListener('afterprint', () => toggleImages());
It may sound weird but considering print is very important, especially when your website is documentation-centric. In my early days of web, I had a client who only “viewed” their website from print-offs. Styling with @media print is usually the best options but these JavaScript events may help!
The post JavaScript print Events appeared first on David Walsh Blog.
This content originally appeared on David Walsh Blog and was authored by David Walsh
David Walsh | Sciencx (2022-12-30T00:12:37+00:00) JavaScript print Events. Retrieved from https://www.scien.cx/2022/12/30/javascript-print-events/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.