PDA

Click to See Complete Forum and Search --> : load different css on different variable

houtwurm
05-20-2004, 09:49 AM
load different css on different variable?
Hello,

is there a way to load an different stylesheet on different JavaScript variable?
With XML you should de something like:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
lcode = blabla
xmlDoc.load(lcode+"whatever.xml")
</SCRIPT>

Can you do something like that to load a different css when the lcode variable changes too?

The pages that will be in IFrames will check this lcode variable too to load there css, and that are a lot of pages, and the number of css files will be growing, so I don't want to set the different options before...

Thanx...
theBody44
05-20-2004, 11:26 AM
You can't load a different CSS file (at least I can't - maybe someone can:confused: )but you can change an element's CSS class. document.getElementById('myDiv').className = "newClass";This will allow you to change it's properties, just keep all classes in the same CSS file. Hope this helps.
Fang
05-20-2004, 11:48 AM
Yes you can (http://www.alistapart.com/articles/n4switch/)
houtwurm
05-20-2004, 12:09 PM
I'm not an script wonder, but I tried to do the following after looking at the site:

<script language="javascript" type="text/javascript">
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
</script>

<body onLoad="setActiveStyleSheet('default');
return false;">

I made a css called default.css, but nothing happens...
Fang
05-21-2004, 01:56 PM
A working example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Style Sheet Switcher</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link title="em1" rel="stylesheet" href="em1.css" type="text/css" />
<link title="em2" rel="alternate stylesheet" href="em2.css" type="text/css" />
<link title="em3" rel="alternate stylesheet" href="em3.css" type="text/css" />

<script type="text/javascript">
//<![CDATA[
<!--
// Alternative Style: Working With Alternate Style Sheets
// http://www.alistapart.com/articles/alternate/
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
//-->
//]]>
</script>

</head>
<body>
<div>
<button type="button" onclick="setActiveStyleSheet('em1');">em1</button>
<button type="button" onclick="setActiveStyleSheet('em2');">em2</button>
<button type="button" onclick="setActiveStyleSheet('em3');">em3</button>
</div>
<h1>StyleSheet switcher</h1>
</body>
</html>

3 style sheets (em1.css, em2.css and em3.css):

/* em1.css */
body {
height:100%;
background:yellow;
}
h1 {font-size:1em;}

/* em2.css */
body {
height:100%;
background:blue;
}
h1 {font-size:2em;}

/* em3.css */
body {
height:100%;
background:green;
}
h1 {font-size:3em;}

Important:
1. Define the links before the JavaScript.
2. Use the link title to switch style sheets.
3. In rel alternate stylesheet must be lower case.
4. The style sheet with rel="stylesheet" is the default style sheet.

See A list apart (http://www.alistapart.com/articles/alternate/) for further explanation.
k13oharts
10-28-2004, 10:16 PM
Ok. I love doing research yet I'm still quite a beginner when it comes to understanding Javascripts....
I have seen some sites loading different stylesheets using server-side tricks and yes using cookies.
I develop my homepage for Internet Explorer to learn certain stuff.
Here's the question, and it may have been asked yet I can't find the right answer which satisfies me:

How do you really make it work for just one page on IE and also by not using cookies?

Thanks,
Ken