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/
Related
I'm working on a webpage and I require some help with the JavaScript.
The site should be able to load a full-screen image that changes depending on the time and date.
To be exact there are weekday shows and weekend shows and this page is required to project the show's poster depending on what time and day it is.
My current code looks like this;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>IMAGE LOOP!</title>
</head>
<body>
<script type="text/javascript" src="app.js" ></script>
<img id='Kiss100' src="images/4.png">
</body>
</html>
CSS
body {
background-image:linear-gradient(white, dimgray);
}
img {
border-radius: 4px;
padding: 5px;
width: 2560px;
height: 720px;
object-fit: fill;
}
Javascript
setInterval(function() {
var date = new Date();
var img = document.getElementById('Kiss100');
if (date.getHours() < 12) {
if( img.src.indexOf('Kiss') < 0 ) {
img.src = 'images/3.jpeg'
}
} else {
if( img.src.indexOf('Kiss100') < 0 ) {
img.src = 'images/1.jpeg'
}
}
},60000);
As you can see I tried setting a specific resolution in CSS but I want it to change depending on the platform. Also, in the JavaScript I wanted it to be more specific but I got stuck.
Thanks in advance.
Instead of img.src.indexOf('Kiss') < 0, try - if (!img).
Use the Conditional (ternary) operator to get rid of if-else.
Finally, if you want a full-screen image, give it full width and auto height.
Below is a working snippet. You should see that according to the condition the image will be updated after 5 seconds.
(I tried random images, you can use your own.)
setInterval(function () {
var imgEl = document.getElementById('Kiss100');
if (!imgEl) return;
var date = new Date();
imgEl.src = date.getHours() < 12
? 'https://source.unsplash.com/user/c_v_r/100×100'
: 'https://www.kasandbox.org/programming-images/avatars/cs-hopper-happy.png'
}, 5000);
body {
background-image:linear-gradient(white, dimgray);
}
img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>IMAGE LOOP!</title>
</head>
<body>
<script type="text/javascript" src="app.js" ></script>
<img id='Kiss100' src="https://www.gstatic.com/webp/gallery3/1.sm.png">
</body>
</html>
Hi guys i have a question becauseenter image description here when i run my application spring cant see my style in html and my page look like shit :
My code :
<link href="../static/style/styleDistance.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="../static/css/fontello.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
var NavY = $('.nav').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
But when i open in browser my page look like :
enter image description here
I dont know why spring cant see my style can someone explain ?
my resource look that : enter image description here
You probably have some issue with the relative path for your CSS files ../. Press ctrl + u in your page and click on the missing CSS, it will try to load your file, then check the browser url to see if you can figure it out what's going on.
<link href="style/styleAdd.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
i change like there and now it works
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
*/
}
I am developing a website for someone, and the CSS styles I use require JavaScript (for the buttons that are used for a dropdown navigation bar on small screens). How can I use one stylesheet if the user has JavaScript enabled or use another one if JavaScript is disabled.
Two ways to do it:
Append the JavaScript-only stylesheets with JavaScript:
function appendStyle(url) {
var sheet = document.createElement("link");
sheet.setAttribute("href", url);
sheet.setAttribute("rel", "stylesheet");
sheet.setAttribute("type", "text/css");
document.head.appendChild(sheet);
}
If you don't mind loading the CSS for the JS and you just want to override your site's default appearance you can use a noscript tag instead:
<noscript>
<link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
</noscript>
You can use like this...
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="general css file" />
<noscript>
<link rel="stylesheet" href="CSS file for JS dissable" />
</noscript>
This works for me
modernizr, the defacto standard for feature detection uses a "no-js" class on the body element, then when the page loads it uses javascript to remove this class. then you dont need seperate sheets you just need to precede your javascriptless styles with ".no-js".
.no-js .some-div {
background-color: #fff;
}
.some-div {
background-color: #000;
}
What is the purpose of the HTML "no-js" class?
You can use alternate stylesheets, with the sheet for disabled JS set as the preferred one:
<link id="sheet-nojs" rel="stylesheet" href="..." title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="..." title="JS enabled" />
And then use JS to set the sheet for enabled JS as the preferred one:
document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;
<link id="sheet-nojs" rel="stylesheet" href="data:text/css,
body { background: red; }
body:before { content: 'JS disabled'; }
" title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="data:text/css,
body { background: lime; }
body:after { content: 'JS enabled';}
" title="JS enabled" />
<script>
document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;
</script>
<script type="text/javascript">
// create the link element
var jsStyles = document.createElement('link');
// reference the stysheet
jsStyles.setAttribute('href', 'path/to/stylesheet.css');
// add it to the head element
document.head.appendChild(jsStyles);
</script>
<!-- use a "noscript" tag for browsers that have javascript disabled -->
<noscript>
<link href="path/to/no-js-styelsheet.css" />
</noscript>
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' />