Geek Answers Handbook

Hide buttons when printing

I have a page that contains 3 buttons at the bottom with the following encoding:

function printpage() { //Get the print button and put it into a variable var printButton = document.getElementById("printpagebutton"); //Set the print button visibility to 'hidden' printButton.style.visibility = 'hidden'; //Print the page content window.print() printButton.style.visibility = 'visible'; } 
 #options { align-content:center; align-items:center; text-align: center; } 
 <div id="options"> <input type="submit" value="post news" > <input id="printpagebutton" type="button" value="print news" onclick="printpage()"/> <input type="button" value="re-enter the news"> </div>

I managed to hide the print button while printing, but I could not with the others.

I searched the Internet for a solution, and answered most of the questions by adding display:none; in css, but in the end I have 3 hidden buttons on the screen. I want the buttons to be hidden when printing

The answer may be simple, my knowledge of web development makes a lot of sense.

Thanks in advance.

+5
source share
3 answers

You can use CSS @media queries. For instance:

 @media print { #printPageButton { display: none; } } 
 <button id="printPageButton" onClick="window.print();">Print</button>

Styles defined in the @media print block will be applied only when printing a page. You can check it by clicking the print button in the fragment; You will get a blank page.

+10
source

You can use css media request to print the target:

 @media print { .hide-print { display: none; } }
+3
source

Assign an identifier to the other two buttons. For the POST NEWS button, you can set the id on postnews and RE-ENTER NEWS on reenterthenews ; Then do it

 function printpage() { //Get the print button and put it into a variable var printButton = document.getElementById("printpagebutton"); var postButton = document.getElementById("postnews"); var reenterButton = document.getElementById("reenterthenews"); //Set the button visibility to 'hidden' printButton.style.visibility = 'hidden'; postButton.style.visibility = 'hidden'; reenterButton.style.visibility = 'hidden'; //Print the page content window.print() //Restore button visibility printButton.style.visibility = 'visible'; postButton.style.visibility = 'visible'; reenterButton.style.visibility = 'visible'; }

HTML

 <div id="options"> <input type="submit" id="postnews" value="post news" > <input id="printpagebutton" type="button" value="print news" onclick="printpage()"/> <input type="button" id="reenterthenews" value="re-enter the news"> </div>
+1
source

More articles:


All Articles