Anyone know how to add a print button to an ELEMENT. Basically, I have a modal that displays information in a pop-up when a link is clicked. In the bottom of the modal pop-up I want to place a print icon that will enable the user to print the contents of the modal ONLY. If I use the normal “onclick windows-print” attribute, the whole page gets printed with the modal in the centre of the page - clearly, I don’t want this to happen.
Any insights would be appreciated
That’s a tricky one, not least because Windows and Mac use different commands for printing.
Yes, it does seem tricky but the windows.print attribute handles the situation quite well because it actually uses the print dialog associated with each OS. For example, on a Mac it brings up the normal print dialogue which allows the current window/page to be printed or saved as a PDF. I guess the same would happen on a Windows system. I was hoping there would be a way to do the same thing, but targeting a specific element rather than the whole page.
Interesting project. I haven’t had to deal with print. But this short article has some helpful tips. After reading, I want to do a print project now lol.
I checked the link, and I fully understand the normal print.window bit - I’ve got hat working on the site just fine. The other solution for printing part of a page just doesn’t seem to work. If the head code and the css style is added to a page, the whole page doesn’t display at all - all elements are hidden except the one that has been designated for printing with the .print class. Clearly, I need this to only be the case if the print button is clicked on the page. My reading of the situation is that it needs an onclick event that can be assigned to the print button that activates the hide all elements css before the print-widow bit kicks in. It’s probably a really simple thing to do if you fully understand the css, but getting it to work in blocs is not as simple as I thought it may be.
The reason I need this is that one of my clients is developing a cookery site. One of the options is to print a complete recipe page (I’ve got that bit organised) however they also want an option where just the shopping list of ingredients can be printed. At the moment, I’ve recreated the shopping list in a modal that pops up when a shopping list link is clicked. So far so good.
The next bit is to add a print button on the modal footer that will print just the ingredients list. Sounds simple, but proving to be a real pain in the butt !!!
Let us know how you go. Sounds like a fun project, if you put the frustration bit aside 