I am using a print page button and I am trying to hide the (click here to print) portion of the link when the document prints. (It also shows forms (forms/IRF.cfm) which I do not want to show either.)
Initial Registration Fee Exemption Affidavit - if applicable (click here to print)
I tried inserting span with a class of noprint to hide it with css and that did not work either.
#media print {
.noprint {
display: none;
}
}
Initial Registration Fee Exemption Affidavit - if applicable <span class="noprint">(click here to print)</span>
Is there a special way to do this with text and links?
Any help would be greatly appreciated!
If I try with your code it works perfectly:
<style>
#media print {
.noprint {
display: none;
}
}
</style>
Initial Registration Fee Exemption Affidavit - if applicable <span class="noprint">(click here to print)</span>
To test, please click "Run code snippet", then right-click next to the link "initial Registration...." and select "print".
I found the answer if anyone is looking for this. To remove the paths of the href you will want to do this with the css:
#media print {
a[href]:after {
content: none !important;
}
}
Related
I created a
<style media="print"> #header{ display: none; } </style>
to hide the header when user selects Browser's 'Print' Command. This will hide the header on all pages. I need to Display Header on first page but hide on all the others. Can any one advice how can this be done with the 'Media' Style?
You will need to use javascript for that, you can try something like
var urlPath= window.location.pathname;
if (urlPath.length > 1)
document.getElementById("header").style.display="none";
or with jquery
$("#header").hide();
I recently made a (responsive) redesign for a website of mine.
Oddly there is a strange behaviour of the links in some places which every tester missed (because they thought they had missed the link I imagine):
If you click on these links they only get "activated" -- but they aren't followed. If you click them again, then they work fine.
This even works if you click say 7 links in a row and then the first one again.
This only happens on ios 8.x (Tested on 8.4.1.) but not on 7.x and not on android or any desktop-browser.
With remote debugging I see nothing.
I don't even know where to start debugging this ...
Effect can be seen (with an 8.x iPhone) here: http://www.plamundo.de in the listed products.
I've seen the same behaviour, but only with 8.4.1 not with 8.4. This also seems to be the case on your site. An 8.4.1 device requires a double tap, with 8.4 only one tap is needed. This is a minimal testcase I built:
<html>
<head>
<title>Minimal testcase iOS 8.4.1 hover double tap problem</title>
<style>
body { font-size: 2em; } /* Only needed for a readable font-size */
a { display: block; font-decoration: none;}
a:hover { font-decoration: underline; }
</style>
</head>
<body>
<a href="http://www.apple.com/" >Click me</a>
</body>
</html>
We solved this by making the 'a:hover' conditional. You can do this with a media-query (but that's hard if you also want to target iPads) or with some JavaScript that adds a class which you can use to make the CSS selective. Example:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
with:
.iamanobnoxiousiphonedevice *:hover{
text-decoration: inherit !important;
}
An easier way to solve this is by removing the 'display: block', but I don't know if that's an option for you.
A strange trick solution that works in a project I am working on is to reset the z-index:
* { z-index: 0 }
Found that hack by Ryan Ou (thx) in an Angular google group
I suspect that it might be Adobe Analytics on our site that "steals" some clicks. Had issues because of Adobe also when trying to set focus on a text field and reveal the keyboard after a click. They caught the initial click so that our became synthetic and became restricted by iOS.
I'm surprised to have encounted this same issue so many years after the original post. I'm exploring solving this as follows:
const onHover = useCallback(
(evt) => {
// ios browsers intercept the tap/click event and instead trigger a mouseover event.
// This happens ONLY if we subscribe to onHover events.
// But we can grab the original event target and directly call click.
if (isIos()) {
evt.target.click?.();
}
// whatever your normal onHover code is can now be called:
onOriginalOnHover();
},
[onOriginalOnHover],
);
This works in my test app. Will need further validation though.
I have built a page that is print-enabled using window.print(). Because of some really unusual requirements from management, I need to be able to capture the click event for the print menu that appears when window.print() is called. Specifically, in Chrome, I need to capture the click event for the Print (blue) and Cancel (gray) buttons.
I have to admit I don't even know where to start here. I inspected each element and can see that these are standard html elements. These buttons have classes (print default for the print button and cancel for the cancel button) but no IDs.
I also noticed that no DOM is visible beyond the print menu, and the print menu html tag has an ID of 'print-preview'.
How do I capture click events for the print menu buttons (in Chrome at least)?
You can not access Chrome's internal windows (printing dialog in this case) directtly from a regular web page.
To determine that printing dialog was opened or closed you can catch matchMedia events (webkit only):
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
console.log('before print dialog open');
} else {
console.log('after print dialog closed');
}
});
But you can not check if 'Print' or 'Cancel' button was clicked. This information is not accessible from regular web page.
To get information about Chrome's printer jobs you can only create extension for Chrome and listen onPrintRequested event in content script. Of course extension must be installed into browser of each page user.
Are you trying to block printing in a web page, if so please follow the below link.
http://webdesign.about.com/od/advancedcss/qt/block_print.htm
It's easy to use CSS to prevent people from printing your Web pages. You simply need to create a 1 line stylesheet named print.css that says:body { display: none; }Then load that stylesheet as a print stylesheet:<link rel="stylesheet" type="text/css" href="print.css" media="print" />The important part is indicated in bold - this is a print stylesheet. It tells the browser that if this Web page is set to print, switch the body to display nothing.
Then, all that will print will be the standard header and/or footer that the browser appends to printed pages.Block One Page at a TimeIf you don't need to block a lot of pages on your site, you can block printing on a page-by-page basis with the following styles pasted into the head of your HTML:<style type="text/css"> #media print { body { display:none } } </style>
Get Fancier with Your Blocked PagesBut what if you want to block printing, but don't want your customers too frustrated? You can get a little fancier and put in a message that will only display when your readers print the page - replacing the other content. To do this, build your standard Web page, and at the top of the page, right after the body tag, put:<div id="noprint">And close that tag after all your content is written, at the very bottom of the page:</div>Then, after you've closed the "noprint" div, open another div with the message you want to display when the document is printed:
<div id="print">
<p>This page is intended to be viewed online and may not be printed. Please view this page at http://webdesign.about.com/od/advancedcss/qt/block_print.htm</p>
</div>
Include a link to your print CSS document named print.css:<link rel="stylesheet" type="text/css" href="print.css" media="print" />And in that document include the following styles:#noprint { display: none; }
#print { display: block; }Finally, in your standard stylesheet (or in an internal style in your document head), write:
#print { display: none; }
#noprint { display: block; }This will insure that the print message only appears on the printed page, while the Web page only appears on the online page.
Can anyone tell how to print custom documents with HTML5?
This is what i want with this print function.
I have document management system that already have print function build using silverlight. I want a solution to replace silverlight plugin from HTML5. please give me any idea or a solution.
Assuming you are already displaying the document in the webpage using Iframe,
If the assumption is correct, you can print the content of the iframe as following code
<input type="button" onclick="printIframe()" value="print" />
<iframe id="printf" name="printf" src="./sample.pdf"></iframe>
<script>
function printIframe() {
var target = document.getElementById('printf');
try {
target.contentWindow.document.execCommand('print', false, null);
} catch (e) {
target.contentWindow.print();
}
}
</script>
Or else if you are not using Iframe, just write a custom print css file to display only the content of the document you want to print.
Note: You don't have direct access to the printer using javascript
You can customize the style of what HTML5 looks like when it is printed with css #media print rules. For instance if you wanted to make the font-size larger when printed you would do,
p{
font-size: 15px
}
#media print {
p{
font-size: 20px;
}
}
http://www.w3schools.com/css/css_mediatypes.asp
I am working on this website that has a printing problem, if I do a print, the hyperlinks got printed out twice: here is what I meant by twice
Html code: <p>Urgent Care: 765-494-1724.</p>
Print output:
Urgent Care: 7654941724 (tel:7654941700)
I ONLY NEED Urgent Care: 765-494-1724 (NOT tel:7654941700). But, I do need the hyperlink to be <a href="tel:765-494-1700"> because this hyperlink needs to be used on cellphone, and when people click on it, it will auto driven them to the dial screen.
In my print.css file, I actually already try to fix this problem by doing:
a:link, a:visited {
content: "";
}
But It did not work :( So I am hoping that I could get some ideas on this problem if possible. Thanks a million!!!
P.S.: Working on MAC OS, chrome, safari, firefox all NOT printing right...
Add this to your print.css (and remove your a:link, a:visited rule)
#media print {
a[href]:after {
content: none !important;
}
}
Your HTML:
Urgent Care: <span class="phonenumber">765-494-1724</span>
Your CSS:
#media print {
a span.phonenumber{
display:none;
}
}
This will hide the text within the link, so it only shows the text of the link itself, which is the phone number (tel:765-494-1700).
Maybe you don't need to create a link, though, because most mobile browser will recognise any number as a phone number.
Alternatively, you can also make the phone number plain text (or a link with an empty href) and fill in the href using Javascript.
What if you just made the link like this:
.</p>
Does that make it just show up once?
in your print css do like below :
#media print
{
a.no_print{display:none;}
a.to_print{display:block;}
}
in the regular css you do the reverse :
a.no_print{display:block;}
a.to_print{display:none;}
And your html :
<p>Urgent Care: <a href="tel:765-494-1700" class="no_print" >765-494-1724</a> <a class="to_print" >765-494-1724</a>.</p>