can i use JS to load different stylesheetes?
Moderator: General Moderators
can i use JS to load different stylesheetes?
i want to build a site for different screen resolutions, everything needs to be fixed width, so i was thinging of using stylesheets?
suggestions?
suggestions?
-
jollyjumper
- Forum Contributor
- Posts: 107
- Joined: Sat Jan 25, 2003 11:03 am
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:
And this is the script I mentioned at first:
Hope this helps you.
Greetz Jolly.
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>');
}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>Greetz Jolly.
- twigletmac
- Her Royal Site Adminness
- Posts: 5371
- Joined: Tue Apr 23, 2002 2:21 am
- Location: Essex, UK
Re: can i use JS to load different stylesheetes?
Then put it on paper. Just because you know a users resolution doesn't mean you know how big their browser window is...liljester wrote:everything needs to be fixed width
Mac
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 =)
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>-
gavinbsocom
- Forum Commoner
- Posts: 71
- Joined: Tue Sep 30, 2003 9:51 pm
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.
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.