JavaScript print Occasions

December 30, 2022

2

Media queries present an effective way to programmatically change habits relying on viewing state. We will goal types to system, pixel ratio, display screen dimension, and even print. That stated, it is also good to have JavaScript occasions that additionally permit us to alter habits. Do you know you are offered occasions each earlier than and after printing?

I’ve all the time used @media print in stylesheets to regulate print show, however JavaScript supplies beforeprint and afterprint occasions:

perform toggleImages(disguise = false) {
  doc.querySelectorAll('img').forEach(img => {
    img.type.show = disguise ? 'none' : '';
  });
}

// Cover photographs to save lots of toner/ink throughout printing
window.addEventListener('beforeprint', () => toggleImages(true))
window.addEventListener('afterprint', () => toggleImages());

It might sound bizarre however contemplating print is essential, particularly when your web site is documentation-centric. In my early days of net, I had a consumer who solely “considered” their web site from print-offs. Styling with @media print is often the very best choices however these JavaScript occasions might assist!

The right way to Create a RetroPie on Raspberry Pi – Graphical Information
As we speak we get to play wonderful video games on our tremendous powered sport consoles, PCs, VR headsets, and even cell units. Whereas I get pleasure from enjoying new video games nowadays, I do lengthy for the retro gaming programs I had after I was a child: the unique Nintendo…
I’m an Impostor
That is the toughest factor I’ve ever needed to write, a lot much less admit to myself. I’ve written resignation letters from jobs I’ve beloved, I’ve ended relationships, I’ve failed at a number of duties, and let myself down in my life. All of these emotions have been very…