I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.
Is there javascript or HTML code which would hide the link button when I click the print link?
Example:
"Good Evening"
Print (click Here To Print)
I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.
In your stylesheet add:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
Bootstrap 3 has its own class for this called:
hidden-print
It is defined like this:
#media print {
.hidden-print {
display: none !important;
}
}
You do not have to define it on your own.
In Bootstrap 4 and Bootstrap5 this has changed to:
.d-print-none
The best practice is to use a style sheet specifically for printing, and set its media attribute to print.
In it, show/hide the elements that you want to be printed on paper.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Here is a simple solution
put this CSS
#media print{
.noprint{
display:none;
}
}
and here is the HTML
<div class="noprint">
element that need to be hidden when printing
</div>
CSS FILE
#media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<div class="no-print"></div>
You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).
The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.
#media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
The best thing to do is to create a "print-only" version of the page.
Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".
The accepted answer by diodus is not working for some if not all of us.
I could not still hide my Print this button from going out on to paper.
The little adjustment by Clint Pachl of calling css file by adding on
media="screen, print"
and not just
media="screen"
is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments.
The user should include the ",print" in css file with the desired formating.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
and not the default media = "screen" only.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
That i think solves this problem for everyone.
If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
As Elias Hasle said, JavaScript can override !important. So, I extended his answer with a theoretical implementation.
This code identifies all elements with the class no-print, hides them with CSS before printing, and restores the original style after printing:
var noPrintElements = [];
window.addEventListener("beforeprint", function(event) {
var hideMe = document.getElementsByClassName("no-print");
noPrintElements = [];
Array.prototype.forEach.call(hideMe, function(item, index) {
noPrintElements.push({"element": item, "display": item.style.display });
item.style.display = 'none'; // hide the element
});
});
window.addEventListener("afterprint", function(event) {
Array.prototype.forEach.call(noPrintElements, function(item, index) {
item.element.style.display = item.display; // restore the element
});
noPrintElements = []; // just to be on the safe side
});
Related
I want to remove the URL that gets printed on the bottom of the page.
like:
yomari.com/.../main.php?sen_n
How can it be omitted or prevent from getting printed?
To be more specific, is there any way I can prevent the page URL, date and the page title being printed along, while printing the web page?
Following code sample will work for you,
<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>
see the answer on Disabling browser print options (headers, footers, margins) from page?
and specification of the #page
i found something in the browser side itself.
Try this steps.
here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.
Chrome
Click the Menu icon in the top right corner of the browser.
Click Print.
Uncheck Headers and Footers under the Options section.
Firefox
Click Firefox in the top left corner of the browser.
Place your mouse over Print, the click Page Setup.
Click the Margins & Header/Footer tab.
Change each value under Headers & Footers to --blank--.
Internet Explorer
Click the Gear icon in the top right corner of the browser.
Place your mouse over Print, then click Page Setup.
Change each value under Headers and Footers to -Empty-.
This helped me:
Print page without links
#media print {
a[href]:after {
content: none !important;
}
}
Having the URL show is a browser client preference, not accessible to scripts running within the page (let's face it, a page can't silently print themselves, either).
To avoid "leaking" information via the query string, you could submit via POST
If you set the margin for a page using the code below the header and footers are omitted from the printed page. I have tested this in FireFox and Chrome.
<style media="print">
#page {
size: auto;
margin: 0;
}
</style>
Browser issue but can be solved by these:
<style type="text/css" media="print">
#media print
{
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 72px;
padding-bottom: 72px ;
}
}
</style>
I am telling you about Mozilla Firefox ( I hope it should be same way in other browsers also).
Click on Firefox menu , Go to Print , Select Page Set Up from sub menu of Print. A pop will come up on your screen, there go to "Margin & Header /Footer" tab.
In that select "BLANK" for header / footer as per requirement before printing. You can check the preview for confirmation.
I hope this will help.
Nowadays, you can use history API to modify the URL before print, then change back:
var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);
But you need to make a custom PRINT button for user to click.
You can remove the url dispalying on the printed document via your browser settings.You just click file->page setup->header and footer set all things as blank.if you hav ie,you just remove &U from footer textbox.hopefully this will help you
#media print { a[href]:after { content: none !important; } }
This is working fine for me using jquery
<style>
#media print { #page { margin: 0; }
body { margin: 1.6cm; } }
</style>
I do not know if you are talking about a footer within your actual graphic or the url the print process within the browser is doing.
If its the url the print process is doing its really up to the browser if he has a feature to turn that off.
If its the footer information i would recommend using a print stylesheet and within that stylesheet to do
display: none;
For the particular ID or class of the footer.
To do a print stylesheet, you need to add this to the head.
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
In Google Chrome, this can be done by setting the margins to 0, or if it prints funky, then adjusting it just enough to push the unwanted text to the non-printable areas of the page. I tried it and it works :D
On Chrome 57 the following worked for me, if you have control of the HTML page that needs to be printed (in my case I needed to print a small 3x1 inch label):
remove the HTML title element from header (either temporarily using jquery or permanently if that page does not really need a title)
set the #page margin to 0 as mentioned by #Chamika Sandamal
This resulted in printing a page that only contained the body text, no URLs, no page #s etc.
I would agree with most of the answers saying that its a browser settings but still you can achieve what you want via COM. Keep in mind that most browsers will still have issue with that and even IE will raise the COM security bar to users. So unless its not something you are offering within organisation, don't do it.
I have the same problem. I wonder if it is possible to create the HTML for printing via a jquery plugin: http://www.recoding.it/?p=138
Then send the HTML to a php script (using an ajax call), generate a pdf with http://www.xhtml2pdf.com/ or http://code.google.com/p/wkhtmltopdf/.
Afterwards the pdf could be displayed (by setting the appropriate content type and direct rendering) or displayed by a http-Redirect to the generated pdf.
The generated pdfs in the pfd_for_printing-folder could act as cache and be deleted by a job once a day.
<style type="text/css" media="print">
#page {
size: auto;
margin: 0;
}
</style>
//now set manual padding to body
<style>
body{
padding-left: 1.3cm;
padding-right: 1.3cm;
padding-top: 1.1cm;
}
</style>
Chrome headless now supports an extra options --print-to-pdf-no-header which removes header and footer from the printed PDF file
Perhaps you could try chrome (Probably Safari also)
The url & the page number in the header & footer is not visible when I print to pdf on OSX with Google Chrome.
Sorry not sure if this applies to windows
I have a trick to remove it from the print page in Firefox. Use this:
<html moznomarginboxes mozdisallowselectionprint>
In the html tag you have to use moznomarginboxes mozdisallowselectionprint. I am sure it will help you a lot.
This will be the simplest solution. I tried most of the solutions in the internet but only this helped me.
#print {
#page :footer {
display: none
}
#page :header {
display: none
}
}
#media print {
#Header, #Footer { display: none !important; }
}
Check this link
I'm stuck with something here:
I have a hidden div with some optional filters in a results page.
<div id='b-filters' class='row'>...</div>
Initially it is hidden with display: none;, when click a link it shows with some buttons and selectize combos.
The problem is here:
When div shows up, some JS, I don't know how to find out which; adds some in-line css:
<div id='b-filters' class='row' style='overflow: hidden; display: block;'>...</div>
So it is no possible to see the combos options. Using Chrome debugger I change overflow: hidden to overflow: visible and it works as I'd like.
I have tried:
In my external css file (app.css)
#b-filters{
...
overflow: visible;
...
}
But does not work, and in the same html file:
<head>
...
<style>
div#b-filters{
overflow: visible;
}
</style>
</head>
...
But Chrome inspector always show overflow: visible; crossed out.
Any idea? Thanks.
EDIT
I took #Stephen Thomas answer, but I'd like somebody help me with the way to find out which JS is adding that in-line css.
Without seeing the actual JavaScript, the only suggestion I can offer is
div#b-filters{
overflow: visible !important;
}
But if you show us your code, there is probably a more elegant way.
Instead of adding inline CSS directly to the element, why not abstract the CSS attributes into generalized classes, then just add/remove those classes?!
// style.css
.hide {
display: none;
}
// view.html
<div id="b-filters" class="row hide">...</div>
// app.js
btn.addEventListener('click', function(event){
var el = document.querySelector('#b-filters');
el.classList.remove('hide');
});
var problematicDiv = document.getElementById('b-filters');
if(problematicDiv.hasAttribute('style'))
{
problematicDiv.removeAttribute('style');
problematicDiv.style.display = 'block';
problematicDiv.style.overflow = 'visible';
}
This 'pseudo' js code should work as eventlistener.. haven't tested though, but I think it's ok.
I'm invoking the navigator print function using a simple window.print(); call. It prints perfect (I want to print the same I see on the screen, so I don't really use a special CSS to print) but it showing the link locations next to the text link, something like:
Homepage (http://localhost)
To be clearer: I don't want to have the link locations near the links in the printed version, I have control over the CSS but I can't find this behaviour defined anywhere, so I think is a navigator-related issue!
EDIT:
This happens under Firefox 3.6.8 and the last Chrome, on Ubuntu an Windows XP/Vista.
So to avoid additional print-out of link information in a printed web page, add the following rules to the #media print section:
a:link:after, a:visited:after {
content: "";
}
This will remove the ugly link information like Homepage (http://localhost) and reduce it to Homepage. You may of course add rules to avoid it only in the text section (or only in the navigation, but you shouldn't display navigation in the print-out format of your web page.
Seems you are printing a page with this styling from a CSS2 compliant browser
http://www.alistapart.com/articles/goingtoprint/
In a fully CSS2-conformant browser, we
can parenthetically insert the URLs of
the links after each one, thus making
them fairly useful to anyone who has a
copy of the printout and a web browser
handy. Here’s the rule, which
restricts this effect to the “content”
div and thus avoids sticking a URL in
the masthead:
#content a:link:after, #content a:visited:after {
content: " ("attr(href) ") ";
font-size: 90%;
}
Try it out in a Gecko-based browser,
like Mozilla or Netscape 6.x. After
every link in the printout, you should
see the URL of the link in
parentheses.
content: ""; does not work
I use this:
#media print {
.noprint {display:none !important;}
a:link:after, a:visited:after {
display: none;
content: "";
}
}
This works to disable!
Currently using the content property should work in all major browsers.
#media print - or - <style type="text/css" media="print">
a:link:after, a:visited:after {
content: normal; //TODO: add !important if it is overridden
}
More options here: CSS Content.
More usefull ways of using the content attribute here: CSS Tricks
My app server (rails) required me to use a parent selector. The body element is perfect for selecting what should be the entire page.
body a:link:after, body a:visited:after {
content: "";
}
I found the other solutions don't work (anymore) cross-browser.
The following works in FF 29, Chrome 35, IE 11:
a:link:after, a:visited:after {
content: normal !important;
}
For anyone using Bootstrap 3, the selector used is:
a[href]:after { }
And can be overriden with something like:
a[href]:after {
content: initial;
}
Use additional CSS for print.
See here:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Adding this will help you to remove those unwanted links
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
Reading this will help
While many css options have been suggested, if you wish to get rid of the links and headings in the header/footer which is forced on each page, there is a setting just for you. As shown below.
That's it.
I found the mentioned CSS and removed it but it did not help, and I couldn't find it anywhere else in the project so I used jQuery to remove the links but still retain the text.
$('a[title="Show Profile"]').contents().unwrap();
More info here Remove hyperlink but keep text?
I faced the same problem, if you're using chrome, the trick is when displaying the print window, this one contains a left config panel which gives some configuration of display mode and other, there is a link below named : more params or more config (I had in french so I tried to translate it ), click on it after that it will show some additionnal options, among them, there is a check box "header and footer" uncheck it, and it will hide the "localhost...."
hopefully it will help
Every browser having setting of printing header and footer ,and background graphics
If you disable this setting of printing header and footer then it will not show on your print page
The contents of the following div is derived dynamically: i.e a table is added dynamically to this div with some button.
My question is how to print the content of this div(window.print) and not other things in the page
<div id="newdiv" name="newdiv"></div>
Thanks.
Two ideas:
Introduce a print stylesheet
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
that will give every element display: none except for newdiv:
* { display: none } /* This should hide all elements */
div#newdiv { display: block } /* This should make newdiv visible again */
I can't test this right now but I can't see why this wouldn't work.
Copy the contents of the div into a newly created iframe element using JavaScript and print that.
Lots of obstacles on the road that way, though. I'd try using CSS first.
Clever thinking Pekka, but it doesn't work quite like that, after using a global display:none you would have to redisplay every single element that needs to be displayed, including all parent elements. Best way would be to hide all the elements that should not be printed, good news is that you only need to hide the parent element and everything in it will be hidden.
There is by the way no need for an extra style sheet, a block in an existing sheet can be used (it must be placed at the end of the last sheet):
#media print{
.noprint{
display:none;
}
}
Now a block can be hidden from printing simply by giving its container the noprint class.
Your best bet is to create a media-specific style sheet.
http://www.alistapart.com/articles/goingtoprint/
I would like to print only the contents of a textarea element from a website page. In particular, I would like to ensure that nothing gets clipped by the boundary of the textarea as the contents will be quite large.
What is the best strategy for tackling this?
Make a print stylesheet where all of the elements except the textarea are set in CSS to display: none;, and for the textarea, overflow: visible.
Link it to the page with the link tag in the header set to media="print".
You're done.
Make a different CSS with media set to print
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
http://webdesign.about.com/cs/css/a/aa042103a.htm
If the user clicks "Print," you could open a new window with just the contents of the textarea on a blank page and initiate printing from there, then close that window.
Update: I think the CSS solutions being suggested are probably better strategies, but if anybody likes this suggestion, they can still upvote it.
I'd go for a combo of the other suggestions.
Don't kill the print button for the whole page with a stylesheet override, but instead provide a button by the textarea, that lets the user print only those contents.
That button would open a new window, with menus/chrome etc. and clone the textarea content only (and or provide a print css file)
I made a print media CSS to hide a number of the fields. The problem was complicated by the fact that I was using nicEdit which dynamically creates an IFRAME. So I had to add an event that took onblur events and copied them over to a hidden (except for printing) Div. "divtext" is the hiddent Div, and "storyText" is the TextArea.
textarea {
display: none;
}
*/ #divtext {
display: block;
}
div, DIV {
border-style: none !important;
float: none !important;
overflow: visible !important;
display: inline !important;
}
/* disable nearly all styles -- especially the nicedit ones! */
#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame {
display: none !important;
}
/*hide Nicedit buttons */
.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt {
display: none !important;
}
The javascript code for nicEdit:
<script type="text/javascript" src="/media/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
var nic = new nicEditor({
fullPanel: true
}).panelInstance('storyText');
document.getElementById("storyText").nic = nic;
nic.addEvent('blur', function () {
document.getElementById("storyText").value =
nic.instanceById('storyText').getContent();
document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent();
});
});
</script>
Did the overflow: visible; on textarea actually work for any of you? FF3 seems to ignore that rule on textarea in print sheets. Not that it's a bug or anything.