Streaming live at 10am (PST)

Creating Printable Div


#1

I’ve created a website for a client where they would like to be able to allow folks to print recipes from their page.

1. Is there a way to have someone press a print button right above the “recipe” and it would open the system print dialog?

2. When I go to print the web site, hidden elements on the page actually show up in the printed version. Is there a certain way things need to be formatted to optimize for printing?

Read-Only Link:
https://preview.webflow.com/preview/bellagrace?preview=6223bed13c8f947c5293d9cf34af5260

Live Site:


#2

Bind a click handler on the element to a function that calls this:

https://developer.mozilla.org/en-US/docs/Web/API/Window/print

You’ll need to manually code a print stylesheet.

https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/


#3

Can anyone explain how to bind the function to a button?