I have a 2550px x 3300px image of a document. I scale it to 901px to 1166px using css. Also used image width/height attributes without css. It looks great in chrome and IE but the image contents look jagged in FF (3.6). Resizing the image itself is not an option (for good quality printing).
Any suggestions?
You could try adding the CSS tag image-rendering: optimizeQuality; although this should be the default. Perhaps you have another tag somewhere which is overriding the default?
From http://articles.tutorboy.com/css/resize-images-in-same-quality.html
If the intention is to get a better quality when the user prints the page you could use separate style sheets for print and screen.
<style>
#media screen
{
#origImage { display:none; }
}
#media print
{
#screenImage { display:none; }
}
</style>
...
<img id="origImage" src="original.jpg" />
<img id="screenImage" src="resized.jpg" />
Related
I have lazyload working on my site. But if someone wants to print the webpage then id like the images to print out as well and not the loading spinner.
Here is what my images look like
<img class="lazy" data-original="images/gd-0007.jpg" src="../../img/loadingplaceholder.gif">
so using the #media print { } Id like to make the src the same as the data-original.
Tried this but no luck. (did it in the stylesheet to see if it worked)
#media print {
.lazy {
src: attr(data-original);
}
}
Here is where i got the idea:
http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/
Here is a jsfiddle if it helps:
http://jsfiddle.net/gXpzb/
The problem is, this is just an idea for something that the author thinks would be nice to have in CSS one day, currently this is not supported.
There is no src property to be set in CSS, but a content property, however it doesn't seem to accept an URL fetched using attr(), respectively it doesn't seem to be implemented by any browser yet. Judging from the specs, something like this could be possible in the future:
content: attr(data-original url);
See also: Css Content, Attr and Url in the same sentence
So, as far as I can tell you'll currently have to stick with explicitly defining the URLs in CSS, something like
<img class="lazy gd0006" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
<img class="lazy gd0007" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
<img class="lazy gd0008" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
...
#media print {
.lazy.gd0006 {
content: url('/images/gd-0006.jpg');
}
.lazy.gd0007 {
content: url('/images/gd-0007.jpg');
}
.lazy.gd0008 {
content: url('/images/gd-0008.jpg');
}
...
}
How can I prevent browsers from customizing buttons, such as Chrome, for example, does.
I would like to remove that "No f... sen". What is the best way to do that?
The only way you can remove the text part in non-IE10+ browsers to make it transparent:
input[type=file] { color: transparent; }
However, I’d not recommend that, as you will also not be able to see the text when a file has been selected either.
For IE10, you can style it with:
input[type=file]::-ms-value { /* styles here */ }
In WebKit you can style the button itself with:
input[type=file]::-webkit-file-upload-button { /* styles here */ }
While in IE10 you can do the same with:
input[type=file]::-ms-browse { /* styles here */ }
Try to google for "Css style file input" ;)
This will lead to: http://www.quirksmode.org/dom/inputfile.html
Styling of <input type="file" /> is really tricky.
I have this link :
</td>
and I want to change the image when the user over the link I tested :
#planification:hover{
background-image:"images_cartographie/cartographie3_03.gif";
}
but the image doesn't change, it is ignored, (I tested background-color it works (then the problem isn't in url or ...))
when I use the background-image without hover like that :
it doesn't appear :
#planification{
background-image:"images_cartographie/cartographie3_03.gif";
}
NB : I generated the page with photoshop
do you have any idea
You can completely remove the img because you add the efect via CSS on the a tag.
HTML
CSS
.image_link{
display:block;
width:800px;
height:600px;
background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg');
}
.image_link:hover {
display:block;
width:800px;
height:600px;
background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg');
}
JSFiddle.
Note that you must add dispay:block/inline-block to the a
I'm a little confused about your question, but it sounds like you need to put in two different images. So, there's one image when you mouse over, and another image when you don't. You just put in a different path for the background-url on hover. Also, you should put in a plank gif in your img tag for backwards compatibility.
You should also use a self closing tag /> for your image. The tag is open the way that you posted it.
#planification
{
background: url(images_cartographie/cartographie3_03.gif)
}
#planification:hover
{
background: url(images_cartographie/new_image_goes_here.gif)
}
<a id="planification" href = "" ><img src="images_cartographie/blank.gif" width="207" height="47" alt=""/></a>
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
});
I'm trying to dynamically hide certain DIV's when a print (or print preview) occurs from the browser.
I can easily differentiate statically by having two style sheets, one for normal and one for print media:
But I need to go one step further and hide some elements dynamically when the print style sheet becomes active during a print based upon certain criteria
One way to easily solve it would be to handle a DOM event for handling print / printview, then I could just use jQuery to change the display:none on the classes that need to be hidden, but I can't find a DOM print event!!
Anyone know what the solution is?
Not all browsers allow you to capture the print event. I've seen this tackled by adding a 'print this page' link and then using that click event to accomplish what you need.
I don't think you need a print event. All you need to do is adjust your #media print styles based on your Javascript(?) criteria. When the user attempts to print the page, the #media print style will apply and your styles will be in effect:
<html>
<head>
<style id="styles" type="text/css">
#media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();
if (x > .5) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#media print { .maybe_noprint { display:none; } }';
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>
If you are using server-side criteria to determine what prints, then just have server-side code spit out #media print to decorate the classes as necessary. Also, you may want to consider modifying an existing class that's already inside #media print, or building up the new CSS using something other than innerHTML, which I'll admit smells awful to me, but seems to work in Opera 9.6, Safari for Windows 3.1.2, IE 6 and Firefox 2.0.0.17 (I didn't test any other browsers).
Just tag those DIVs with a class that's hidden on the print stylesheet:
HTML
<div id='div19' class='noprint'>
...
</div>
print.css
.noprint {
display: none;
}
If you don't know in advance which elements you need to hide, you can use javascript to set the class for the given objects:
Javascript
document.getElementById('div19').className='noprint';
There's an onbeforeprint event in IE. It doesn't appear to be supported by other major browsers. (I tested Firefox 3.0.3 and Safari 3.1.2.)