Display <div> exclusively when in @media print mode or when the user presses Ctrl+P

Looking for a way to create an HTML division using the div element that is only visible when the print function is used (Ctrl+P) and not visible in the regular page view.

Unfortunately, I attempted the following method without success. Any advice or solutions would be greatly appreciated.

@media print {
            
      .print_only {
          display: block;
          visibility: visible;
      }
}
<div class="print_only" style="visibility:hidden; display:none"> THIS IS THE MOST DIFFICULT QUESTION OF THE CENTURY </div>

javascripthtmlcss

Answer №1

The reason why it is not showing up is because the inline style display:none is taking precedence over the style assigned to the class print_only. You can learn more about CSS specificity by checking out this informative article.

To fix this issue, you should add the following code to your CSS file:

.print_only {
     display: none; 
}

This code should be placed outside of the @media print block and you should remove the inline style from your HTML. This will ensure that the desired content displays correctly on your website.

Answer №2

To ensure that the display property is applied properly, remember to add !important after setting it to block. This will help override any inline styles on the element. Alternatively, you can also use the following CSS:


.hide_printer {
    display: none;
}

I trust this solution proves useful for your needs!

Answer №3

Successfully completed using the following technique.... Grateful for everyone's help, especially @pokeybit

.print_only {
            display: none;
        }
    
        @media print {
            
            
            .print_only {
                display: block;
                visibility: visible;
            }
            
            body * {
                visibility: hidden;
            }
            #print_area, #print_area * {
                visibility: visible;
            }
            #print_area {
                position: absolute;
                left: 0;
                top: -100px;
            }
        }

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

What is the best way to incorporate a new attribute into a particular CSS class?

Just to provide some context, I am relatively new to all of this. Please bear with me. I have a unique CSS class that is specifically assigned to thumbnail images on my Wordpress website. Currently, I am using a script that adds a "Pin it" hover link to a ...

jqueryhtmlcsswordpress

The modal form vanishes without any action when the form is clicked outside

Everything was working fine with the form submission until I turned it into a modal using Bootstrap. Now, when the form is rendered in the modal, users can tab and type without any issues. However, if they click on any element within the modal (including t ...

javascriptjqueryhtmlformstwitter-bootstrap

Display a PHP file's content in an iframe without revealing the file path in the source code

In my project built with Laravel, I am utilizing PDF.JS to showcase various PDF documents. To secure the pdf path, I am attempting to conceal it by passing a PHP file in the src field of an iframe. In my view: <iframe id="reader" src="http://server.de ...

javascriptphplaraveliframepdf.js

Error with WooCommerce checkout causing input values to disappear upon clicking or submitting

I am facing an issue where I need to set #billing-postcode to a specific value using a JS script. When I input jQuery('#billing-postcode').val('2222') on the checkout page, the input displays the value 2222 with the Postcode label abov ...

javascriptinputwoocommercecheckout

What is the best 'event' to pair with an <input/> element in iOS/Android development?

Looking for a way to toggle results when a user starts typing in a search field? Here are some event options: mousedown / mouseup touchstart / touchend focus You could also consider using the "change" event instead of "click" to check for text input an ...

javascriptandroidjqueryhtmlios

I am encountering a problem with the app.patch() function not working properly. Although the get and delete functions are functioning as expected, the patch function seems to be

I am in the process of setting up a server that can handle CRUD operations. The Movie model currently only consists of one property, which is the title. Although I can create new movies, delete existing ones, and even search for a ...

javascriptnode.jsapiexpresspatch

Utilizing jQuery to update dropdown selection based on JSON object values

In my JSON value, I have the following roles: var roles = { "roles":[ {"role_id":2,"role_name":"admin"}, {"role_id":4,"role_name":"QA"}, {"role_id":3,"role_name":"TL"}, {"role_id":5,"role_name":"user"}, {"role_id":1,"role_name":"r ...

javascriptjqueryjson

Brainstorm: Creative ways to showcase excess content within a div

I'm struggling to find a suitable title for this issue. Essentially, I have a box-shaped div that expands into a rectangle and reveals content when clicked. The problem arises when I animate the div's width during expansion. Instead of positioni ...

jqueryhtmlcssoverflow

Utilize Redux Toolkit to efficiently share actions across different slices of state

How can I efficiently share common actions across multiple redux state slices? For instance, let's say I have an updateField action that I want to use in various slices other than just the profile slice. Should I import it from an external file for r ...

javascriptreactjsreduxredux-toolkit

Executing multiple AJAX calls at the same time in PHP

I have a puzzling question that I can't seem to easily solve the behavior of this situation There are two ajax call functions in my code: execCommand() : used for executing shell commands through PHP shell_exec('ping 127.0.0.1 > ../var/log/ ...

javascriptphpjqueryajax

Creating Styles in Material-UI using makeStyles: Tips for Styling by Element Name

I am currently facing a challenge of adding a rule for all <p> tags within the current component. Despite searching through various sources such as material-ui documentation and Stack Overflow, I have been unable to find any information on how to add ...

javascriptreactjsmaterial-uijss

Is it possible for PHP to process a multidimensional array being submitted via $_POST along with another field serving as a key in the same form

My web form includes two select fields: "user_id[]" and "equipment_id[]. Here are some key points: I use a Javascript function to duplicate the group of "user_id[]" and "equipment_id[] fields each time I want to add another set. The "user_id[]" field all ...

phphtmlarrays

Removing elements in AngularJS using ngRepeat

Many have questioned how to implement item removal within the ngRepeat directive. Through my research, I discovered that it involves using ngClick to trigger a removal function with the item's $index. However, I haven't been able to find an exam ...

javascriptangularjsangularjs-directiveangularjs-scope

Dynamic content modal

Recently, I started exploring react native. In my application, there are 5 buttons on the screen. Each of them triggers the same <Modal>, but the content inside it changes based on the button clicked. For example, if I click the first button, a tex ...

javascriptreactjsreact-native

Ways to add elements to the DOM using jQuery from the local storage?

I'm facing a challenge where I have an input field and store the inputs in local storage. When I click on 'add', I want to immediately append the new inputs to my ul element. However, simply appending the current input won't work as it ...

javascriptjqueryappendlocal-storage

Verify the presence of incorrect query parameters before generating an error in a (node.js) environment

Is there a way for me to identify and handle all invalid query parameters in my small node.js app? If an invalid query parameter is detected, I would like to simply throw an error with status code 422. I attempted the following approach but it did not wor ...

javascriptnode.jsexpress

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Currently, I am utilizing the NgbTypeahead component from ng-bootstrap. The issue I am facing is that when I place the typeahead component within a scrollable element and proceed to scroll down, the position of the dropdown container remains unchanged. &l ...

cssangularng-bootstrap

Transferring information in React from a child component to its parent and then to another child

I'm currently developing my app using react.js and facing an issue with passing data between components. I have a Parent component (P) that needs to receive an array of objects from its child component (C1), then pass this data on to another child com ...

javascriptajaxreactjsfrontend

Transitioning from clip to clip-path in order to utilize percentage values

My current approach involves using a scss-based animation to create border animations with movement. The animation's core functionality relies on the use of clip. $box-width: 80px; $box-height: 50px; @keyframes clipMe { 0%, 100% { ...

csssasscss-animationsclip-path

Tips for expanding the width of an image when employing position:relative

Below is the code snippet: <table border="1" cellpadding="2" cellspacing="2" height="250"> <tbody> <tr> <td> <div style="background: url('path to image'); width: 300px; height: 250px; position: ...

htmlcssimage