Develop Reference

determinate which css is loaded with jQuery

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}

CSS printing fix of `background-size: cover;`

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.

respond.js set up tutorial

I cannot find info anywhere on exactly how to setup respond.js.
I unzipped into htdocs - is this correct? Or do I just need respond.min.js in htdocs?
Then simply reference the file like this...
<script src="respond.min.js"></script>
Currently, I have this in my head section, have tried before and after my media queries, yet NO stylesheet is used.
Is there a tutorial anyhwere on exactly how to set up resonse.js, as I have no idea if I am doing something wrong or whether there is another problem.
Any help would be much appreciated, my site is FINALLY finished yet I don;t want it to go live without media queries and currently if I use media queries, no stylseheet is loaded at all in IE8.
Thanks
This is my current code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:600px) and (max-device-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:1025px)" href="http://localhost/home.css">
<title>Eastbourne Netball League[Home] </title>
</head>

Alright, since the file is loaded, the problem has to come from one of these 2 points:
From the documentation:
Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop
#media screen and (min-width: 480px){
...styles for 480px and up go here
}
Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media'd content)
My guess is the second point :)
I hope it helps.
[edit]
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-width:600px) and (max-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width:1025px)" href="http://localhost/home.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<title>Eastbourne Netball League[Home] </title>
</head>
If this doesn't work, put it this way inside your CSS file:
#media {min-width:600px) and (max-width:1024px) {
/* your css here */
}
#media {min-width:1025px) {
/* your css here */
}
Therefore, you can even put all your CSS in the same file

CSS media query not working

When checking my site on a mobile device (iPhone) it is clear that it is still loading the non mobile stylesheet. Here is the code in the header, can someone tell me whats wrong?
<link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles_mobile.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/onclick.js" type="text/javascript"></script>
<script>
if (screen && screen.width > 480)
document.write('<script type="text/javascript" src="js/jqFancyTransitions.js"><\/script>');
</script>
Any reason why this is not using the "styles_mobile.css" as is intended?
In any response please be aware that I have limited knowledge of javascript

I think it needs a meta viewport tag:
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
This means use the device width, not the width that the browser in the device reports, which is bigger.
Technically, to do media queries by the book you need to add a "media" attribute to the element, or add #media entries to your CSS.

How do I print a header on every page using CSS or JavaScript/jQuery

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.