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!
Write Better JavaScript with Promises
You’ve probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don’t see what makes them so special. Can’t you just use a callback? What’s the big deal? In this article, we’ll…
The Simple Intro to SVG Animation
This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element…
Create Spinning, Fading Icons with CSS3 and MooTools
A goal of my latest blog redesign was to practice what I preached a bit more; add a bit more subtle flair. One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.) I…