I have requirement to print html page in A4 dimension, plus I want to print content body print along with css, html and ignore menu list, header, footer and page right-side menu list.
To start with this, I have introduce simple div and class noprint and add this in #media print but its seems not working. noprint class works outside the #media print so I know its correct.
Also my requirement is to print directly from browser using standard Ctrl+P keyboard option
<style type="text/css">
.standardStyle {
display:block;
width:200px;
height:150px;
padding:10px;
background-color:green;
margin:5px;
}
#media print{
.noprint{ color:red;}
}
</style>
</head>
<body>
<div class="noprint standardStyle">
this is test line....
</div>
<div class="print standardStyle">
this is test line....
</div>
<div class="print standardStyle">
this is test line....
</div>
Run the snippet and hit Ctrl+P , you will see the line in red colour.
Screenshot :
#media print {
.noprint { color:red; }
}
<div class="noprint">
this is test line.....
</div>
Most browsers do NOT print background colors and background images by default. I suppose you are missing the green background - this is the reason for it.
Usually this can be acitvated in the browser's print dialog, but to force a background to be printed you can only try adding !important to the settings that don't appear properly in print.
#media print
{
.noprint{
display: none !important;
}
}
Related
I would like to create a button using only HTML, to print the web page just as the way it appears on the browser.
But this basic code prints even the hidden blocks.
<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>
Could someone help me please!
Here The button generates this pdf with above code.
but the problem, it takes the whole body of the page, which has blocks hidden for computers but visible for mobile phones.
It is printing all the body including hidden blocks.
like in this below screen shot, this are normally hidden blocks for computer browsers.
I solve this problem by including some #media print rules in a stylesheet.
.print-only{
display: none;
}
.screen-only{
display:block;
}
#media print {
.print-only{
display: block;
}
.screen-only{
display:none;
}
.something1,
.something2 {
display:none;
}
}
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
For printing purposes, I removed the IMG element, but I wanted an H1 element to be displayed on another portion of the site when the IMG element is removed.
Is this possible?
You can use CSS media types for this.
Don't think of it as revealing one element when another is removed; instead think of it as selectively displaying elements depending on whether they are for print or screen.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
.screenonly { display: none; }
}
#media screen {
.printonly { display: none; }
}
</style>
</head>
<body>
<h1 class=printonly>Header for print</h1>
<h1 class=screenonly>Header for screen</h1>
</body>
</html>
Save this to a file and view it in a browser, and you will only see "Header for screen". Print the same page and you will instead see "Header for print".
This technique will work on any element and can be used to set any CSS style for print or screen.
I have a web page that loads two images from a css sprite like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="arrow low"></div>
<div class="arrow high"></div>
</body>
</html>
and the css (stylesheet.css) looks like this:
.arrow
{
height: 239px;
width: 260px;
background: url('logotypearrows.png') no-repeat;
}
.arrow.high
{
background-position: 10px 0px;
}
.arrow.low
{
background-position: -1003px 0px;
}
The web page looks perfect but I can't print it. I can't see the dynamically loaded arrows. Anyone that knows how to solve this problem? I want to be able to print out the arrows and I want to load them from a css sprite.
By default browsers do not print background-images, this can be changed by user.
Maybe you should add some content inside div <div class="arrow low"><span class="print-only">*</span></div> and make it visible only for print version of your page with #media print.
Quick fix:
You can have a custom css class for media type print like this,
#media print {
.printable {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
}
And add this class to your divs,
<div class="arrow high printable"></div>
This will print your background images in Chrome, Firefox and Safari.
Note: These css options are non-standard - so, quite risky to use these in production. Also, this won't work in Internet Explorer - you need to enable the option "Print background images" from File --> Page Setup.
Cross-browser fix:
Instead of using divs with css image sprites as background, you can use actual images with the same logic you have applied in your classes. For an example, you can check my JsFiddle here
In which image you have to print?
It's up to the user and their browser settings to print or not print
background images. To keep yourself from relying on that, put the
images in the foreground in HTML. —Kon
(taken from this related thread)
i had created one web page with header image (style="background-repeat: repeat-x;"). I have need print this page. Then print preview click and i see 2 pages. first page top position include header image and then 2 page is same header images included, but i need only first page with header image, 2 page don't need header image. please help me
Unfortunately, that's how Firefox function, each new print page is like an individual web page.
I would recommend you use a "print" specific CSS by removing the body background and having a block header visible only in print.
Here's an example:
<html>
<head>
<style type="text/css">
body {
background: url(topbg.jpg) repeat-x;
}
div#printheader { /* Do not display for other non-print media */
display: none;
}
#media print { /*CSS for print*/
body {
background: none;
}
div#printheader {
display: block;
}
}
</style>
<body>
<div id="printheader"><img src="topbg.jpg" /></div>
.
.
.
.
.
</body>
</html>