Member Avatar for Monica_1

Im working with dreamweaver, coded in php On one of my pages, i'm trying to add 2 different print buttons each one printing a differrent portion of the webpage. For example, one print button is printing the first paragraph and the other print button is printting the second paragraph. I did the print css for both button and i linked each to its respective print css but the second print css overrules the first one and so i end up having TWO print buttons with the Same css... What do i need to do? THANKS!

  • 2 Contributors
  • 1 Reply
  • 290 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

Short answer: don’t load two competing print stylesheets — use a single print stylesheet and switch which part of the DOM is visible to the print media before calling window.print(). That approach directly implements ’s idea and avoids stylesheet cascade conflicts that make the “second” file win.

Example you can drop into your page (HTML + JS + print CSS):

<button class="no-print" onclick="printPart('first')">Print first paragraph</button>
<button class="no-print" onclick="printPart('second')">Print second paragraph</button>

<p id="first">First paragraph to print.</p>
<p id="second">Second paragraph to print.</p>

<script>
function printPart(targetId) {
  // add a body class that the print CSS will use
  document.body.classList.remove('print-first','print-second');
  document.body.classList.add('print-' + targetId);

  // cleanup after print (use afterprint if supported, fallback to timeout)
  function cleanup() {
    document.body.classList.remove('print-' + targetId);
    window.removeEventListener('afterprint', cleanup);
  }
  if ('onafterprint' in window) window.addEventListener('afterprint', cleanup);
  setTimeout(cleanup, 1200);

  window.print();
}
</script>
@media print {
  /* hide everything then reveal only the section requested */
  body * { visibility: hidden !important; }
  body.print-first #first, body.print-first #first * { visibility: visible !important; }
  body.print-first #first { position: absolute; top: 0; left: 0; }
  body.print-second #second, body.print-second #second * { visibility: visible !important; }
  body.print-second #second { position: absolute; top: 0; left: 0; }

  /* hide the on-screen buttons in print */
  .no-print { display: none !important; }
}

Notes and troubleshooting:

  • Using visibility + position: absolute prevents layout collapse that can happen with display:none and keeps the printed fragment at the page top.
  • Swapping the href of a link[rel=stylesheet][media=print] before printing is possible but less reliable because external files may not load in time; the class-toggle method is simplest and fastest.
  • Test in your target browsers — afterprint support varies; the timeout fallback helps clean state if the event is absent.
Member Avatar for pritaeas

I think you need to hide one of the paragraphs when you click a button, and use a single print stylesheet.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.