Media queries present an effective way to programmatically change habits relying on viewing state. We will goal types to gadget, pixel ratio, display screen dimension, and even print. That mentioned, it is also good to have JavaScript occasions that additionally enable us to alter habits. Do you know you are offered occasions each earlier than and after printing?
I’ve at all times used @media print in stylesheets to regulate print show, however JavaScript supplies beforeprint and afterprint occasions:
operate toggleImages(conceal = false) {
doc.querySelectorAll('img').forEach(img => {
img.type.show = conceal ? 'none' : '';
});
}
// Disguise photographs to save lots of toner/ink throughout printing
window.addEventListener('beforeprint', () => toggleImages(true))
window.addEventListener('afterprint', () => toggleImages());
It could 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 normally one of the best choices however these JavaScript occasions could assist!
5 HTML5 APIs You Didn’t Know Existed
Whenever you say or learn “HTML5”, you half anticipate unique dancers and unicorns to stroll into the room to the tune of “I am Horny and I Know It.” Are you able to blame us although? We watched the basic APIs stagnate for thus lengthy {that a} fundamental characteristic…
CSS vs. JS Animation: Which is Sooner?
How is it doable that JavaScript-based animation has secretly at all times been as quick — or sooner — than CSS transitions? And, how is it doable that Adobe and Google persistently launch media-rich cellular websites that rival the efficiency of native apps? This text serves as a point-by-point…
Assign Anchor IDs Utilizing MooTools 1.2
One in every of my favourite makes use of of the MooTools JavaScript library is the SmoothScroll plugin. I apply it to my web site, my employer’s web site, and on many buyer web sites. One of the best half concerning the plugin is that it is really easy to implement. I not too long ago ran…
Supply hyperlink
