We Keep Coding

Printing button is also Printed during printing Document [duplicate]

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
});

Hide footer Url while printing page from chrome [duplicate]

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

JS add in-line css to html

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.

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image

For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.

you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/

Progressive Enhancement and Initial Display State

I have a specific example, but I'm looking for the answer in general as well. I have page elements that I want to have initially hidden if JavaScript is enabled.
Examples:
A section of a form that toggles
A submit button for a select box 'jump form'
I am trying to avoid the 'content flash' when the elements are hidden after page load.
SOLUTION
I am putting the full solution here for posterity's sake.
JavaScript file called in <head> section: document.documentElement.className = 'js';
Styles that allow for initially hidden or shown elements:
.js .inithide {
display: none;
}
.initshow {
display: none;
}
.js .initshow {
display: block;
}

Check this solution out. It has worked for me in the past:
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content