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}
Related
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
I was searching arround here and I found that I can use one of the following:
Adapt.js or Media Queries
I was wondering what is better to use? I Basically need to resize some specified divs with different width for different screens. (800x600 and 640x480)
If none of mentioned is good, any other solution ? Thank you :)
<link rel="stylesheet" media="all" href="css/common.css">
<!--Responsive style sheets -->
<link rel="stylesheet" media="all and (min-width: 600px) and (max-width: 800px)" href="css/name1.css">
<link rel="stylesheet" media="all and (min-width: 480px) and (max-width: 640px)" href="css/name2.css">
you might be able to use something like this in CSS
#media only screen and (min-device-width: 768px) {
... put your css here
}
The above is probably for mobile devices only
If you are planning to support multiple screens I would recommend using 960 Grid http://960.gs/.
Media Queries are the best solution for you
have a detailed info about these here
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.
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