Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Javascript CSS switcher replaces instead of updates stylesheet .

Screen res CSS switch to only change part of stylesheet

4:46 pm on Aug 2, 2008 (gmt 0)

New User

10+ Year Member

joined:Mar 8, 2006
votes: 0

Dear all,
I have tried to use a simple JavaScript css-switcher that loads a new css stylesheet "lowresolution.css" depending on screen resolution. The new stylesheet only changes NAV width and the base font size.

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"
<link href="standard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="styleSheetsbyResolution3.js"></script>

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!


5:14 pm on Aug 2, 2008 (gmt 0)

Full Member

10+ Year Member

joined:Sept 5, 2007
votes: 0

Here's what you can do, in broad outline:

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?

4:19 am on Aug 4, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0

This isn't really CSS related, this is Javascript related, you might do better over at the JS forum.

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]


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members