CODEWITHSUNDEEP
jquerycssprinting
Tommy Arnold
Tommy Arnold

Reputation: 3389

allow user to hide print styles

I have an invoice system i built for my client with sensitive data in the header and order info in a second div

currently i have this style set:

@media print {
.topbar {
    display:none;
}
}

so the client can print off the invoice and send it to his customer without the info in .topbar showing in the printed page.

He now wants the option to select from a select dropdown either Customer invoice (without content in .topbar) or print the full invoice with the .topbar information for his own use.

I am stuck on how I would go about doing this. I know how to use onchange but im not sure what method to use to disable, enable (@media print) styles.

any help would be much appreciated, regards Tommy

Upvotes: 0

Views: 152

Answers (2)

Town
Town

Reputation: 14906

CSS: 

 <style type="text/css">
    .topBar { ... }
    @media print { .topBarPrint { display: none; }}
 </style>

HTML:

<div id="topBar" class="topBar topBarPrint">Sensitive Content</div>

Then just add or remove the topBarPrint class using addClass() and removeClass() dependent on the value of the drop-down.

Upvotes: 1

Uku Loskit
Uku Loskit

Reputation: 42050

Use the JQuery addClass() and removeClass() methods. When you need it to be hidden, addClass(".topbar"), otherwise .removeClass(".topbar")

Upvotes: 1

Related Questions