Page 1 of 1
can i use JS to load different stylesheetes?
Posted: Wed Oct 15, 2003 11:50 am
by liljester
i want to build a site for different screen resolutions, everything needs to be fixed width, so i was thinging of using stylesheets?
suggestions?
Posted: Wed Oct 15, 2003 12:33 pm
by jollyjumper
Hi there,
A while ago I found this little script, which let's you change your stylesheet at runtime.
Another option would be to check the screenresolution and use this:
Code: Select all
if (your condition) {
document.write('<link ....rest of stylesheet bla bla>');
} else {
document.write('<link ....rest of another stylesheet bla bla>');
}
And this is the script I mentioned at first:
Code: Select all
<html>
<head>
<title>CSS StyleSheet Changer</title>
<link id="cssFile" rel="stylesheet" type="text/css" href="cssBlue.css" />
<script type="text/javascript">
function changeCSS(cssDoc)
{
document.getElementById('cssFile').href=cssDoc;
}
/*
Instructions are as follows:
1)Go up to the <link> tag, and change its href to your .css file that you want your page to have onLoad.
2)After the changeCSS(' and before the ') type in the path to your .css file that you wan the page to load when clicking on the specific square.
3)Customize and setup, and you have yourself a quick little StyleSheet Changer
*/
</script>
</head>
<body>
<div class="context"><emp><strong><b>Select your style:</b></emp></strong><p>
<p>
<acronym style="cursor: default;" title="Blue-Base"><div class="cssBlue" onCLick="changeCSS('cssBlue.css');"></div></acronym><br><acronym style="cursor: default;" title="Red-Base"><div class="cssRed" onCLick="changeCSS('cssRed.css');"></div></acronym><br><acronym style="cursor: default;" title="Black and White"><div class="cssBaW" onCLick="changeCSS('cssBaW.css');"></div></acronym><br>
<p>
</div>
</body>
</html>
Hope this helps you.
Greetz Jolly.
Re: can i use JS to load different stylesheetes?
Posted: Thu Oct 16, 2003 3:43 am
by twigletmac
liljester wrote:everything needs to be fixed width
Then put it on paper. Just because you know a users resolution doesn't mean you know how big their browser window is...
Mac
Posted: Thu Oct 16, 2003 9:10 am
by liljester
i figured out a way to do it so when the browser is resized it will change the stylesheets accordingly
heres the code if anyone cares =)
Code: Select all
<html>
<head>
<script language="javascript">
function cssPick()
{
if(document.body.offsetWidth <= 640)
{
document.styleSheetsї0].disabled=true;
document.styleSheetsї1].disabled=true;
document.styleSheetsї2].disabled=false;
}
if(document.body.offsetWidth > 640 && document.body.offsetWidth <= 800)
{
document.styleSheetsї0].disabled=true;
document.styleSheetsї1].disabled=false;
document.styleSheetsї2].disabled=true;
}
if(document.body.offsetWidth > 800)
{
document.styleSheetsї0].disabled=false;
document.styleSheetsї1].disabled=true;
document.styleSheetsї2].disabled=true;
}
}
</script>
<link href="css_big.css" rel="stylesheet" type="text/css">
<link href="css_middle.css" rel="stylesheet" type="text/css">
<link href="css_small.css" rel="stylesheet" type="text/css">
</head>
<body onload="cssPick();" onresize="cssPick();">
<font class="quidgy">Hello!</font>
</body>
</html>
Posted: Thu Oct 16, 2003 9:27 am
by volka
unsing mozilla I can chose from the alternative stylesheets via View->Use style in the menu.
Doesn't solve you problem but I thought it should be mentioned, since alternative stylesheets have been a recommendation for quite a while but still some browser do not care about it at all...
Posted: Thu Oct 16, 2003 9:58 am
by liljester
that wouldnt help at all... i want it to be automatic =P (no user intervention, because well... alot of them are doing good to get the browser open in the first place)
Posted: Thu Oct 16, 2003 11:02 am
by volka
I just wanted to mention it

Posted: Mon Oct 20, 2003 7:18 pm
by gavinbsocom
heres a newbie question for you....
if(document.body.offsetWidth <= 640)
i dont understand how .offsetwidth ? is used? is that a set function in javascript? also how is each stylesheet chosed if there names arnt in it? is it done with the array [0] [1] [2] ? and if so, dont you have to define the array? Im lost and confused.