Right now I have my #media print style sheet to hide various objects by ID/class, such as
#media print {
#header, #navbar, #navbar, #toolbar, #footer, .title {
visibility:hidden;
display:none;
}
}
At print preview, it does hide these objects but the space they take up is still there, forcing what I WANT to print to be on page 2, with a blank page 1 and blank page 3. If there is a way to have the only page 2 shows at the print screen, or a way to truncate the stuff I don't want as oppose to just hiding them, please let me know.
Thank you.
Using visibility:hidden leaves the space the element would occupy, while display:none does not show that space.
You want to use:
#media print {
#header, #navbar, #navbar, #toolbar, #footer, .title {
display:none !important;
}
}
Of course this has been addressed before:
What is the difference between visibility:hidden and display:none?
Related
I have 2 div tags in my html code.and I have 1 print button on the top of the page.when I click on the print button , it is giving me everything in the print what I have on html page(means content from both the divs). I want to restrict this print button's functionality till 1st div only and I will add another print button before next div to print that div content independently. Is there any way I can do this?
<html>
<body>
<input type="button" value="Print" class="noprint" onclick="window.print();return false;">
<div>
...
//my content.Want to print only this div when I will click print button.
...
</div>
//I will add another print button here which will allow me to print the next div.
<div>
...
//my content
...
</div>
</body>
</html>
#media print {
*
{
display: none !important;
}
.printable
{
display: block !important;
}
}
Then add the printable class to your div you want to print.
try this
$(document).on('click','#pring1',function(e){
$('#printCSS').remove();
$('head').append('<link href="stylesheetForBox01.css" media="print" id="printCSS">');
});
$(document).on('click','#pring2',function(e){
$('#printCSS').remove();
$('head').append('<link href="stylesheetForBox02.css" media="print" id="printCSS">');
});
in stylesheetForBox01.css page
#box1{
display: none;
}
in stylesheetForBox02.css page
#box2{
display: none;
}
I would recommend using media queries for this one, like such:
#media print {
.div1 {display:block;}
.div2 {display:none;}
}
This will effectively hide div2 (you need to name your elements), while retaining div1.
See http://jsfiddle.net/576ttew8/ for an example.
Furthermore, you can use #media print to further style your div so that it renders better in the printable form.
For more information on #media print (and other media queries), see http://www.w3schools.com/css/css_mediatypes.asp
How do you remove the white space at the top when you print. I'm doing print styles using print.css files. When i preview the print there is a white space at the top. How do i remove that?
Thanks
How about this?
#media print {
body, html {
margin-top:0px;
padding-top:0px;
}
}
You could write this directly in your default style.css file.
Css rules, Try this
# media print{
body{
margin-top:0px;padding-top:0px;
}
}
Not referring to the URL at top of page.
When an <a> tag is printed in Chrome, it shows the URL after it.
Instead of just showing the anchor text (like this: StackOverflow)
It shows the anchor text w/ URL after it
(like this: StackOverflow (window.open('www.stackoverflow.com'))
This makes the printed page stretch off the printable area, and I'm trying to avoid this from happening. Can this setting be disabled somehow in printing mode or is there a #media print style that can be defined to remove this URL part from print screen?
Tell it not to print anything after the anchor tag.
#media print {
a:after { content:''; }
a[href]:after { content: none !important; }
}
Simply use this,
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
I have a page with multiple scrolling slides inside a pane. Whenever I try to print the second slide, it always prints the first one which is loaded when user first visit the site. Is there any print function in Javascript or JQuery, which allows me to print slides which wasn't loaded first or even the contents that is visible to the user?
Have you looked at #media print { } and #media screen { } in CSS?
The first will be implemented when printing, the 2nd will be implemented on screen.
Purely as an example...
#media print {
#myDiv { overflow : auto; }
}
#media screen {
#myDiv { overflow : scroll; }
}
What I need is for the footer to print at the bottom of each page (when it is printed on paper, not printed on screen, that's easy)...
I am using tables, I know tables are bad, I typically do not use them, but this is a special case: (I am using a C# webBrowser control, and just using HTML to format a document to print).
It works fine, except for the footer on the LAST page printed...the first pages it is sitting at the bottom, because the page content pushes it to the bottom, but on the last page, it is just at the bottom of the content still (and the content does not go to the bottom of the page)
Here is an image to show (this is when I go print preview of my webBrowser). dont mind the green text, just there for testing.
good and bad footer http://pdem.info/badfooter.png
As you can see, on the left, the footer is forced at the bottom by content, and on the right side, the footer is in the same position relative to content, but I want it at the bottom!
The snippet for my footer is just:
<tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>
Any ideas how to force the footer to be at the bottom? I have no objection to using div's if there is a way to make it work like that!
=========EDIT=========
Here is some of the code:
The css:
#media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
//I have tried doing position:absolute/fixed with values in pixes and percents
}
#media screen {
thead { display: none; }
tfoot { display: none; }
}
Code that populates the webBrowser Control:
web_display.DocumentText = "";
web_display.Document.Write("<body><table id='tblCont'><thead><tr><td>Your header goes here</td></tr></thead>" +
"<tbody><tr><td>");
web_display.Document.Write("<body><basefont size='2' face='verdana'>");
web_display.Document.Write("<ul " +
"style='list-style:none;"+
"padding-left:0px;"+
"margin-left:0px;"+
"'>");
foreach (TNode part in tn.Nodes) {
web_display.Document.Write("<li><strong>" + part.Text + "</strong>");
web_display.Document.Write("<ul style='list-style:none;'>");
foreach (TNode node in part.Nodes) {
web_display.Document.Write("<li><strong>" + node.Text + "</strong></li>");
web_display.Document.Write("<ol>");//this list will hold the textblock text
addTextBlk(web_display, node);
web_display.Document.Write("</ol>");//end textblock list
web_display.Document.Write("<br style='line-height:6px;'/>");
}
web_display.Document.Write("</ul>");//end lvl2 list
web_display.Document.Write("</li>");//end part item
}
web_display.Document.Write("</ul>");//end part list
//web_display.Document.Write("</li>");//end section item
web_display.Document.Write("<br />");
//web_display.Document.Write("</ul>");//end section list
web_display.Document.Write("</td></tr></tbody><tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>" +
"</table><div id='newFooter'>This is footer text</div></body>");
<style type="text/css">
#footer
{
position:absolute;
left:200px;
top:750px;
}
</style>
Change the left: and top: to suit your page.
that will position it absolutely in the exact place you want.
EDIT - Note: My solution was posted prior to what looks like it may have been an edit (no picture was displayed when I first read the question and less information) on the question that changed it, the answer is now irrelevant sorry. This may be able to help you anyway with something else.
For consistency through multiple pages I would personally use a div.
Next option, CSS like (off the top of my head I don't know if this will work)
#footer {
height:100%;
vertical-align:bottom;
}
EDIT ENDS HERE
I use the print and screen media types for this, in the of your page include a stylesheet like this:
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
Make sure your other 'screen' stylesheet is tagged with media="screen"
Now in your stylesheet put in the code for your footer as you would like to see it printed, in this example I'm using a div tag:
#print_footer { border:0 solid #333; font-family:arial; font-size:8px; color:#000; margin-bottom:0; }
Open your normal 'screen' stylesheet add the following class
.no_screen { display:none; }
This will stop the element from displaying on the screen.
In your page create your DIV
<div id="print_footer" class="no_screen">Copyright © 2011 Ryan. All rights reserved.</div>
I hope this helps.