Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-30-2002, 08:40 PM   PM User | #1
Cazu1029
New to the CF scene

 
Join Date: Oct 2002
Location: Mata Nui
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Cazu1029 is an unknown quantity at this point
CSS changer based on user's preferences

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?
__________________
Bionicle: BIOlogical chroNICLE. If anyone knows a script that will change an image everytime you refresh, contact me.
Cazu1029 is offline   Reply With Quote
Old 12-30-2002, 09:01 PM   PM User | #2
chrismiceli
Regular Coder

 
Join Date: Sep 2002
Location: Louisiana
Posts: 576
Thanks: 0
Thanked 0 Times in 0 Posts
chrismiceli is an unknown quantity at this point
you have to use javascript, and change it dynamically with different .css files. so yes it is possible
__________________
DevEdge - MSDN - DevGuru
chrismiceli is offline   Reply With Quote
Old 12-31-2002, 12:53 AM   PM User | #3
Cazu1029
New to the CF scene

 
Join Date: Oct 2002
Location: Mata Nui
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Cazu1029 is an unknown quantity at this point
Any premade javascript ot do this?

Is there any premade javascript that can do this? I only know limited HTML, and I'm trying to learn something else right now.
__________________
Bionicle: BIOlogical chroNICLE. If anyone knows a script that will change an image everytime you refresh, contact me.
Cazu1029 is offline   Reply With Quote
Old 12-31-2002, 04:14 AM   PM User | #4
Lambo
New to the CF scene

 
Join Date: Sep 2002
Location: Aberdeen/Edinburgh
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Lambo is an unknown quantity at this point
Took most of this from:http://www.codelifter.com/main/javas...ngestyles.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
Lambo is offline   Reply With Quote
Old 12-31-2002, 09:03 AM   PM User | #5
ronaldb66
Senior Coder

 
Join Date: Jun 2002
Location: The Netherlands, Baarn, Ut.
Posts: 4,253
Thanks: 0
Thanked 0 Times in 0 Posts
ronaldb66 is an unknown quantity at this point
ALA

Also check out This article on A List Apart about this subject. They more recently had stuff using PHP, but that might not be possible on the server you use.
__________________
Regards,
Ronald.
ronaldvanderwijden.com
ronaldb66 is offline   Reply With Quote
Old 12-31-2002, 02:20 PM   PM User | #6
Cazu1029
New to the CF scene

 
Join Date: Oct 2002
Location: Mata Nui
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Cazu1029 is an unknown quantity at this point
Cool

Thank you sooooo much. I'll be sure to use both..
__________________
Bionicle: BIOlogical chroNICLE. If anyone knows a script that will change an image everytime you refresh, contact me.
Cazu1029 is offline   Reply With Quote
Old 01-02-2003, 02:37 PM   PM User | #7
DanHibiki
New Coder

 
Join Date: Aug 2002
Posts: 26
Thanks: 0
Thanked 0 Times in 0 Posts
DanHibiki is an unknown quantity at this point
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';"
DanHibiki is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 08:20 AM.


Advertisement
Log in to turn off these ads.