Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

JavaScript print Events

By  on  

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!