Forum Moderators: not2easy
This works fine insofar that the new stylesheet loads when screen width is less than what I specify. However, it seems that the new sheet totally replaces the original "standard.css" that I include in the html head part.
I would like to only change the few relevant items using the script, and not include everything else that is fine and already loaded.
The html head starts out:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link href="standard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="styleSheetsbyResolution3.js"></script>
</head>
The simple JavaScript in file styleSheetsbyResolution3.js:
if (screen.width < 1280)
link = document.getElementsByTagName("link")[0];
link.href = "lowresolution.css";
What can I do to only change a few lines of css rather than include the lot again in the lowresolution.css stylesheet?
Please advice!
/Jaxz
You can add rules to the existing stylesheet and use the CSS cascade to, in effect, overwrite the previous rules.
You could also just create and add another style sheet and, as long as it's source order comes after the previous sheet, it too, will overwrite the rules in the previous sheet.
The javascript for this is slightly differently in the different browsers.
Is this enough or do you need more?
Your problem is that you're changing the href of the current link element there to the new css file, which is a replacement, not an addition.
However, you could always do something like this:
1. In your one stylesheet, have your regular rules in place for layout
2. Have overriding rules in place for the lower resolution
3. Activate the rules if the screen width becomes too thin
This would be something like:
body { width: 1000px; }
body.lowres { width: 800px; }Then you would edit your script to be more like:
if (screen.width < 1280)
document.getElementsByTagName("body")[0].className = "lowres";P.S.: I'm not that good at JS so there might be a better way to do this :) I still stick to "go ask the JS forum experts"...
[edited by: Setek at 4:20 am (utc) on Aug. 4, 2008]
