Member Avatar for okparrothead

Hello DaniWeb Experts

I haven't found this topic in the forums, so if its been covered, please redirect me. Thanks

I have a page which has a div with product instructions at the bottom.

Is there a way to create a print button that will cause only the instruction sheet to print, not the whole page, with the style I want?

I could just set the print style for this page to print the instruction sheet only, but I don't necessarily want to disable printing the whole page.

Am I asking in the right forum?

Thanks for any help you can give me.

  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by okparrothead

Dani AI

Generated

As hinted, there are two practical ways to print only the instruction block without breaking the existing site-wide print stylesheet that already has. Either generate a tiny print-only document that contains just the instruction markup (preferred because it does not change the live page), or temporarily force the live page into a “print just this” state and restore it after printing (works but needs care to avoid leaving the page altered).

A reliable approach is to open a new window (or tab), inject the instruction element plus the site’s print CSS, then call print on that window. This keeps the main page and its print stylesheet untouched and preserves any print-specific rules by linking the same stylesheet (absolute URLs recommended).

function printElementById(id) {
  var el = document.getElementById(id);
  if (!el) return;
  var w = window.open('', '_blank');
  w.document.open();
  w.document.write('<!doctype html><html><head><meta charset="utf-8">');
  w.document.write('<link rel="stylesheet" href="/css/print.css">'); // use absolute path
  w.document.write('</head><body>');
  w.document.write(el.outerHTML);
  w.document.write('</body></html>');
  w.document.close();
  w.focus();
  w.print();
  w.close();
}

If popup blockers are a concern, an off-screen iframe does the same job without a new window. Create the iframe, write the element and stylesheet into its document, call print on its contentWindow, then remove the iframe after printing.

When manipulating the live page instead (adding a “print-only” class or hiding everything else), be sure to restore state after printing. Modern browsers support onafterprint/onbeforeprint (see MDN on onafterprint), but provide a setTimeout fallback for older engines. For design notes and pitfalls (margins, external resource paths, cross-browser quirks), see the practical writeup at and the spec notes on Window.print().

Member Avatar for smalldog

Hi Parrot :),

you can try this code, but I don't know if that will work :) Just place everything on the page to "hide" div and instruction section place to print div.

<style media="print">
.hide {display:none}
.print {display:block;}
</style>

<script>
function Print()
{
  document.getElementById('hide').className = 'hide';
  window.print();
}
</script>

<body>
<div id="hide">
Page Content........................
</div>
<div id="print">
<input type="button" onclick="Print();" value="Print">
</div>
</body>
Member Avatar for okparrothead

Thanks Smalldog,
I see what you're getting at.

I already have a print style sheet. Will this effect how the present style sheet works?

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.