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>
Related
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;
}
}
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.
I have a little css snippet here: http://jsfiddle.net/cr6Hm/ (Similar example can be found on http://9gag.com/)
Basically, it shows a small div on the Notifications link with New text written on it.
Right now, New text is writtenon the div using pseudo:after and it works.
// This one works
.text-new:after {
content: 'New';
}
However, I want to change New text dynamically. (e.g I want to display amount of notifications instead of new)
I don't know how can I do it since I don't exactly know how pseudo:after works.
Basically, it should be something like this:
<span class="popup popup-greenish">
<i class="text>{{ $amount_notifications }}</i>
Notifications
</span>
Can anybody help?
This requires an attribute such as this:
<span class="test" data-count="123">...</span>
And CSS:
.test:after {
content: attr(data-count);
}
Note that the attribute MUST be on the element that the psuedo-element belongs to.
I have two classic HTML pages (just HTML and CSS) and links between them.
When I click on these links, the screen flickers (it quickly goes white between transitions).
I tried to place this in the head - without result:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
I can usually open other sites without the flickering.
Browser is Firefox 16.0.1.
Just change your body background to:
body {
background: url("Images/sky01.jpg") repeat scroll 0 0 #121210;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
background color will prevent white flickering while loading the background image.
That meta are for IE only, they don't work in FF.
You can't rely prevent flickering in plain HTML. The best solution I found is to replace every link with a JavaScript call where you download the page with AJAX and then you replace the document itself with the new content. Page refresh will be really fast and you won't see any blank screen while downloading.
Basic function may be something like this:
function followLink(pageUrl)
{
jQuery.ajax({
url: pageUrl,
type: "GET",
dataType: 'html',
success: function(response){
document.getElementsByTagName('html')[0].innerHTML = response
}
});
}
Then you have to replace you links from:
Link
With:
Link
More details about this: replace entire HTML document]1: how to replace the content of an HTML document using jQuery and its implications (not always so obvious).
Improvements
With this solution you force your users to use JavaScript, in case it's not enable they won't be able to click links. For this reason I would provide a fallback. First do not change <a> but decorate them with (for example) a CSS class like async-load. Now on the onload of the page replace all hrefs with their javascript: counterpart, something like this:
jQuery().ready(function() {
jQuery("a.asynch-load").each(function() {
this.href = "javascript:followLink(\"" + this.href + "\")";
});
});
With this you can handle a loading animation too (how it's implemented depends on what yuo're using and your layout). Moreover in the same place you can provide fade in/out animations.
Finally do not forget that this technique can be used for fragments too (for example if you provide a shared navigation bar and a content sections replaced when user click on a link the the navigation bar (so you won't need to load everything again).
Try to embed pictures as it delays final page loading and therefore white transition time
echo '<img src="data:image/png;base64,';
echo base64_encode(file_get_contents($file));
echo '"/>';