Solved

How could I hide some elements on screen but not on printer?

Posted on 2004-09-06
11
206 Views
Last Modified: 2010-05-18
I need to hide some DIV's on a page (style="display:none") but I'd like to print them when I call the script :

window.print();

If I use style="display:none" all of those DIV's are not printed...

Is It possible???

JpmSoft


0
Comment
Question by:JpmSoft
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +2
11 Comments
 

Assisted Solution

by:Rahulkumar007
Rahulkumar007 earned 80 total points
ID: 11994039
For Div using the style directely use css file and assighn class for style.

You can add a different stylesheet for different media.

So while printing that particular style sheet will be applied.

<LINK media="print" href="../Includes/PrintSummary.css" type="text/css" rel="stylesheet">


0
 
LVL 3

Accepted Solution

by:
ashleydb earned 90 total points
ID: 11995881
Have a stylesheet for screen as shown:

.noPrint {
      display: block;
}
.Print {
      display: block;
}


Have a stylesheet for print as shown:

.noPrint {
      display:none;
}
.Print {
      display: block;
}


Put them in your html (or whatever) files in the <HEAD> as shown:

<LINK href="Print.css" media="print" type="text/css" rel="stylesheet">
<LINK href="Screen.css" media="screen" type="text/css" rel="stylesheet">


Then you can apply the style Print or noPrint to areas that you want to be displayed when you print or don't.

<table class="noPrint">


The opposite needs to be applied if you want things to print, but not show on screen.


And finally, remember you can apply more than one style to an object so you can set up any styles you want for a header table for example, then have it not print.

<table class="headertable noPrint">


Good luck!
0
 
LVL 18

Assisted Solution

by:arantius
arantius earned 80 total points
ID: 11997333
Prior comments are correct, but I just want to point out it can be done in one .css file, or even in an inline <style></style>:

.printOnly { display: none; }
.screenOnly { display: inline; }

@media print {
      .printOnly { display: inline; }
      .screenOnly { display: none; }
}

With any other changes that are appropriate.  I usually disable navigation bars in print view.
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 6

Expert Comment

by:Fahdmurtaza
ID: 11999110
I think all above will work fine.

Reagrds
Fahd Murtaza
0
 
LVL 4

Author Comment

by:JpmSoft
ID: 12002423
Thanks to all of you guys!

Lets think about that situation:

What I'm designing is an HTML Reporting tool...
Each report with more than 1 page has a navigation bar to jump between pages.

All of this is working fine by using this method:

<DIV ID='PAGE_1' style='display:inline>
...
</DIV>
<DIV ID='PAGE_2' style='display:none'>
...
</DIV>

etc...

When I jump between pages I change the style.display property for each DIV element to their respective values.

This is just fine, but when I try to print,  those pages which are in state "display:none" are not being printed.

Now again...
How do you think I can make some pages not to be visible on screen but they can be printable at any time?

If I use ashleysdb's approach and set  up every <DIV> with 2 styles like:
<DIV ID='PAGE_1' class='print_visible_allways screen_visible'>
How could I change the screen_visible style when I want to show/hide a specific DIV (current page) ???


Thanks in advance!
JpmSoft


0
 
LVL 3

Expert Comment

by:ashleydb
ID: 12004642
I'm not sure you would need to make that distinction when you set the display to none. The print style sheet may over-rule. Have you tried my method as it is already to see if it works?
0
 
LVL 6

Expert Comment

by:Fahdmurtaza
ID: 12502011
If we are not geeing a response of what he says about his problem, then go on deleting it.
Regards,
Fahd Murtaza
0
 
LVL 3

Expert Comment

by:ashleydb
ID: 12508132
Well I gave a working responce, so what more can we do?
0
 
LVL 4

Author Comment

by:JpmSoft
ID: 12508532
Hi guys,

Sorry by the late....

After all, no one of your recommendations works for me...

What I decided to do was show all printable DIV's with the javascript function where I start the printing process... this way all the pages in the report could be printed and supported by the printing dialog.

This is not much elegant, but it works.

JpmSoft

0
 
LVL 6

Expert Comment

by:Fahdmurtaza
ID: 12510941
At least you should consider answers from ashleydb and others who worked for it.
Regards,
Fahd Murtaza
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Where can I find... 1 53
Making exceptions for ValidationAttribute 2 27
Pass SQL to JSON. Page is in classic ASP and using Jquery 4 41
calculate days away 11 32
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime is disastrous for companies and can lead to major hits on a brand, reputation, an…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

697 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question