Is there a cross-browser fix for enabling background-image in combination with background-size: cover; when printing a webpage?
I would appreciate all kinds of solutions even those using JavaScript!
Try following:
Add meta-tag on your page:
<link rel="stylesheet" href="print.css" media="print" />
In the print.css next tag:
#mydiv {background-image: url('link/to/imagefile'); background-size:cover; display:block;}
In the style.css (on screen):
#mydiv {display:none}
Hopefully this helps you.
Related
I have html page that loads different css, depending on screen width (targeting pc, tablets and phones):
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="css/desktop-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 769px) and (max-width: 1199px)" href="css/tablet-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 100px) and (max-width: 768px)" href="css/phone-style.css" >
I heavily depend on jQuery, and functions should be chosen depending on active css. Is there a way in JavaScript of jQuery to determinate which css is active?
Or should I use jQuery to determinate browser width, and make further functions depending on width output?
Thank you.
You can check if this thread helps.
You can also think of using media queries inside a css file and load the same file for different screen variants.
I recommend you to use media query but if you want a JavaScript solution, can do this with jQuery like this:
var window = $(window).width();
var css = $('#css');
if(window > 100 && window < 768){
css.attr('href','css/desktop-style.css')
} else if(window > 769 && window < 1199){
css.attr('href','css/tablet-style.css')
} else if(window > 1200){
css.attr('href','css/phone-style.css')
}
<link id="css" rel="stylesheet" type="text/css" href="css/style.css" >
Note: You can change resolutions as you want, I'm not sure it's correct for detect mobile tablet or etc.
Warning: Be aware! this method a little bad for SEO things, google and etc not read your responsive styles.
It is probably wiser to check the widh of the device. But I think you could figure out which css is used, by this little 'hack'. In each css you give a nonsense property to a hidden element.
In the example I gave #canary the animation name first-css.
In a different css file you could write
#canary {animation-name: second-css; display: none}
You could give a unique property to a certain element in each css file. JQuery could check that property.
$(function() {
whichcss=$("#canary").css("animation-name");
$("#output").text(whichcss);
})
#canary {animation-name: first-css; display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="canary"></p>
<p id="output"></p>
To be extra clear. In your css files you should include th name of the css file in this way:
in desktop-style.css:
#canary {animation-name: desktop-css; display: none}
in tablet-style.css:
#canary {animation-name: tablet-css; display: none}
in phone-style.css:
#canary {animation-name: phone-css; display: none}
i am trying to implement a style switcher according to https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to .
but as soon as i add a title="" to the css link, the css file won't get loaded on the page an the styles fall back to default bootstrap.
my external css files are added at the bottom of the body. the order is:
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/my-styles.css">
<link rel="stylesheet" href="css/my-alternate-styles.css">
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">
is there something i miss?
You probably did everything right (except one thing, see below*), the code that's in the article is using curly quotes ‘’ “” when it should be using straight quotes '' "".
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>
So if you copied and pasted this part, it won't be parse correctly. This is the correct way with straight quotes:
Change style to default
Change style to alternate
Review this PLUNKER instead of the Snippet. The Snippet won't work because of the multiple stylesheets involved.
SNIPPET (Not Functional, review PLUNKER instead.)
<!doctype html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='default.css' title='default' rel='stylesheet'>
<link href='alt.css' title='alt' rel='alternate stylesheet'>
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<section>
<p>TEST</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='styleSwitcher.js'></script>
</body>
</html>
* I noticed you said:
...my external css files are added at the bottom of the body...
You should always place <link>s inside the <head>. Most often, JavaScript/jQuery needs the actual DOM to be loaded before it can do anything. So it's important in most situations to make sure your styling (<link> and <style>) go first and inside the <head>.
For <script>, it's best to place them at the bottom of <body> just before the closing tag </body>. See the Snippet and PLUNKER for example of <link>, <style>, and <script> layout.
I added the fancybox 2 plugin to my site and it works fine when I test it in Chrome and Safari, but in Firefox it doesn't. The page loads fine, but when you click on a thumbnail to open fancy box, the margin styles in my body tag are cancelled (I determined this using firebug) and my whole layout shifts entirely to the right side of the viewport. When you click out of fancy box the layout remains pushed to the right. Has anyone had a similar problem and would you have any tips on how to fix it? I've posted my DOCTYPE and head bellow along with my css rules for the body. If more info is needed let me know. The site is not yet up so I can't link to it. I'm new to this so sorry if I've missed anything obvious. Thanks so much to anyone who thinks they can help!!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Commercial</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="styles/commercial_new.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.pack.js"></script>
<link href="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.css" rel="stylesheet" type="text/css">
</head>
body {
width: 1050px;
background: #c7c7c7;
margin: 0 auto;
overflow: scroll;
}
I actually had this same problem this morning. The solution I went with (there's probably a better option) is to create a div wrapping the body content and set the width on that, then set the body width to 100%;
<body>
<div id="container">
// Page content
</div>
</body>
CSS:
body { width: 100%; }
#container { width: 1050px; margin: 0 auto; }
Seemed to fix issues with Firefox, and we tested it back to IE7 without any issues.
I have a page where there is a lot of text, probably 15 pages, I wan't to be able to add a header at the begining of every page when the user prints the document.
Is this possible with CSS or JavaScript/jQuery????
You can use classic CSS by targeting media using media attribute.
Example:
<link rel="stylesheet" type="text/css" media="all" href="all.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Add your <header></header> in your page, position it with CSS, if you don't want it to be included in a browser do:
header {
display: none;
}
in your all.css
And in your print.css:
header {
display: block;
}
Print layouts change depending on the browser, default fonts installed, and any other custom settings used. How would you know where the page divisions are?
Your best bet may be to produce a PDF of your documentation.
Is there a way to specify text to appear on the bottom and header of every page when printed?
or
Is there a CSS solution which would allow a header and footer to repeat on each printed page?
thank you
Although your question is a bit too general, I'm assuming you want that specific text to appear only on your print page and not in your website. Just do a
<p class="print-this">TEXT TO BE SHOWN IN PRINT</p>
then in your print.css
.print-this {
display: block;
}
and in your main.css
.print-this {
display: none;
}
Oh and you need to include your stylesheet with the media option as Giu said:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
Using position:fixed, should render on every page when used in a print context
http://css-discuss.incutio.com/wiki/Printing_Headers