...
PDA

CSS changer based on user's preferences

Cazu1029
12-30-2002, 08:40 PM
I'm relatively new to web designing, but I saw a site a while back that had something I would like.
They had something that displayed a dropdown box to different CSS schemes, changing which CSS sheet the page used and keeping it that way. Say I wanted to use a different style sheet than the "blue, Times New Roman" one I was, the user could specify it be selecting a pre-made style sheet from a dropdown box and go for "scheme 5, a green, Metro font" one. And in doing this not having to create an entire different web using just a different style sheet.

Is this possible?
chrismiceli
12-30-2002, 09:01 PM
you have to use javascript, and change it dynamically with different .css files. so yes it is possible
Cazu1029
12-31-2002, 12:53 AM
Is there any premade javascript that can do this? I only know limited HTML, and I'm trying to learn something else right now.
Lambo
12-31-2002, 04:14 AM
Took most of this from:http://www.codelifter.com/main/javascript/changestyles.html (hence the credit) and changed it so it used a drop down menu :).......


<html>
<head>
<script>

<!--

function land(ref, target)

{ lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{ ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("&");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}

-->

</script>


<!--
====================================================
Copyright 2001 by www.CodeLifter.com
Free for all users, but please leave in this header.
====================================================

//-->


<link rel="stylesheet" href="style_1.css">
<link rel="stylesheet" href="style_2.css">
<link rel="stylesheet" href="style_3.css">
<link rel="stylesheet" href="style_4.css">



<script language="JavaScript">
<!--
var doAlerts=false;
function changeSheets(whichSheet){
whichSheet=whichSheet-1;
if(document.styleSheets){
var c = document.styleSheets.length;
if (doAlerts) alert('Change to Style '+(whichSheet+1));
for(var i=0;i<c;i++){
if(i!=whichSheet){
document.styleSheets[i].disabled=true;
}else{
document.styleSheets[i].disabled=false;
}
}
}
}
//-->
</script>

</head>

<body>
<Form action="" method=post name="">
<select name="choice" onChange="jump(this.form)">


<option value="JavaScript:changeSheets(1)">Style One</option>
<option value="JavaScript:changeSheets(2)">Style Two</option>
<option value="JavaScript:changeSheets(3)">Style Three</option>
<option value="JavaScript:changeSheets(4)">Style Four</option>

</select>

</form>


<p>Textity Texity Text</p>

</body></head>

any use?
Lambo
ronaldb66
12-31-2002, 09:03 AM
Also check out This article (http://www.alistapart.com/stories/n4switch/) on A List Apart (http://www.alistapart.com/) about this subject. They more recently had stuff using PHP, but that might not be possible on the server you use.
Cazu1029
12-31-2002, 02:20 PM
Thank you sooooo much. :) I'll be sure to use both..
DanHibiki
01-02-2003, 02:37 PM
The way I have always done it, and correct me please if I am wrong.

example:

<link href="style.css" id="cssLink" rel="stylesheet" type="text/css">

and then somthing along the lines of:

onclick="document.getElementById('cssLink').href='newstyle.css';"

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum