Menu
We're developing an open-source web app for arts teachers across the world to work together. We need a nice website that simply adjusts itself based on the active width of the browser, like google.org or barackobama.com does so well.
We can detect the browser, the OS, etc. but don't want to use any of that info. We just want four or five different stylesheets that are triggered when the browser width is adjusted.
So, for example, when you visit the app on a browser using a DESKTOP computer, you see the full app when the browser is full screen. Then, as the browser reduces its width the site immediately and dynamically changes its format to allow for universal compatibility.
We don't want our CSS to change based on browser type or original width, but instead want it to adjust ever millisecond based on the current width of the viewport -- regardless of whether or not it is a "mobile" device or a "tablet" machine or a "desktop" browser.
Curiously, I'm using Google Apps Script to host our web app, so it looks like any meta viewport tags are removed.
How can we introduce four or five different stylesheets based on the width of the current viewing browser window?
288
color = "red"; you can apply the style change dynamically. Below is a function that turns an element's colour to red when you pass it the element's id . You could also use setAttribute(key, value) to set a style on an element. For example, you could set the colour of an element to red by calling element.
If you want to change the CSS styles dynamically you'll have to attach this portion of code to some event. For example, if you want to change the styles of your element when clicking on a button, then you have to first listen to the click event and attach a function containing the previous code.
The better way is to add css classes which you want to add and then use addClass to add css dynamically.
Approach: We can dynamically change the color of any element by percentage using the filter property in CSS. The brightness() function of the filter property is used to dynamically change color by percentage.
You can either use CSS media queries, like so:
<link rel="stylesheet" media="screen and (min-device-width: 700px)" href="css/narrow.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel="stylesheet" media="screen and (max-device-width: 901px)" href="css/wide.css" />
Or jQuery, like so:
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
Both found from: http://css-tricks.com/resolution-specific-stylesheets/
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
