Still not. maybe we also need to include the chart js on the page?
As of version 1.6.7c we introduced a new printstyle value ‘external’ for Print-O-Matic. Now it is possible to create an external button to trigger a print in a less-hacky way. Here is an example of this works: To print the following div with an id of ‘print_me_please’:
<div id="print_me_please">This is our target print element</div>
This is our target print element
First we create a kind of roll-your-own print trigger. The details that must be included are:
a unique id
a print-o-matic class such as printomatic or printomatictext
The final thing we need to do is include a hidden print trigger using a print-me shortcode with the same id as our external trigger and the new external printstyle attribute. This shortcode must be placed someplace on the same page, and will load in all the required scripts and settings to make the print trigger work correctly.
This is a Dr. Frankenstein experiment with Contact Form 7’s Submit button and the Print-Pro-Matic Print external trigger. When the user clicks submit, the form should also force-launch the print dialogue. Years of working in UI tells us NOT do this, but people still have music playing on page load, so what do we know.
[contact-form-7 id="1018" title="SubPrint"/]
To cross-breed the Submit button with the print-pro-matic print trigger, just follow the following steps.
In the form: add a cf7 submit/print button, and assign it a unique ID (in this case subprint) and a class of printme_trigger like so:
[submit id:subprint class:printme_trigger]
In the post that the form shortcode is displayed on: simply target the form to be printed and assign the external_trigger attribute the id of the external print/submit button:
The above will work nicely if there is no validation to consider. However if we only want to print the form after it has passes validation we need another approach.
First: We will not actually have the print triggered via clicking the submit button, so we can remove the id and class in the submit tag in the form:
If the submit button does not trigger the print what will? If you notice in the Contact Form 7 edit page, there is an Additional Settings tab. Here we can use Contact 7 own on_sent_ok: to trigger the print like so:
Now, finally, we must provide an ID to our hidden print-me shortcode:
There are times when it would be nice to turn ANY element into an external print trigger. This is a feature often asked for when trying to hook up a Visual Editor button to be a print trigger. As of Print-Pro-Matic v 1.1.4e we have added:
new printme_trigger class that turns anything into a print trigger
new external_trigger shortcode element to enter the id or ids of the element(s) that should be used as an external trigger
And this is how it works:
First we need an element that has a unique id. There must also be the ability to add the printme_trigger class to it.
And that’s it! Note: The external_trigger attribute can accept a comma separated list of multiple id’s. Also: When an external_trigger attribute is assigned, no standard print-pro-matic icon or text will be displayed, as the external trigger will be used instead.
This will place the logo in the ::before pseudo class of the targeted print element. Let’s try it out:
Of course, with Print-Pro-Matic, if you want to add the logo to EVERY print page, you can simply use the Print Page Top HTML field to place any html, including images, in the upper part of the print page.
Keep in mind: When working with images that where not available on the display page (and therefore in the users cache) a bit of pause before print time will be needed to give the image time to load before triggering the print dialogue box.