can i use JS to load different stylesheetes?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
liljester
Forum Contributor
Posts: 400
Joined: Tue May 20, 2003 4:49 pm

can i use JS to load different stylesheetes?

Post 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?
jollyjumper
Forum Contributor
Posts: 107
Joined: Sat Jan 25, 2003 11:03 am

Post 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>');
&#125; else &#123;
  document.write('<link ....rest of another stylesheet bla bla>');
&#125;
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)
&#123;
document.getElementById('cssFile').href=cssDoc;
&#125;
/*
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.
User avatar
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?

Post 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
User avatar
liljester
Forum Contributor
Posts: 400
Joined: Tue May 20, 2003 4:49 pm

Post 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()
&#123;
	if(document.body.offsetWidth <= 640)
	&#123;
		document.styleSheets&#1111;0].disabled=true;
		document.styleSheets&#1111;1].disabled=true;
		document.styleSheets&#1111;2].disabled=false;
	&#125;
	if(document.body.offsetWidth > 640 && document.body.offsetWidth <= 800)
	&#123;
		document.styleSheets&#1111;0].disabled=true;
		document.styleSheets&#1111;1].disabled=false;
		document.styleSheets&#1111;2].disabled=true;
	&#125;
	if(document.body.offsetWidth > 800)
	&#123;
		document.styleSheets&#1111;0].disabled=false;
		document.styleSheets&#1111;1].disabled=true;
		document.styleSheets&#1111;2].disabled=true;
	&#125;

&#125;

</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>
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post 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...
User avatar
liljester
Forum Contributor
Posts: 400
Joined: Tue May 20, 2003 4:49 pm

Post 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)
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

I just wanted to mention it ;-)
gavinbsocom
Forum Commoner
Posts: 71
Joined: Tue Sep 30, 2003 9:51 pm

Post 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.
Post Reply