Would it be possible for me to do something like
<link href="nav.css" type="text/css" rel="stylesheet" />
in this?
<script>
if (screen.width <= 800) {
Link to css here!
}
</script>
Just use a css media query like so
You can read about media queries here
#media(max-width: 800px) {
/*
* enter css here
*/
}
Related
I'm trying this but it is not working:
<html>
<head>
<script src="js/menu-collapser.js" type="text/javascript" media="media screen and (max-width: 599px)"></script>
</head>
...
</html>
//menu-collapser.js :
jQuery(document).ready(function($){
$('.main-navigation li ul').hide();
$('.main-navigation li').has('ul').click(function() {
$(this).children().toggle();
});
});
Do you have an idea on how to do this in the right way? The script work if used directly in the header with the tags.
You can't do that directly using Javascript <script> tags. Media queries are used in linked CSS files or inline CSS styles. A basic example:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="desktop.css"/>
<link rel="stylesheet" media="screen and (min-width: 571px)" href="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 570px)" href="mobile.css"/>
Or directly in your stylesheets:
#media screen and (max-width: 599px) {
#mobile {
display: block;
}
}
However, you can use an external asset loader/media query library to do this (require.js, modernizr.js, enquire.js and others), In this case, I'm setting an example using enquire.js, as I think it's very effective and doesn't require jQuery by default:
Full example
1) Include enquire.js (available here):
<script type="text/javascript" src="/js/enquire.js"></script>
2) Create a load function - to load JS files:
<script type="text/javascript">
// This loads JS files in the head element
function loadJS(url)
{
// adding the script tag to the head
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// fire the loading
head.appendChild(script);
}
</script>
3) Fire enquire.js and listen for media query changes (both on-load and on-resize):
<script type="text/javascript">
enquire.register("screen and (max-width: 599px)", {
match : function() {
// Load a mobile JS file
loadJS('mobile.js');
}
}).listen();
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
// Load a tablet JS file
loadJS('tablet.js');
//console.log('tablet loaded');
}
}).listen();
enquire.register("screen and (min-width: 900px)", {
match : function() {
// Load a desktop JS file
loadJS('desktop.js');
//console.log('desktop loaded');
}
}).listen();
</script>
Putting it all together
Using a simple HTML page with enquire.js loaded from an external file:
<html>
<head>
<script type="text/javascript" src="/enquire.js"></script>
<script type="text/javascript">
// This loads JS files in the head element
function loadJS(url)
{
// adding the script tag to the head
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// fire the loading
head.appendChild(script);
}
</script>
<style>
body {
font-family: arial;
}
h1 {
font-size: 50pt;
}
#mobile {
display: none;
}
#tablet {
display: none;
}
#desktop {
display: none;
}
#media screen and (max-width: 599px) {
#mobile {
display: block;
}
}
#media screen and (min-width: 600px) and (max-width: 899px) {
#tablet {
display: block;
}
}
#media screen and (min-width: 900px) {
#desktop {
display: block;
}
}
</style>
</head>
<body>
<div id="desktop">
<h1>Desktop</h1>
</div>
<div id="tablet">
<h1>Tablet</h1>
</div>
<div id="mobile">
<h1>Mobile</h1>
</div>
<script type="text/javascript">
enquire.register("screen and (max-width: 599px)", {
match : function() {
// Load a JS file
loadJS('mobile.js');
}
}).listen();
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
loadJS('tablet.js');
//console.log('tablet loaded');
}
}).listen();
enquire.register("screen and (min-width: 900px)", {
match : function() {
loadJS('desktop.js');
//console.log('desktop loaded');
}
}).listen();
</script>
</body>
</html>
In addition to loading JS files, you could create a CSS loader too, which would work in the same way (conditionally), but that defeats the object of using #media in CSS. It's worth reading the usage explanations for enquire.js, as it can do a lot more than I've illustrated here.
Caveat: Nothing above uses jQuery, but you could take advantage of some of the functions it offers; loading scripts for example - or executing other functions that you need to.
Why not just load in a script conditionally?
(function() {
if( window.innerWidth > 600 ) {
var theScript = document.createElement('script');
theScript.type = 'text/javascript';
theScript.src = 'js/menu-collapser.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(theScript, s);
}
})();
Or better yet, only execute the code if the window.innerWidth > 600 ? Anyway, there are a lot of solutions you can use.
media is not a valid attribute for <script>, check it here.
So you should detect media types by manually than load the script dynamically.
There is a plug-in for css media detection in javascript, you can use it.
<script type="text/javascript" src="js/mediatypechecker.js"></script>
$(function() {
if(IsMediaType('screen') > 0 && parseInt(screen.width) < 599) {
$.getSscript("js/menu-collapser.js");
}
});
If you want it to react to later resizing events (e.g. on desktop) as well, you can do it like this:
<script>
moby = window.matchMedia("(max-width: 500px)");
moby.addListener(
moby=>{
if(moby.matches){
document.head.innerHTML+="<script src='wonderfulScreenAffectedScript.js'></script>";
}
}
);
</script>
I want to have 2 different css files, one for a window.devicePixelRatio <= 1 and one >1 for high dpi devices.
How can I use JavaScript to choose the css?
What I've done so far (not working):
<head>
<script>
if (window.devicePixelRatio <= 1) {
<!--alert('window.devicePixelRatio = ' + window.devicePixelRatio);-->
<link href="style.css" rel="stylesheet" type="text/css" />;
} else {
<link href="stylemobi.css" rel="stylesheet" type="text/css" />;
}
</script>
</head>
Use one link tag and give it an ID and right after it put a script to set it's href
<link id="main-style" rel=...>
<script>
var stylesheet = window.devicePixelRatio <= 1 :'styles.css' : 'stylemobi.css';
document.getElementById('main-style').setAttribute('href',stylesheet );
</script>
Waiting any later to do it will mean some strange styling while the body loads
I'm not quite certain but how about,
<head>
<link id="theCSS" href="" rel="stylesheet" type="text/css" />
<script>
if (window.devicePixelRatio <= 1) {
document.getElementById('theCSS').href= "style.css";
} else {
document.getElementById('theCSS').href= "stylemobi.css";
}
</script>
</head>
Update:- Adding description--> Provided an id to the css <link> element and grabbing it in js using, document.getElementById() and assigning it'd href to whatever the css you want as per your condition
Don't use JS at all, just add some media attributes to the <link> elements to check the resolution:
<link href="style.css" rel="stylesheet" media="resolution <= 1dppx" />
<link href="stylemobi.css" rel="stylesheet" media="resolution > 1dppx" />
Otherwise, if you want to use JavaScript, you'll have to write valid JavaScript. You can't just mix and match JS and HTML.
Thanks for the answers!
I used this method now, different css styles in a single css file, automatically choosen depending on the display ppi.
body {
margin: 0;
padding: 0;
/*background-color:#008B09;*/
background-image:url("purty_wood.jpg");
background-color:#008B09;
font-family: 'ABeeZee', sans-serif;
color:#000000;
overflow:auto;
font-size:1.2em;
}
#media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
body {
font-size:2em;
}
}
In this case the Browser overrides automatically the standard css, if the resolution is over 192ppi or the dp-ratio is over 2. So within a single css file, i can have different settings for different displays!
(i just need to set the resolution to min 235, because some mac displays have up to 230 ppi, most smartphones have at least 250ppi.)
More Info: https://css-tricks.com/snippets/css/retina-display-media-query/
i try to do this to hide my button on hardcopy but still display at my hardcopy
<script type="text/javascript">
var button = document.getElementById('print') button.addEventListener('click',hideshow,false);
function printFrom_hidden()
{
document.getElementById('print').style.display="block";
//document.getElementById('').style.display = ;
this.style="display:none";
}
</script>
<input type="button" value="Print" name="print" id="print" onClick="printFrom();printFrom_hidden();">
May I suggest using media types for CSS stylesheets for this purpose? See http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
Writing a stylesheet for the printer is far superior to hacking out changes to the screen's styles to make it printer-suitable. For your purposes, it should be as simple as something like adding this to your stylesheet
#media print {
input#print { display: none }
}
To my understanding this is the way it's meant to be done. Sadly, Web developers and designers all to often forget that not everything is a screen!
You are calling printForm(); first and then printFrom_hidden(). So your print button is hidden after your print is done. So inverse them.
<input type="button" value="Print" name="print" id="print" onClick="printFrom_hidden();printFrom();">
yourpage.php or yourpage.html or yourpage.aspx or whatever
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'common.css'; #import `yourpage.css';
</style>
</head>
<body class='njs'>
<input type='button' value='Print' name='print' id='print' />
<script type='text/javascript src='common.js'></script>
<script type='text/javascript src='yourpage.js'></script>
</body>
</html>
common.js
//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version)bod.className = className;
}
function E(e){
return doc.getElementById(e);
}
//]]>
yourpage.js
//<![CDATA[
E('print').onclick = function(){
print();
}
//]]>
Of course, use CSS like Dan Farrell suggested.
yourpage.css
#print{
/* print button CSS when not in print mode */
}
#media print{
/* CSS for this page goes in here */
body{
/* body CSS here */
}
#print{
/* print button CSS here */
}
}
I've got the following problem - I'm using a simple JS code to replace CSS file on the fly, depending on the browser window size. It looks like this:
<script type="text/javascript">
//<![CDATA[
<!--
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "narrow.css");
} else if ((width >= 701) && (width < 1120)) {
$("#size-stylesheet").attr("href", "medium.css");
} else {
$("#size-stylesheet").attr("href", "wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
-->
//]]>
</script>
However, in addition to that - I'm also using LESS.CSS (http://lesscss.org/). Well, those two don't work together well - with LESS, as I understand, CSS is embedded into HTML document itself, so the CSS file isn't replaced. Is there any way to make it work? Or maybe
a better way ?
Can't you just use media queries?
<link rel='stylesheet' media='screen and (max-width: 701px)' href='narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 1120px)' href='medium.css' />
<link rel='stylesheet' media='screen and (min-width: 1120px)' href='wide.css' />
found out about this jquery plugin that adds support to media queries
So you can use:
<link rel="stylesheet" type="text/css" href="wider.css" media="only screen and (min-width: 1200px)" />
<link rel="stylesheet" type="text/css" href="handheld-iphone.css" media="only screen and (max-width: 480px), handheld" />
and so on, but it does not support this kind of media queries (in stylesheet)
#media screen and (max-width: 1024px) {
body{background:red}
}
#media screen and (max-width: 740px) {
body{background:yellow}
}
Is there any that does?
You could do something like this as well
http://jsfiddle.net/47DSD/
$(document).ready(function() {
function wResize() {
var winW = $(window).width();
var Body = $('body');
if ( winW < '1024') {
Body.css({ 'background-color':'red' });
}
if ( winW < '740' ) {
Body.css({ 'background-color':'yellow' });
}
}
wResize();
$(window).resize(function() {
wResize();
});
});
Edit:
You didnt seem to warm up to this, so how about a little more extensive example?
http://jsfiddle.net/47DSD/1/
You should look at enquire.js.
Wouter van der Graaf made a javascript plugin for media query support in browsers that don't natively support it:
http://code.google.com/p/css3-mediaqueries-js/