Javascript - help editing so button is not visible

Hi folks,

I'm working on a project where the client wants a printable certificate of completion. I know this has been discussed numerous times, but I can't quite find the solution to my exact issue in past discussions. I have found/edited some Javascript to execute when a user clicks a print button, however I need to hide the print button on the output (the print page itself). The code I'm working with removed the menu and other items (yay!) but does not allow me to remove the button itself from showing on the print product. 

Here is the Javascript I'm working with: 

var styles = `@media print {
body, * { visibility: hidden; }
html, body { overflow: hidden; transform: translateZ(0); }
#slide {
transform: scale(1.09) !important;
}
#wrapper {
transform: scale(1) !important;
}
#slide,
#wrapper {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
#frame {
overflow: visible !important;
}
.slide-transition-container {
overflow: visible !important;
}
@page {size: A4 landscape;max-height:99%; max-width:99%}
.slide-container, .slide-container * {
visibility: visible !important;
margin-top: 0px !important;
margin-left: 0px !important;
}
#outline-panel {
display: none !important;
}
}
}`
var stylesheet = document.createElement('style');
stylesheet.type = 'text/css';
stylesheet.innerText = styles;
document.head.appendChild(stylesheet);
window.print();

 

Appreciate any help/thoughts you can provide!!

Thanks,
Dana

6 Replies
Sam Hill

Hi Dana, it's hard to know why the print button isn't hiding without seeing the print buttons definition in the HTML. What I can see is that the code above isn't quite right. There are one too many closing curly braces '}'. I've adjusted below.

If the below update doesn't fix things for you, can you provide some published output (stripped down version) demonstrating the problem.

 

var styles = '@media print {
body, * { visibility: hidden; }
html, body { overflow: hidden; transform: translateZ(0); }
#slide {
transform: scale(1.09) !important;
}
#wrapper {
transform: scale(1) !important;
}
#slide,
#wrapper {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
#frame {
overflow: visible !important;
}
.slide-transition-container {
overflow: visible !important;
}
@page {size: A4 landscape;max-height:99%; max-width:99%}
.slide-container, .slide-container * {
visibility: visible !important;
margin-top: 0px !important;
margin-left: 0px !important;
}
#outline-panel {
display: none !important;
}
}'
var stylesheet = document.createElement('style');
stylesheet.type = 'text/css';
stylesheet.innerText = styles;
document.head.appendChild(stylesheet);
window.print();