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
  • 93 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by okparrothead
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.