I am trying to implement some print functionality on a page. When the print comes out the header and footer seems to be overlapping parts of the page contents. I want to hide the header and footer temporarily and print only the main page. Velo does not allow me to do $w(‘#header1’).hide() or $w(‘#header1’).collapse(). Same with ‘#footer1’. How do I hide the header and footer temporarily.
Hello, would something like this work for your use case? Creating a page for printing that has the header and footer hidden by default and routing the user to that page to print the information?
https://support.wix.com/en/article/wix-editor-hiding-the-header-and-footer-on-a-specific-page
Thank you Amanda. I will give it a try. Is this something that I can do it on the fly from Velo rather than setting it from a menu item.
I have not done this myself, but another user accomplished it with this code:
$w.onReady( function () {
$w(“#footer1”).children.forEach((item, i) => {
item.collapse();
});
});
However, if you need both the header and footer hidden on a particular page using the menu item is the most simple solution. Try both and see which you like.
You are pointing me in the right direction. But I’ve tried everything possible. The problem is that even if I collapse or hide all the children, there is no way to collapse the footer itself. Therefore a white band, the width of the footer ends up covering the actual page contents in the print out. More than the footer, the header is a bigger headache in the final printout. There are certain things Wix does that Velo is not able to handle (or at least I haven’t figured out how). One is the header that scrolls up and hides automatically when you scroll the page. I am not able to duplicate that behavior from Velo. I was hoping that just before I pass an onMessage(“print”) to an html page that calls window.print(), if I could auto scroll and hide the header that won’t show up in the final printout. I don’t mind the header or the footer as long as they do not cover the contents of the page. But they do cover the contents. Well I have spent too much time trying to figure this out. More time than what the functionality is worth. So I might just give up on this.
Have you tried hiding the header and footer from the menu item for the page yet? It is found here. You can use these settings even if you are also using Velo. If you really want to use code, perhaps look into a print to PDF instead of trying to print the window which assumes you want everything that you can see including the header and footer.
One more thing you may try if you prefer to use window.print and need to write some css, etc. is looking into using the HTML element so you can write your code more freely
If you decide to test creating a PDF instead, here is an example
I would like to create pdf. But the problem is the pricing. https://pdfgeneratorapi.com/pricing says $59/month even for the cheapest plan. We are a non-profit organization and spending $720 per year is a lot of money for the organization. They do have a 3 month free evaluation period, but after the 3 months unless we pay $59 every month we can’t use it. The functionality is going to be used only by very few people once in a while and I can’t justify the price.
That is understandable, however, I do not know a completely free way as you will have to write custom code to accomplish this either in a custom element or HTML embed.
If you decide it is worth it to go this route, jsPDF is a popular way to accomplish it and there is also a forum post from a user who has tried this.
Thank you very much Amanda. I will take a look at jsPDF. It looks promising.