JavaScript print Events
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!
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![HTML5 download Attribute]()
I tend to get caught up on the JavaScript side of the HTML5 revolution, and can you blame me? HTML5 gives us awesome "big" stuff like WebSockets, Web Workers, History, Storage and little helpers like the Element classList collection. There are, however, smaller features in...
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
