Customize printing options by hiding the print button

I am looking to exclude the print button from a hard copy when it is printed.

<html>
    <head>
     <title>New Page 1</title>

    </head>
    <body>
     <p>
        This is just a paragraph, and I do not want the print button to appear in the hard copy.
     </p>
    <input type="button" value="print" onclick="window.print()" />
    </body>
</html>

If you know of a resource that explains how to properly print a hard copy of a specific section of a webpage, please share the reference. Thank you.

Answer №1

Conceal the print button using

this.style.display='none';

prior to printing.

<html>
    <head>
     <title>New Page 1</title>

    </head>
    <body>
     <p>
        This is just a paragraph fellas. I do not want the print button in the hard copy.
     </p>
    <input type="button" value="print" onclick="this.style.display='none';window.print();" />
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing form values from JavaScript to a JSP page - a comprehensive guide

I am working on a sample HTML page that includes inline JavaScript for calculating geocodes and retrieving latitude and longitude values. My question is, how can I submit all the form values along with the latitude and longitude returned from the showlocat ...

AngularJS: The dynamic setting for the stylesheet link tag initiates the request prematurely

I'm encountering a problem that is somewhat similar (although not exactly the same, so please be patient) to the one discussed in Conditionally-rendering css in html head I am dynamically loading a stylesheet using a scope variable defined at the sta ...

Styling Rules for WebKit Browsers

Is there a method to apply a particular CSS style for a div based on whether the user is accessing the page from a Chrome browser on a Desktop or an Android device? .myDIV{ [if CHROME???] width: 280px; [if ANDROID???] width: 100%; } Seeking guidance on ...

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

Ways to implement div on hover in my table's td cells

Here is the HTML table code I have: <table border='1px'> <tr> <td id='td'>first</td> <td>last</td> <tr> <td id='td'>newFirst</td> <td>newSecond</td> </t ...

Issues with Image Placement in Internet Explorer

My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...

positioned absolutely with a margin of 0 auto

Struggling to find a way to center the text in the wrapper? I have a responsive slideshow that requires text to be on top of it and centered. ul.bjqs { position:relative; list-style:none; padding:0; margin:0; z-index: 1; overflow ...

Utilize CSS Grid to adjust the size of an image

Hi there! I'm currently working on resizing an image using a CSS grid layout. Here's the CSS code I have so far: /* Reset */ * { padding: 0; margin: 0; } html { height: 100%; background-image: url("/assets/images/background.p ...

Top methods for incorporating whitespace on both sides of the page

Currently working on a ReactJS/MaterialUI webapp and looking to enhance the layout. Seeking advice on whether it's best practice to add padding or margin to create space on the left and right side of the page, similar to popular websites like Stack Ov ...

Ways to continuously monitor a div for a specific class

Is there a way to continuously check if an area has the class "top-nav" in order for the alerts to work every time it lacks or contains the class? How can I achieve this functionality? Check out the code on jsfiddle: https://jsfiddle.net/jzhang172/117mg0y ...

Utilize flexbox to create a list that is displayed in a column-reverse layout

I am facing a challenge in displaying the latest chat person in the 1st position (active) using Firebase. Unfortunately, Firebase does not have a date field which makes it difficult to achieve this. I have attempted converting the date into milliseconds an ...

Scrolling glitch detected on the Telegram web application

Currently, I am working on building an app with Bubble.io that will be used in the Telegram webapp. However, when I pull down (scrolling up) at the top of the page, Telegram interprets it as a close gesture and attempts to minimize the app window. I would ...

Personalized hover effect using CSS on Caldera Forms

Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...

Choosing from a dropdown menu by pressing keys

When I press the first letter of an option in my dropdown list, it works fine. However, if I try to press two, three, or four letters consecutively, the control vanishes. For example, if the option is 'Jquery' and I press J only, it works but pre ...

Ensure your mobile site is optimized for full width display

Imagine a webpage with a fixed width of 1280px. Is there a way to instruct a smartphone to automatically scale this page to full width upon loading? Currently, I am using: <meta name="viewport" content="width=1280, initial-scale=1"> However, it d ...

Vue Checkboxes - Maintain selection unless a different checkbox is selected

I have implemented a checkbox system with radio button behavior, but I am facing an issue where I want to keep the checkbox checked until another checkbox is selected (which will then uncheck the first one). I do not want the ability to deselect the checkb ...

Create professional and polished email content by utilizing HTML formatting techniques

I'm having trouble formatting the email body with line breaks in mind, and I'm using the following code: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50233f3d353f3e35103528313d203c357e333f3d"> ...

What are some ways to reduce the delay of Dark mode on a website?

Can anyone help me optimize the speed at which dark mode is applied on my website? Currently, there seems to be a delay between page load and the dark mode taking effect. Below is the jQuery.js code I am using: onload = function () { if (localStorage. ...

Utilizing SetInterval for dynamically changing the CSS background image URL

I'm starting to feel frustrated with this situation... I have a solution where the CSS background is coming from a webservice. Currently, the system refreshes the entire page using HTML: <meta http-equiv="refresh" content="300" /> ... body { ...