Guide to setting a dynamic print style without affecting the screen media

Question

Guide to setting a dynamic print style without affecting the screen media

In my report, there is a details section below. The screen provides instructions to view the details with a button that toggles the list's visibility.

When printing the report, I only want the instructions to show if the list is visible. If the list is hidden, I want the instructions to remain hidden as it would be irrelevant on paper and could give the impression that something is missing.

I am unsure how to apply the media-print style within the toggleListVisibility() function. Is it possible to add a class like clsInstructions.addClass(media-print-display-none) or clsInstructions.removeClass(media-print-display-none)?

@media print {
    .noprint, .noprint * {display: none !important;}
}

<p>...Main report summary...</p>
<p class='clsInstructions'>See list below for details and suggested actions.</p>
<button type='button' class='noprint' onclick='toggleListVisibility()'>Show / hide list</button>
<div id='myList' style='display:none;'>...details content here...</div>

function toggleListVisibility(){
  $('#myList').toggle();
  if ($('#myList').is(":visible")) {
    //make the instructions visible to the printer...
  } else {
    //make the instructions display:none to the printer, but still visible on screen. how???...
  }
}

javascript jquery css

Answer 1

Answer №1

Here is a simple way to achieve this:

First, add a common class name to all elements you want to control.
Then, toggle the visibility of these elements as needed.

$(".noprint").toggle(false);
//window.print();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="noprint">A</div>
<div>B</div>
<div class="noprint">C</div>

The use of .noprint in jQuery selects all elements with the class noprint, where . signifies a class selector. This allows you to hide certain elements before printing:

addEventListener('beforeprint', (event) => { 
  $(".noprint").toggle(false);
});

After printing, you can show these hidden elements:

addEventListener('afterprint', (event) => { 
  $(".noprint").toggle(true);
});

In theory, CSS alone could be used for this purpose:

body {
    text-align:center;
}

@media print {
   .noprint {
      visibility: hidden;
   }
}

<h1 class="noprint">DO NOT PRINT THIS</h1>
<h1 class="noprint">PRINT THIS</h1>

Answer 2

Here is a simple way to achieve this:

First, add a common class name to all elements you want to control.
Then, toggle the visibility of these elements as needed.

$(".noprint").toggle(false);
//window.print();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="noprint">A</div>
<div>B</div>
<div class="noprint">C</div>

The use of .noprint in jQuery selects all elements with the class noprint, where . signifies a class selector. This allows you to hide certain elements before printing:

addEventListener('beforeprint', (event) => { 
  $(".noprint").toggle(false);
});

After printing, you can show these hidden elements:

addEventListener('afterprint', (event) => { 
  $(".noprint").toggle(true);
});

In theory, CSS alone could be used for this purpose:

body {
    text-align:center;
}

@media print {
   .noprint {
      visibility: hidden;
   }
}

<h1 class="noprint">DO NOT PRINT THIS</h1>
<h1 class="noprint">PRINT THIS</h1>

Guide to setting a dynamic print style without affecting the screen media

Answer №1

Similar questions

Enhance your dynamic content with jQuery/AJAX through customized CSS styling

What is the ideal way to utilize Vue within the framework of multiple pages?

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

Troubleshooting HTML/JavaScript with JSP and JSTL: iPhone only displaying the first option in select dropdown, rather than the selected option

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

What is the recommended approach for embedding scripts within Angular templates?

Unable to determine the reason why the JavaScript plugin is not functioning as expected

Error: Unable to set value on Vuejs key - the target is read-only

Using JavaScript's DOM manipulation to switch out one HTML tag for another

Effective ways to enable users to upload files in a React Native app

Clicking on Google Code Prettify does not trigger syntax highlighting

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

Challenges arise with the safari navigation bar within a PWA platform

Using jQuery to extract a specific portion of a URL path

Can a single camera be utilized for capturing two different scenes?

Issue with making requests across origins in Vuejs using axios

Where can the Path be found for Json inside App Phonegap?

Clicking on the initial link will in turn prompt clicks on the subsequent links

issue with mark.js scrolling to selected sections

Is there a way to sort a table using a dropdown menu selection as a filter?